diff options
author | Biswakalyan Bhuyan <biswa@surgot.in> | 2024-08-03 18:59:56 +0530 |
---|---|---|
committer | Biswakalyan Bhuyan <biswa@surgot.in> | 2024-08-03 18:59:56 +0530 |
commit | fae99f6a407de70fdba6029e45c194fb241c3433 (patch) | |
tree | cc148b86913a20e38ba5057783c5b80b08cf295b /panel | |
parent | 02af5124217f88a8c7419d963e5eee0fd72e32da (diff) | |
download | admin-panel-fae99f6a407de70fdba6029e45c194fb241c3433.tar.gz admin-panel-fae99f6a407de70fdba6029e45c194fb241c3433.tar.bz2 admin-panel-fae99f6a407de70fdba6029e45c194fb241c3433.zip |
Fixed routing issue with POPUP
Diffstat (limited to 'panel')
-rw-r--r-- | panel/src/App.jsx | 33 | ||||
-rw-r--r-- | panel/src/components/Navbar.jsx | 20 | ||||
-rw-r--r-- | panel/src/components/PrivateRoute.jsx | 4 | ||||
-rw-r--r-- | panel/src/contexts/AuthContext.jsx | 8 |
4 files changed, 45 insertions, 20 deletions
diff --git a/panel/src/App.jsx b/panel/src/App.jsx index 6d88aaf..6a09905 100644 --- a/panel/src/App.jsx +++ b/panel/src/App.jsx @@ -7,24 +7,33 @@ import Dashboard from './pages/Dashboard'; import ManageAds from './pages/ManageAds'; import Roles from './pages/Roles'; import PrivateRoute from './components/PrivateRoute'; -import { AuthProvider } from './contexts/AuthContext'; +import { AuthProvider, useAuth } from './contexts/AuthContext'; import 'bootstrap/dist/css/bootstrap.min.css'; import './tailwind.css'; +const AppRoutes = () => { + const { currentUser } = useAuth(); + + return ( + <Routes> + <Route path="/" element={currentUser ? <Navigate to="/dashboard" /> : <Navigate to="/login" />} /> + <Route path="/login" element={<LoginPage />} /> + <Route path="/register" element={<RegisterPage />} /> + <Route path="/reset" element={<ResetPage />} /> + <Route path="/" element={<PrivateRoute />}> + <Route path="dashboard" element={<Dashboard />} /> + <Route path="manage-ads" element={<ManageAds />} /> + <Route path="roles" element={<Roles />} /> + <Route path="logout" element={<Navigate to="/login" />} /> + </Route> + </Routes> + ); +}; + function App() { return ( <AuthProvider> - <Routes> - <Route path="/" element={<Navigate to="/login" />} /> - <Route path="/login" element={<LoginPage />} /> - <Route path="/register" element={<RegisterPage />} /> - <Route path="/reset" element={<ResetPage />} /> - <Route path="/" element={<PrivateRoute />}> - <Route path="dashboard" element={<Dashboard />} /> - <Route path="manage-ads" element={<ManageAds />} /> - <Route path="roles" element={<Roles />} /> - </Route> - </Routes> + <AppRoutes /> </AuthProvider> ); } diff --git a/panel/src/components/Navbar.jsx b/panel/src/components/Navbar.jsx index d9632e3..938e00a 100644 --- a/panel/src/components/Navbar.jsx +++ b/panel/src/components/Navbar.jsx @@ -1,5 +1,5 @@ -import React, { useState, useEffect } from 'react'; -import { Link } from 'react-router-dom'; +import React, { useState } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; import MenuIcon from '@mui/icons-material/Menu'; import CloseIcon from '@mui/icons-material/Close'; import $ from 'jquery'; @@ -9,6 +9,13 @@ import './Navbar.css'; const Navbar = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); + const navigate = useNavigate(); + + const handleLinkClick = (path) => { + $.magnificPopup.close(); + setIsMenuOpen(false); + navigate(path); + }; const toggleMenu = () => { if (!isMenuOpen) { @@ -27,7 +34,6 @@ const Navbar = () => { } else { $.magnificPopup.close(); } - setIsMenuOpen(!isMenuOpen); }; return ( @@ -44,10 +50,10 @@ const Navbar = () => { </ul> <div id="navbar-popup" className="mfp-hide"> <ul className="navbar-list-popup"> - <li className="navbar-item"><Link to="/dashboard">Dashboard</Link></li> - <li className="navbar-item"><Link to="/manage-ads">Manage Ads</Link></li> - <li className="navbar-item"><Link to="/roles">Roles</Link></li> - <li className="navbar-item"><Link to="/logout">Logout</Link></li> + <li className="navbar-item"><Link to="/dashboard" onClick={() => handleLinkClick('/dashboard')}>Dashboard</Link></li> + <li className="navbar-item"><Link to="/manage-ads" onClick={() => handleLinkClick('/manage-ads')}>Manage Ads</Link></li> + <li className="navbar-item"><Link to="/roles" onClick={() => handleLinkClick('/roles')}>Roles</Link></li> + <li className="navbar-item"><Link to="/logout" onClick={() => handleLinkClick('/logout')}>Logout</Link></li> </ul> </div> </div> diff --git a/panel/src/components/PrivateRoute.jsx b/panel/src/components/PrivateRoute.jsx index e2c502d..341625e 100644 --- a/panel/src/components/PrivateRoute.jsx +++ b/panel/src/components/PrivateRoute.jsx @@ -5,6 +5,10 @@ import { useAuth } from '../contexts/AuthContext'; const PrivateRoute = () => { const { currentUser } = useAuth(); + if (currentUser === undefined) { + return <div>Loading...</div>; // Or a spinner/loading component + } + return currentUser ? <Outlet /> : <Navigate to="/login" />; }; diff --git a/panel/src/contexts/AuthContext.jsx b/panel/src/contexts/AuthContext.jsx index cf8c7b5..f4f9383 100644 --- a/panel/src/contexts/AuthContext.jsx +++ b/panel/src/contexts/AuthContext.jsx @@ -10,10 +10,12 @@ export const useAuth = () => { export const AuthProvider = ({ children }) => { const [currentUser, setCurrentUser] = useState(null); + const [loading, setLoading] = useState(true); useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { setCurrentUser(user); + setLoading(false); }); return unsubscribe; @@ -23,5 +25,9 @@ export const AuthProvider = ({ children }) => { currentUser, }; - return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>; + return ( + <AuthContext.Provider value={value}> + {!loading && children} + </AuthContext.Provider> + ); }; |