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