aboutsummaryrefslogtreecommitdiffstats
path: root/panel
diff options
context:
space:
mode:
authorLibravatarLibravatar Biswakalyan Bhuyan <biswa@surgot.in> 2024-08-03 18:59:56 +0530
committerLibravatarLibravatar Biswakalyan Bhuyan <biswa@surgot.in> 2024-08-03 18:59:56 +0530
commitfae99f6a407de70fdba6029e45c194fb241c3433 (patch)
treecc148b86913a20e38ba5057783c5b80b08cf295b /panel
parent02af5124217f88a8c7419d963e5eee0fd72e32da (diff)
downloadadmin-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.jsx33
-rw-r--r--panel/src/components/Navbar.jsx20
-rw-r--r--panel/src/components/PrivateRoute.jsx4
-rw-r--r--panel/src/contexts/AuthContext.jsx8
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>
+ );
};