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
46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
// 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}`,
|
|
}
|