6d25a499b2
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
53 lines
1.5 KiB
React
53 lines
1.5 KiB
React
import { useState, useEffect } from "react"
|
|
import HandleNavigate from "../utils/HandleNavigate/HandleNavigate"
|
|
|
|
export function requireAuthSync({ key = "username", redirectTo = "/login", replace = true } = {}) {
|
|
const value = localStorage.getItem(key)
|
|
if (!value) {
|
|
if (replace) window.location.replace(redirectTo)
|
|
else window.location.assign(redirectTo)
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
// New: non-redirecting check for auth status
|
|
export function isAuthenticated(key = "username") {
|
|
try {
|
|
return !!localStorage.getItem(key)
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
|
|
// 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 { goTo } = HandleNavigate()
|
|
const [value, setValue] = useState(() => {
|
|
try {
|
|
return localStorage.getItem(key)
|
|
} catch {
|
|
return null
|
|
}
|
|
})
|
|
|
|
// Ha nincs érték és redirect engedélyezve van, átirányítjuk (komponens mount-oláskor)
|
|
useEffect(() => {
|
|
if (!value && redirect) {
|
|
goTo(redirectTo)
|
|
}
|
|
}, [goTo, value, redirectTo, redirect])
|
|
|
|
// Szinkronizáljuk a localStorage-t amikor a state változik
|
|
useEffect(() => {
|
|
try {
|
|
if (value == null) localStorage.removeItem(key)
|
|
else localStorage.setItem(key, value)
|
|
} catch {
|
|
// fail silently
|
|
}
|
|
}, [key, value])
|
|
|
|
return [value, setValue]
|
|
}
|