GitG0r0
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
83 lines
2.9 KiB
React
83 lines
2.9 KiB
React
// src/utils/HandleNavigate/HandleNavigate.jsx
|
|
import { useNavigate } from "react-router-dom"
|
|
import { ROUTES, routeHelpers } from "../routes"
|
|
|
|
/**
|
|
* 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)
|
|
|
|
/**
|
|
* 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 {
|
|
// ====== 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),
|
|
}
|
|
}
|