feat: Centralized navigation system with HandleNavigate hook
BREAKING CHANGE: Replaced all direct useNavigate() usage with HandleNavigate hook
## Summary
- Complete frontend navigation refactoring
- Centralized route management with routes.js
- Converted 18+ components to use HandleNavigate
- Enhanced navigation with 20+ type-safe functions
## New Files
- src/utils/routes.js - Central route constants and helpers
- Documentations/FRONTEND_CODING_GUIDELINES.md - Frontend best practices (300+ lines)
- Documentations/NAVIGATION_REFACTORING_REPORT.md - Detailed refactoring report (400+ lines)
## Modified Components (18+)
### Pages
- Home.jsx, LoginForm.jsx, RegisterForm.jsx
- ResetPassword.jsx, VerifyEmailPage.jsx
- DeckCreator.jsx, Card_display.jsx
- Lobby.jsx, GameTest.jsx, ChooseDeck.jsx, PlayerSetup.jsx
- Landingpage.jsx
### Components
- Userdetails.jsx, DeckInfoPopUp.jsx
- PlayMenu.jsx, LandingPage.jsx, DeckManager.jsx
### Hooks
- useRequireAuth.jsx
### Core
- App.jsx - Route constants integration
- HandleNavigate.jsx - Enhanced with 20+ navigation functions
## Key Improvements
Type-safe navigation (goDeckDetails(id) vs navigate('/deck/'+id))
Automatic scroll management
Centralized state passing
Single source of truth for routes
Backwards compatibility aliases
Zero compile errors
Production ready
## Validation
- useNavigate: Only in HandleNavigate.jsx
- navigate() calls: 0 direct usage
- Compile errors: 0
- Documentation: Complete
This commit is contained in:
GitG0r0
@@ -1,5 +1,6 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
|
||||
import { ROUTES } from "./utils/routes"
|
||||
import AuthRegister from "./pages/Auth/AuthRegister"
|
||||
import AuthLogin from "./pages/Auth/AuthLogin"
|
||||
import Test from "./pages/Testing/Test"
|
||||
@@ -53,27 +54,27 @@ function App() {
|
||||
<>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/verify-email" element={<VerifyEmailPage />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/lobby" element={<Lobby />} />
|
||||
<Route path="/register" element={<AuthRegister />} />
|
||||
<Route path="/login" element={<AuthLogin />} />
|
||||
<Route path="/forgot-password" element={<ForgotPassword />} />
|
||||
<Route path="/reset-password" element={<ResetPassword />} />
|
||||
<Route path="/profile" element={<ProfileCard />} />
|
||||
<Route path="/test" element={<Test />} />
|
||||
<Route path="/" element={<Landingpage />} />
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/decks" element={<DeckManagerPage />} />
|
||||
<Route path="/deck/:deckId" element={<Card_display />} />
|
||||
<Route path="/deck-creator" element={<DeckCreator />} />
|
||||
<Route path="/deck-creator/:deckId" element={<DeckCreator />} />
|
||||
<Route path="/game" element={<GameScreen />} />
|
||||
<Route path="/game-test" element={<GameTest />} />
|
||||
{/* <Route path="/contacts" element={<CompanyHub />} /> */}
|
||||
<Route path="/report" element={<Reports />} />
|
||||
<Route path="/choosedeck" element={<ChooseDeck />} />
|
||||
<Route path="/playersetup" element={<PlayerSetup />} />
|
||||
<Route path={ROUTES.VERIFY_EMAIL} element={<VerifyEmailPage />} />
|
||||
<Route path={ROUTES.ABOUT} element={<About />} />
|
||||
<Route path={ROUTES.LOBBY} element={<Lobby />} />
|
||||
<Route path={ROUTES.REGISTER} element={<AuthRegister />} />
|
||||
<Route path={ROUTES.LOGIN} element={<AuthLogin />} />
|
||||
<Route path={ROUTES.FORGOT_PASSWORD} element={<ForgotPassword />} />
|
||||
<Route path={ROUTES.RESET_PASSWORD} element={<ResetPassword />} />
|
||||
<Route path={ROUTES.PROFILE} element={<ProfileCard />} />
|
||||
<Route path={ROUTES.TEST} element={<Test />} />
|
||||
<Route path={ROUTES.ROOT} element={<Landingpage />} />
|
||||
<Route path={ROUTES.HOME} element={<Home />} />
|
||||
<Route path={ROUTES.DECKS} element={<DeckManagerPage />} />
|
||||
<Route path={ROUTES.DECK_DETAILS} element={<Card_display />} />
|
||||
<Route path={ROUTES.DECK_CREATOR} element={<DeckCreator />} />
|
||||
<Route path={ROUTES.DECK_CREATOR_EDIT} element={<DeckCreator />} />
|
||||
<Route path={ROUTES.GAME} element={<GameScreen />} />
|
||||
<Route path={ROUTES.GAME_TEST} element={<GameTest />} />
|
||||
{/* <Route path={ROUTES.CONTACTS} element={<CompanyHub />} /> */}
|
||||
<Route path={ROUTES.REPORTS} element={<Reports />} />
|
||||
<Route path={ROUTES.CHOOSE_DECK} element={<ChooseDeck />} />
|
||||
<Route path={ROUTES.PLAYER_SETUP} element={<PlayerSetup />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import {
|
||||
FaPlus,
|
||||
FaFilter,
|
||||
@@ -64,7 +64,7 @@ const sortOptions = [
|
||||
]
|
||||
|
||||
const DeckManager = () => {
|
||||
const navigate = useNavigate()
|
||||
const { goDeckCreator } = HandleNavigate()
|
||||
|
||||
const [selectedType, setSelectedType] = useState("All")
|
||||
const [selectedOrigin, setSelectedOrigin] = useState("Mind")
|
||||
@@ -319,7 +319,7 @@ const DeckManager = () => {
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
|
||||
{/* Create New Deck (Mockup) */}
|
||||
<div
|
||||
onClick={() => navigate("/deck-creator")}
|
||||
onClick={() => goDeckCreator()}
|
||||
className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
|
||||
>
|
||||
<FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
|
||||
|
||||
@@ -5,9 +5,8 @@ import logoImg from "../../assets/pictures/Logo.png"
|
||||
import ButtonGreen from "../Buttons/ButtonGreen.jsx"
|
||||
import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
|
||||
import { motion } from "framer-motion"
|
||||
import { isAuthenticated } from "../../hooks/useRequireAuth" // <-- added import
|
||||
import { useNavigate } from "react-router-dom" // <-- NEW
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate" // <-- NEW
|
||||
import { isAuthenticated } from "../../hooks/useRequireAuth"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
|
||||
// 🔧 HIBA JAVÍTVA: függvénydefiníció hozzáadva
|
||||
const LandingPage = () => {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import LogoCard from "../../assets/pictures/LogoCard.jsx"
|
||||
import logoImg from "../../assets/pictures/Logo.png" // <-- EZT ADD HOZZÁ
|
||||
import ButtonDark from "../Buttons/ButtonDark.jsx"
|
||||
@@ -13,7 +13,7 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
|
||||
|
||||
// gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
|
||||
const username = user?.name ?? null
|
||||
const navigate = useNavigate()
|
||||
const { goChooseDeck } = HandleNavigate()
|
||||
|
||||
const handleJoin = () => {
|
||||
if (!joinCode.trim()) {
|
||||
@@ -40,7 +40,7 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user, setUser }) => {
|
||||
|
||||
// Do NOT call onCreateGame here to avoid any alert side-effects from parent.
|
||||
// Just navigate to choose deck and pass username via location.state
|
||||
navigate("/choosedeck", { state: { username: nameToSend } })
|
||||
goChooseDeck({ username: nameToSend })
|
||||
}
|
||||
|
||||
// egyszerű segéd a kezdobetűk kinyerésére
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import {
|
||||
FaUser,
|
||||
FaLock,
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
import { getUserProfile } from "../../api/userApi"
|
||||
|
||||
export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
const navigate = useNavigate()
|
||||
const { goDeckDetails, goDeckCreatorEdit } = HandleNavigate()
|
||||
const [currentUser, setCurrentUser] = useState(null)
|
||||
|
||||
if (!deck) return null
|
||||
@@ -136,7 +136,7 @@ export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
}
|
||||
|
||||
// Navigate to card display page
|
||||
navigate(`/deck/${deckId}`)
|
||||
goDeckDetails(deckId)
|
||||
|
||||
// Close the popup
|
||||
onClose()
|
||||
@@ -152,7 +152,7 @@ export default function DeckInfoPopUp({ deck, onClose }) {
|
||||
}
|
||||
|
||||
// Navigate to deck creator with the deck ID
|
||||
navigate(`/deck-creator/${deckId}`)
|
||||
goDeckCreatorEdit(deckId)
|
||||
|
||||
// Close the popup
|
||||
onClose()
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import {
|
||||
FaCommentDots,
|
||||
FaUserFriends,
|
||||
@@ -19,7 +19,7 @@ import { getUserProfile, updateUserProfile, deleteUserProfile } from "../../api/
|
||||
import { notifySuccess, notifyError, notifyWarning } from "../Toastify/toastifyServices"
|
||||
|
||||
const ProfileCard = () => {
|
||||
const navigate = useNavigate()
|
||||
const { goLanding } = HandleNavigate()
|
||||
|
||||
// State
|
||||
const [user, setUser] = useState(null)
|
||||
@@ -120,7 +120,7 @@ const ProfileCard = () => {
|
||||
notifySuccess("Profil sikeresen törölve!")
|
||||
localStorage.removeItem("authLevel")
|
||||
localStorage.removeItem("username")
|
||||
navigate("/")
|
||||
goLanding()
|
||||
} catch (err) {
|
||||
console.error("Profil törlési hiba:", err)
|
||||
notifyError(err.response?.data?.message || "Hiba a profil törlésekor!")
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import HandleNavigate from "../utils/HandleNavigate/HandleNavigate"
|
||||
|
||||
export function requireAuthSync({ key = "username", redirectTo = "/login", replace = true } = {}) {
|
||||
const value = localStorage.getItem(key)
|
||||
@@ -22,7 +22,7 @@ export function isAuthenticated(key = "username") {
|
||||
|
||||
// Default hook: ad vissza egy [value, setValue] párt, szinkronizálja localStorage-t és opcionálisan átirányít, ha nincs érték
|
||||
export default function useRequireAuth({ key = "username", redirectTo = "/login", redirect = true } = {}) {
|
||||
const navigate = useNavigate()
|
||||
const { goTo } = HandleNavigate()
|
||||
const [value, setValue] = useState(() => {
|
||||
try {
|
||||
return localStorage.getItem(key)
|
||||
@@ -34,9 +34,9 @@ export default function useRequireAuth({ key = "username", redirectTo = "/login"
|
||||
// Ha nincs érték és redirect engedélyezve van, átirányítjuk (komponens mount-oláskor)
|
||||
useEffect(() => {
|
||||
if (!value && redirect) {
|
||||
navigate(redirectTo)
|
||||
goTo(redirectTo)
|
||||
}
|
||||
}, [navigate, value, redirectTo, redirect])
|
||||
}, [goTo, value, redirectTo, redirect])
|
||||
|
||||
// Szinkronizáljuk a localStorage-t amikor a state változik
|
||||
useEffect(() => {
|
||||
|
||||
@@ -3,7 +3,8 @@ import InputBox from "../../components/Inputs/InputBox"
|
||||
import Button from "../../components/Buttons/Button"
|
||||
import { motion } from "framer-motion"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useLocation, useNavigate } from "react-router-dom"
|
||||
import { useLocation } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import { login, forgotPassword } from "../../api/userApi"
|
||||
import { FaArrowLeft } from "react-icons/fa"
|
||||
|
||||
@@ -12,7 +13,7 @@ export default function LoginForm() {
|
||||
const [password, setPassword] = useState("")
|
||||
const [error, setError] = useState("")
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
const { goHome, goLanding } = HandleNavigate()
|
||||
const [showSuccess, setShowSuccess] = useState(false)
|
||||
const [showErrorPopup, setShowErrorPopup] = useState(false)
|
||||
const [showForgotPasswordModal, setShowForgotPasswordModal] = useState(false)
|
||||
@@ -63,7 +64,7 @@ export default function LoginForm() {
|
||||
localStorage.setItem("username", response.data.user.username)
|
||||
localStorage.setItem("authLevel", response.data.user.authLevel)
|
||||
}
|
||||
navigate("/home")
|
||||
goHome()
|
||||
} else {
|
||||
setError("Hibás bejelentkezési adatok.")
|
||||
setShowErrorPopup(true)
|
||||
@@ -115,7 +116,7 @@ export default function LoginForm() {
|
||||
{/* 🔙 Vissza nyíl gomb — most pontosan a fehér box bal felső sarkában */}
|
||||
<div
|
||||
className="absolute -top-6 -left-6 flex items-center group cursor-pointer select-none"
|
||||
onClick={() => navigate("/")}
|
||||
onClick={() => goLanding()}
|
||||
>
|
||||
<FaArrowLeft className="text-gray-700 text-xl transition-transform duration-300 group-hover:-translate-x-1" />
|
||||
<span className="ml-2 text-gray-700 font-medium opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
|
||||
|
||||
@@ -4,7 +4,8 @@ import Button from "../../components/Buttons/Button"
|
||||
import { motion } from "framer-motion"
|
||||
import { useState } from "react"
|
||||
import { register } from "../../api/userApi"
|
||||
import { useNavigate, useLocation } from "react-router-dom"
|
||||
import { useLocation } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import { ToastConfig } from "../../components/Toastify/toastifyServices"
|
||||
import { FaArrowLeft } from "react-icons/fa"
|
||||
|
||||
@@ -18,7 +19,7 @@ export default function RegisterForm() {
|
||||
const [phone, setPhone] = useState("")
|
||||
const [error, setError] = useState("")
|
||||
const [showErrorPopup, setShowErrorPopup] = useState(false)
|
||||
const navigate = useNavigate()
|
||||
const { goLogin, goLanding } = HandleNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
function validateEmail(email) {
|
||||
@@ -52,10 +53,10 @@ export default function RegisterForm() {
|
||||
if (response && response.status === 201) {
|
||||
ToastConfig("✅ Sikeres regisztráció!")
|
||||
if (location.pathname === "/login") {
|
||||
navigate("/login", { state: { success: true } })
|
||||
goLogin({ success: true })
|
||||
window.location.reload()
|
||||
} else {
|
||||
navigate("/login", { state: { success: true } })
|
||||
goLogin({ success: true })
|
||||
}
|
||||
} else {
|
||||
let msg = "Sikertelen regisztráció."
|
||||
@@ -84,7 +85,7 @@ export default function RegisterForm() {
|
||||
{/* 🔙 Vissza nyíl gomb – ugyanott, mint a login oldalon */}
|
||||
<div
|
||||
className="absolute -top-2 -left-1 flex items-center group cursor-pointer select-none"
|
||||
onClick={() => navigate("/")}
|
||||
onClick={() => goLanding()}
|
||||
>
|
||||
<FaArrowLeft className="text-gray-700 text-xl transition-transform duration-300 group-hover:-translate-x-1" />
|
||||
<span className="ml-2 text-gray-700 font-medium opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
|
||||
|
||||
@@ -2,13 +2,14 @@
|
||||
// Új jelszó megadása
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSearchParams, useNavigate } from "react-router-dom";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import Background from "../../assets/backgrounds/Background";
|
||||
import { motion } from "framer-motion";
|
||||
import Button from "../../components/Buttons/Button";
|
||||
import InputBox from "../../components/Inputs/InputBox";
|
||||
import { resetPassword } from "../../api/userApi";
|
||||
import { FaArrowLeft } from "react-icons/fa";
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate";
|
||||
|
||||
export default function ResetPassword() {
|
||||
const [password, setPassword] = useState("");
|
||||
@@ -16,7 +17,7 @@ export default function ResetPassword() {
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState(false);
|
||||
const [searchParams] = useSearchParams();
|
||||
const navigate = useNavigate();
|
||||
const { goLogin } = HandleNavigate();
|
||||
const token = searchParams.get("token");
|
||||
|
||||
useEffect(() => {
|
||||
@@ -53,7 +54,7 @@ export default function ResetPassword() {
|
||||
await resetPassword(token, password);
|
||||
setSuccess(true);
|
||||
setTimeout(() => {
|
||||
navigate("/login", { state: { success: true, message: "Jelszó sikeresen megváltoztatva! Jelentkezz be az új jelszóval." } });
|
||||
goLogin({ success: true, message: "Jelszó sikeresen megváltoztatva! Jelentkezz be az új jelszóval." });
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || "Hiba történt a jelszó visszaállítása során!");
|
||||
@@ -73,7 +74,7 @@ export default function ResetPassword() {
|
||||
{/* Vissza gomb */}
|
||||
<div
|
||||
className="absolute -top-(-2) -left-(-1) flex items-center group cursor-pointer select-none"
|
||||
onClick={() => navigate("/login")}
|
||||
onClick={() => goLogin()}
|
||||
>
|
||||
<FaArrowLeft className="text-gray-700 text-xl transition-transform duration-300 group-hover:-translate-x-1" />
|
||||
<span className="ml-2 text-gray-700 font-medium opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import Background from "../../assets/backgrounds/Background";
|
||||
import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices";
|
||||
import { verifyEmail } from "../../api/userApi";
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate";
|
||||
|
||||
export default function VerifyEmailPage() {
|
||||
const navigate = useNavigate();
|
||||
const { goLogin } = HandleNavigate();
|
||||
const location = useLocation();
|
||||
const [status, setStatus] = useState("loading");
|
||||
const [message, setMessage] = useState("Email címe hitelesítés alatt...");
|
||||
@@ -37,7 +38,7 @@ export default function VerifyEmailPage() {
|
||||
notifySuccess("✅ Email címe sikeresen hitelesítve!");
|
||||
hasNotified.current = true;
|
||||
}
|
||||
setTimeout(() => navigate("/login"), 2500);
|
||||
setTimeout(() => goLogin(), 2500);
|
||||
} else {
|
||||
throw new Error(data?.message || "Sikertelen hitelesítés");
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
// Deck Creator Page - Deck létrehozás és szerkesztés
|
||||
|
||||
import React, { useState, useEffect } from "react"
|
||||
import { useParams, useNavigate } from "react-router-dom"
|
||||
import { useParams } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import Navbar from "../../components/Navbar/Navbar.jsx"
|
||||
import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
|
||||
import CardsList from "../../components/DeckCreator/CardsList.jsx"
|
||||
@@ -12,7 +13,7 @@ import { notifySuccess, notifyError, notifyWarning } from "../../components/Toas
|
||||
|
||||
export default function DeckCreator() {
|
||||
const { deckId } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { goDecks } = HandleNavigate()
|
||||
|
||||
// Deck alapadatok
|
||||
const [deck, setDeck] = useState({
|
||||
@@ -92,7 +93,7 @@ export default function DeckCreator() {
|
||||
} catch (error) {
|
||||
console.error('Pakli betöltési hiba:', error)
|
||||
notifyError('Hiba történt a pakli betöltése során: ' + (error?.response?.data?.error || error.message))
|
||||
navigate('/decks')
|
||||
goDecks()
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
@@ -237,7 +238,7 @@ export default function DeckCreator() {
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
navigate("/decks")
|
||||
goDecks()
|
||||
}
|
||||
|
||||
const handleDeleteDeck = () => {
|
||||
@@ -254,7 +255,7 @@ export default function DeckCreator() {
|
||||
await deleteDeck(deck.id)
|
||||
setShowDeleteModal(false)
|
||||
notifySuccess('Pakli sikeresen törölve!')
|
||||
navigate('/decks')
|
||||
goDecks()
|
||||
} catch (error) {
|
||||
console.error('Pakli törlési hiba:', error)
|
||||
const errorMessage = error?.response?.data?.error
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect } from "react"
|
||||
import { useParams, useNavigate } from "react-router-dom"
|
||||
import { useParams } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import {
|
||||
FaArrowLeft,
|
||||
FaFilter,
|
||||
@@ -18,7 +19,7 @@ import { getDeckById } from "../../api/deckApi"
|
||||
|
||||
const Card_display = () => {
|
||||
const { deckId } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { goDecks } = HandleNavigate()
|
||||
|
||||
const [deck, setDeck] = useState(null)
|
||||
const [cards, setCards] = useState([])
|
||||
@@ -186,7 +187,7 @@ const Card_display = () => {
|
||||
{/* Header with back button */}
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<button
|
||||
onClick={() => navigate('/decks')}
|
||||
onClick={() => goDecks()}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-surface)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-all duration-200 shadow"
|
||||
>
|
||||
<FaArrowLeft />
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useState } from "react"
|
||||
import { useNavigate, useLocation } from "react-router-dom"
|
||||
import { useLocation } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import Navbar from "../../components/Navbar/Navbar.jsx"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
import Footer from "../../components/Footer/Footer.jsx"
|
||||
@@ -45,7 +46,7 @@ const ChooseDeck = () => {
|
||||
// prefer passed username (from navigate state) over authenticated username
|
||||
const username = locationUsername ?? authUsername
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { goPlayerSetup } = HandleNavigate()
|
||||
|
||||
const [selectedType, setSelectedType] = useState("All")
|
||||
const [selectedOrigin, setSelectedOrigin] = useState("Mind")
|
||||
@@ -130,7 +131,7 @@ const ChooseDeck = () => {
|
||||
return
|
||||
}
|
||||
console.log("Kiválasztott pakli ID-k:", selectedDeckIds)
|
||||
navigate("/playersetup", { state: { deckIds: selectedDeckIds } })
|
||||
goPlayerSetup({ deckIds: selectedDeckIds })
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import HandleNavigate from '../../utils/HandleNavigate/HandleNavigate';
|
||||
import { createGame, joinGame } from '../../api/gameApi';
|
||||
|
||||
const GameTest = () => {
|
||||
const navigate = useNavigate();
|
||||
const { goLobby, goGame } = HandleNavigate();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [gameCode, setGameCode] = useState('');
|
||||
@@ -44,7 +44,7 @@ const GameTest = () => {
|
||||
|
||||
// Wait 3 seconds to show code, then navigate
|
||||
setTimeout(() => {
|
||||
navigate('/lobby', { state: { gameCode: code } });
|
||||
goLobby({ gameCode: code });
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Failed to create game');
|
||||
@@ -75,7 +75,7 @@ const GameTest = () => {
|
||||
// Store game token
|
||||
if (response.data?.gameToken) {
|
||||
localStorage.setItem('gameToken', response.data.gameToken);
|
||||
navigate('/lobby', { state: { gameCode: gameCode.toUpperCase() } });
|
||||
goLobby({ gameCode: gameCode.toUpperCase() });
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Nem sikerült csatlakozni a játékhoz');
|
||||
@@ -145,7 +145,7 @@ const GameTest = () => {
|
||||
<button
|
||||
onClick={() => {
|
||||
localStorage.setItem('gameToken', 'test-token-123');
|
||||
navigate('/game');
|
||||
goGame();
|
||||
}}
|
||||
className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded text-sm"
|
||||
>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useRef, useState } from "react"
|
||||
import { useNavigate, useLocation } from "react-router-dom"
|
||||
import { useLocation } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import Navbar from "../../components/Navbar/Navbar.jsx"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
import useRequireAuth from "../../hooks/useRequireAuth.jsx"
|
||||
@@ -9,7 +10,7 @@ import { startGame } from "../../api/gameApi.js"
|
||||
const Lobby = () => {
|
||||
const [visible, setVisible] = useState(false)
|
||||
const sectionRef = useRef(null)
|
||||
const navigate = useNavigate()
|
||||
const { goHome, goGame } = HandleNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
const [user, setUser] = useRequireAuth()
|
||||
@@ -53,14 +54,14 @@ const Lobby = () => {
|
||||
useEffect(() => {
|
||||
if (gameStarted) {
|
||||
console.log('🎮 Game started, navigating to /game')
|
||||
navigate("/game")
|
||||
goGame()
|
||||
}
|
||||
}, [gameStarted, navigate])
|
||||
}, [gameStarted, goGame])
|
||||
|
||||
const handleExit = () => {
|
||||
if (window.confirm("Biztosan ki szeretnél lépni a lobbyból?")) {
|
||||
localStorage.removeItem('gameToken')
|
||||
navigate("/home")
|
||||
goHome()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,7 +80,7 @@ const Lobby = () => {
|
||||
|
||||
// Backend will broadcast game:started event to all players
|
||||
// Navigate to game page
|
||||
navigate("/game")
|
||||
goGame()
|
||||
} catch (error) {
|
||||
console.error('Failed to start game:', error)
|
||||
alert(`Nem sikerült elindítani a játékot: ${error.response?.data?.error || error.message}`)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect } from "react"
|
||||
import { useNavigate, useLocation } from "react-router-dom"
|
||||
import { useLocation } from "react-router-dom"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import Navbar from "../../components/Navbar/Navbar.jsx"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
import Footer from "../../components/Footer/Footer.jsx"
|
||||
@@ -10,7 +11,7 @@ import { createGame, joinGame } from "../../api/gameApi.js"
|
||||
|
||||
const GameLobbySetup = () => {
|
||||
const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
|
||||
const navigate = useNavigate()
|
||||
const { goLobby, goChooseDeck } = HandleNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
const deckIds = location.state?.deckIds || []
|
||||
@@ -79,7 +80,7 @@ const GameLobbySetup = () => {
|
||||
// Wait 3 seconds to show code, then navigate to lobby
|
||||
setTimeout(() => {
|
||||
console.log('Navigating to lobby with code:', code)
|
||||
navigate('/lobby', { state: { gameCode: code } })
|
||||
goLobby({ gameCode: code })
|
||||
}, 3000)
|
||||
} catch (err) {
|
||||
console.error('Create game error:', err)
|
||||
@@ -92,7 +93,7 @@ const GameLobbySetup = () => {
|
||||
}
|
||||
|
||||
if (deckIds.length === 0) {
|
||||
navigate("/choosedeck")
|
||||
goChooseDeck()
|
||||
return null
|
||||
}
|
||||
|
||||
@@ -200,7 +201,7 @@ const GameLobbySetup = () => {
|
||||
<div className="flex justify-center gap-4 mt-8">
|
||||
<ButtonGreen
|
||||
text="Vissza"
|
||||
onClick={() => navigate("/choosedeck")}
|
||||
onClick={() => goChooseDeck()}
|
||||
width="w-auto px-8"
|
||||
className="bg-gray-600 hover:bg-gray-700"
|
||||
disabled={loading}
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
// Régi PlayMenu-s oldal, "Home" néven
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import useRequireAuth from "../../hooks/useRequireAuth"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"
|
||||
import Navbar from "../../components/Navbar/Navbar"
|
||||
import Footer from "../../components/Footer/Footer.jsx"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
@@ -11,7 +11,7 @@ import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
|
||||
import { joinGame } from "../../api/gameApi.js"
|
||||
|
||||
export default function Home() {
|
||||
const navigate = useNavigate()
|
||||
const { goLogin, goLobby, goChooseDeck } = HandleNavigate()
|
||||
// a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert
|
||||
const [user, setUser] = useRequireAuth({ redirect: false }) // no redirect on unauthenticated visitors
|
||||
const [isJoining, setIsJoining] = useState(false)
|
||||
@@ -20,7 +20,7 @@ export default function Home() {
|
||||
const handleJoinGame = async (code) => {
|
||||
if (!user) {
|
||||
alert('Kérlek először jelentkezz be!')
|
||||
navigate('/login')
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@ export default function Home() {
|
||||
localStorage.setItem('gameToken', response.gameToken)
|
||||
}
|
||||
|
||||
navigate('/lobby', { state: { gameCode: code.toUpperCase() } })
|
||||
goLobby({ gameCode: code.toUpperCase() })
|
||||
} catch (err) {
|
||||
const errorMsg = err.response?.data?.error || err.response?.data?.message || 'Nem sikerült csatlakozni a játékhoz'
|
||||
alert(errorMsg)
|
||||
@@ -62,12 +62,12 @@ export default function Home() {
|
||||
const handleCreateGame = () => {
|
||||
if (!user) {
|
||||
alert('Kérlek először jelentkezz be!')
|
||||
navigate('/login')
|
||||
goLogin()
|
||||
return
|
||||
}
|
||||
|
||||
// Navigate to choose deck page to start game creation flow
|
||||
navigate('/choosedeck')
|
||||
goChooseDeck()
|
||||
}
|
||||
|
||||
const userObj = { name: user }
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
// Főoldal - Landing Page
|
||||
|
||||
|
||||
import { data, useNavigate } from "react-router-dom"
|
||||
import Navbar from "../../components/Navbar/Navbar"
|
||||
import Footer from "../../components/Footer/Footer.jsx"
|
||||
import Background from "../../assets/backgrounds/Background.jsx"
|
||||
@@ -10,7 +9,7 @@ import LandingPage from "../../components/Landingpage/LandingPage.jsx"
|
||||
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate.jsx"
|
||||
|
||||
export default function LandingPageMain() {
|
||||
const { goHome, goLogin, goContacts, goAuth, } = HandleNavigate()
|
||||
const { goHome, goLogin, goContacts, goAuth } = HandleNavigate()
|
||||
|
||||
return (
|
||||
<div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
|
||||
|
||||
@@ -1,28 +1,82 @@
|
||||
// src/hooks/useAppNavigation.jsx
|
||||
// src/utils/HandleNavigate/HandleNavigate.jsx
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import { ROUTES, routeHelpers } from "../routes"
|
||||
|
||||
/**
|
||||
* Egy általános navigációs helper hook, amit bármelyik komponensben használhatsz.
|
||||
* Minden funkció automatikusan a megfelelő útvonalra visz és visszagörget az oldal tetejére.
|
||||
* Centralized navigation hook for the entire application
|
||||
* Provides type-safe navigation with automatic scroll management and state handling
|
||||
*
|
||||
* @example
|
||||
* const { goHome, goDeckDetails, goTo } = HandleNavigate()
|
||||
* goHome() // Navigate to home
|
||||
* goDeckDetails('deck-123') // Navigate to specific deck
|
||||
* goTo('/custom-path', { state: { data: 'value' } }) // Custom navigation with state
|
||||
*/
|
||||
export default function HandleNavigate() {
|
||||
const navigate = useNavigate()
|
||||
|
||||
const scrollTop = () => window.scrollTo(0, 0)
|
||||
|
||||
const goTo = (path, preventScrollReset = false) => {
|
||||
navigate(path, { preventScrollReset })
|
||||
scrollTop()
|
||||
/**
|
||||
* Core navigation function with extended options
|
||||
* @param {string} path - The route path to navigate to
|
||||
* @param {Object} options - Navigation options
|
||||
* @param {boolean} options.preventScrollReset - Prevent automatic scroll to top
|
||||
* @param {Object} options.state - State to pass to the next route
|
||||
* @param {boolean} options.replace - Replace current history entry instead of pushing
|
||||
*/
|
||||
const goTo = (path, options = {}) => {
|
||||
const { preventScrollReset = false, state = null, replace = false } = options
|
||||
|
||||
navigate(path, {
|
||||
preventScrollReset,
|
||||
state,
|
||||
replace
|
||||
})
|
||||
|
||||
if (!preventScrollReset) {
|
||||
scrollTop()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
goTo, // általános útvonalváltó
|
||||
goHome: () => goTo("/home"),
|
||||
goLogin: () => goTo("/login"),
|
||||
goAuth: () => goTo("/register"),
|
||||
goCompanies: () => goTo("/companies"),
|
||||
goContacts: () => goTo("/contacts"),
|
||||
goAbout: () => goTo("/about"),
|
||||
goLanding: () => goTo("/"),
|
||||
// ====== Core Navigation ======
|
||||
goTo, // General purpose navigation
|
||||
|
||||
// ====== Public Routes ======
|
||||
goRoot: () => goTo(ROUTES.ROOT),
|
||||
goLanding: () => goTo(ROUTES.LANDING),
|
||||
goHome: () => goTo(ROUTES.HOME),
|
||||
goAbout: () => goTo(ROUTES.ABOUT),
|
||||
|
||||
// ====== Auth Routes ======
|
||||
goLogin: () => goTo(ROUTES.LOGIN),
|
||||
goRegister: () => goTo(ROUTES.REGISTER),
|
||||
goAuth: () => goTo(ROUTES.REGISTER), // Alias for backwards compatibility
|
||||
goForgotPassword: () => goTo(ROUTES.FORGOT_PASSWORD),
|
||||
goResetPassword: () => goTo(ROUTES.RESET_PASSWORD),
|
||||
goVerifyEmail: () => goTo(ROUTES.VERIFY_EMAIL),
|
||||
|
||||
// ====== User Routes ======
|
||||
goProfile: () => goTo(ROUTES.PROFILE),
|
||||
|
||||
// ====== Deck Routes ======
|
||||
goDecks: () => goTo(ROUTES.DECKS),
|
||||
goDeckDetails: (deckId) => goTo(routeHelpers.deckDetails(deckId)),
|
||||
goDeckCreator: () => goTo(ROUTES.DECK_CREATOR),
|
||||
goDeckCreatorEdit: (deckId) => goTo(routeHelpers.deckCreatorEdit(deckId)),
|
||||
|
||||
// ====== Game Routes ======
|
||||
goChooseDeck: (state = null) => goTo(ROUTES.CHOOSE_DECK, { state }),
|
||||
goPlayerSetup: (state = null) => goTo(ROUTES.PLAYER_SETUP, { state }),
|
||||
goLobby: (state = null) => goTo(ROUTES.LOBBY, { state }),
|
||||
goGame: (state = null) => goTo(ROUTES.GAME, { state }),
|
||||
goGameTest: () => goTo(ROUTES.GAME_TEST),
|
||||
|
||||
// ====== Other Routes ======
|
||||
goReports: () => goTo(ROUTES.REPORTS),
|
||||
goContacts: () => goTo(ROUTES.CONTACTS),
|
||||
goCompanies: () => goTo(ROUTES.CONTACTS), // Alias for backwards compatibility
|
||||
goTest: () => goTo(ROUTES.TEST),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
// src/utils/routes.js
|
||||
// Centralized route definitions for the entire application
|
||||
// This ensures consistency and makes route changes easier to manage
|
||||
|
||||
export const ROUTES = {
|
||||
// ====== Public Routes ======
|
||||
ROOT: '/',
|
||||
LANDING: '/',
|
||||
HOME: '/home',
|
||||
ABOUT: '/about',
|
||||
|
||||
// ====== Authentication Routes ======
|
||||
LOGIN: '/login',
|
||||
REGISTER: '/register',
|
||||
FORGOT_PASSWORD: '/forgot-password',
|
||||
RESET_PASSWORD: '/reset-password',
|
||||
VERIFY_EMAIL: '/verify-email',
|
||||
|
||||
// ====== User Routes ======
|
||||
PROFILE: '/profile',
|
||||
|
||||
// ====== Deck Routes ======
|
||||
DECKS: '/decks',
|
||||
DECK_DETAILS: '/deck/:deckId',
|
||||
DECK_CREATOR: '/deck-creator',
|
||||
DECK_CREATOR_EDIT: '/deck-creator/:deckId',
|
||||
|
||||
// ====== Game Routes ======
|
||||
CHOOSE_DECK: '/choosedeck',
|
||||
PLAYER_SETUP: '/playersetup',
|
||||
LOBBY: '/lobby',
|
||||
GAME: '/game',
|
||||
GAME_TEST: '/game-test',
|
||||
|
||||
// ====== Other Routes ======
|
||||
REPORTS: '/report',
|
||||
CONTACTS: '/contacts',
|
||||
TEST: '/test',
|
||||
}
|
||||
|
||||
// Helper functions to generate dynamic routes
|
||||
export const routeHelpers = {
|
||||
deckDetails: (deckId) => `/deck/${deckId}`,
|
||||
deckCreatorEdit: (deckId) => `/deck-creator/${deckId}`,
|
||||
}
|
||||
Reference in New Issue
Block a user