97 lines
3.4 KiB
React
97 lines
3.4 KiB
React
import 'leaflet/dist/leaflet.css';
|
|
import {useEffect} from 'react';
|
|
import {Routes, Route, Navigate, Outlet} from 'react-router-dom';
|
|
import {useRecipe, Grid, GridItem, useDialog, Flex, Heading} from "@chakra-ui/react";
|
|
|
|
// --- NEW AUTH IMPORTS ---
|
|
import useAuthStore from './store/authStore';
|
|
import ProtectedRoute from './components/layout/ProtectedRoute.jsx';
|
|
|
|
// Pages & Components
|
|
import Login from "@/pages/auth/Login.jsx";
|
|
import Sidebar from "./components/layout/Sidebar.jsx";
|
|
import DialogPopup from "@/components/dashboard/DialogPopup.jsx";
|
|
import Header from "@/components/layout/Header.jsx";
|
|
import Home from "./pages/home/Home.jsx";
|
|
import RegionalMap from "./pages/maps/RegionalMap.jsx";
|
|
import Volcano from "@/pages/volcano/Volcano.jsx";
|
|
import GlobalMap from "./pages/maps/GlobalMap.jsx";
|
|
import Admin from "./pages/admin/Admin.jsx";
|
|
import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
|
|
import Settings from "./pages/auth/Settings.jsx";
|
|
import WebAdmin from "./pages/auth/WebAdmin.jsx";
|
|
import DataExplorer from "@/pages/data_explorer/DataExplorer.jsx";
|
|
|
|
export default function App() {
|
|
// 1. Pull the initialization function from Zustand
|
|
const checkAuth = useAuthStore((state) => state.checkAuth);
|
|
|
|
// 2. Ping Django to verify the HttpOnly cookie the moment the app boots
|
|
useEffect(() => {
|
|
checkAuth();
|
|
}, [checkAuth]);
|
|
|
|
return (
|
|
<Routes>
|
|
{/* --- Public Routes --- */}
|
|
<Route path="/login" element={<Login/>}/>
|
|
|
|
{/* --- Secure Routes --- */}
|
|
<Route element={<ProtectedRoute/>}>
|
|
|
|
{/* --- Non-Public Routes (Now completely locked down) --- */}
|
|
<Route element={<AppFoundation/>}>
|
|
|
|
<Route path="/home" element={<Home/>}>
|
|
<Route index element={<MyDashboard/>}/>
|
|
<Route path="gas" element={<Placeholder name="Gas"/>}/>
|
|
<Route path="seismic" element={<Placeholder name="Seismic"/>}/>
|
|
<Route path="remote" element={<Placeholder name="Remote Sensing"/>}/>
|
|
<Route path="daily" element={<Placeholder name="Daily Activity"/>}/>
|
|
</Route>
|
|
|
|
<Route path="/global-map" element={<GlobalMap/>}/>
|
|
<Route path="/regional-map" element={<RegionalMap/>}/>
|
|
<Route path="/volcano" element={<Volcano/>}/>
|
|
<Route path="/admin" element={<Admin/>}/>
|
|
<Route path="/data-explorer" element={<DataExplorer/>}/>
|
|
</Route>
|
|
|
|
</Route>
|
|
|
|
{/* --- Redirect Routes --- */}
|
|
<Route path="/" element={<Navigate to="/home" replace/>}/>
|
|
</Routes>
|
|
);
|
|
}
|
|
|
|
// The fundamental layout of the webpage
|
|
function AppFoundation() {
|
|
const recipe = useRecipe({key: "dashboard"});
|
|
const styles = recipe();
|
|
const dialog = useDialog();
|
|
|
|
return (
|
|
<>
|
|
<DialogPopup dialog={dialog}/>
|
|
<Grid css={styles} templateRows="1fr 11fr" templateColumns="auto 1fr">
|
|
<GridItem rowSpan={2} colSpan={1}>
|
|
<Sidebar/>
|
|
</GridItem>
|
|
<GridItem rowSpan={1} colSpan={1}>
|
|
<Header/>
|
|
</GridItem>
|
|
<GridItem colSpan={1}>
|
|
<Outlet/>
|
|
</GridItem>
|
|
</Grid>
|
|
</>
|
|
)
|
|
}
|
|
|
|
// A dummy page that acts as a placeholder for pages that aren't developed yet but are navigatable to
|
|
const Placeholder = ({name}) => (
|
|
<Flex width="100%" height="100%" align="center" justify="center">
|
|
<Heading color="gray.500" _dark={{color: "gray.200"}} size="lg">{name} Dashboard - Coming Soon</Heading>
|
|
</Flex>
|
|
); |