import React, { useEffect, useState } from "react"; import { Routes, Route, Navigate } from "react-router-dom"; import Topbar from "./scenes/global/Topbar"; import Dashboard from "./scenes/dashboard"; import DashboardSales from "./scenes/dashboardsales/index"; import DashboardMerchant from "./scenes/dashboardmerchandiser/index"; import Contacts from "./scenes/contacts/index"; import MerchantInfo from "./scenes/contacts/app"; import Form from "./scenes/form/index.js"; import Merchant from "./scenes/merchant/app"; import { CssBaseline, ThemeProvider } from "@mui/material"; import { ColorModeContext, tokens, useMode } from "./theme"; import Calendar from "./scenes/calendar/calendar"; import GoogleMap from "./scenes/maps/maps"; import RoutePlan from "./scenes/routeplan/RoutePlan"; import Home from "./Home"; import SignUpAdmin from "./SignAdmin"; import LoginAdmin from "./LoginAdmin"; import LoginSales from "./LoginSales"; import LoginMerchant from "./LoginMerchant"; import ProtectedRoute from "./ProtectedRoute"; function App() { const [theme, colorMode] = useMode(); const [isSidebar, setIsSidebar] = useState(true); const [isAuthenticated, setIsAuthenticated] = useState(false); // function setAuthState(state) { // setIsAuthenticated(state) // } useEffect(() => { const token = localStorage.getItem("jwt"); console.log({ token }); }, [isAuthenticated]); return ( <ColorModeContext.Provider value={colorMode}> <ThemeProvider theme={theme}> <CssBaseline /> <div className="app"> <main className="content"> <Topbar setIsSidebar={setIsSidebar} /> <Routes> <Route path="/" element={<Home />} /> <Route path="/signup-admin" element={<SignUpAdmin />} /> <Route path="/admin-log" element={<LoginAdmin />} /> <Route path="/sales-log" element={<LoginSales />} /> <Route path="/merchant-log" element={<LoginMerchant />} /> {/* protect routesclear */} <Route path="/admin" element={ <ProtectedRoute element={Dashboard} isAuthenticated={isAuthenticated} /> } /> <Route path="/sales" element={ <ProtectedRoute element={DashboardSales} isAuthenticated={isAuthenticated} /> } /> <Route path="/merchant" element={ <ProtectedRoute element={DashboardMerchant} isAuthenticated={isAuthenticated} /> } /> <Route path="/contacts" element={ <ProtectedRoute element={Contacts} isAuthenticated={isAuthenticated} /> } /> <Route path="/merchantInfo" element={ <ProtectedRoute element={MerchantInfo} isAuthenticated={isAuthenticated} /> } /> <Route path="/form" element={<Form />} /> <Route path="/form-merchant" element={<Merchant />} /> <Route path="/calendar" element={<Calendar />} /> <Route path="/maps" element={<GoogleMap />} /> <Route path="/routeplans" element={<RoutePlan />} /> </Routes> </main> </div> </ThemeProvider> </ColorModeContext.Provider> ); } export default App;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter