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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user