main.tsx (2240B)
1 import React, { StrictMode } from "react"; 2 import { BrowserRouter, Route, Routes } from "react-router"; 3 import { createRoot } from "react-dom/client"; 4 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 5 import ProtectedRoute from "./ProtectedRoute"; 6 import { AuthenticationContextProvider, useAuthentication } from "./authentication/AuthenticationContext"; 7 import AuthenticatedLayout from "./AuthenticatedLayout"; 8 9 import "./app.scss"; 10 11 const HomePage = React.lazy(() => import("./pages/HomePage")); 12 const DashboardPage = React.lazy(() => import("./pages/dashboard/DashboardPage")); 13 const BindersPage = React.lazy(() => import("./pages/binders/BindersPage")); 14 const BinderPage = React.lazy(() => import("./pages/binders/BinderPage")); 15 16 const AppRouter = () => { 17 const username = useAuthentication(); 18 19 return ( 20 <BrowserRouter> 21 <Routes> 22 <Route element={<ProtectedRoute isAllowed={!username} />}> 23 <Route path="/login" element={<HomePage />} /> 24 </Route> 25 <Route element={<ProtectedRoute isAllowed={!!username} redirectPath="/login" />}> 26 <Route element={<AuthenticatedLayout />}> 27 <Route path="/" element={<DashboardPage />} /> 28 <Route path="/binders" element={<BindersPage />} /> 29 <Route path="/binders/:id" element={<BinderPage />} /> 30 </Route> 31 </Route> 32 </Routes> 33 </BrowserRouter> 34 ); 35 }; 36 37 export const queryClient = new QueryClient(); 38 39 const App = () => ( 40 <StrictMode> 41 <QueryClientProvider client={queryClient}> 42 <AuthenticationContextProvider> 43 <AppRouter /> 44 </AuthenticationContextProvider> 45 </QueryClientProvider> 46 </StrictMode> 47 ); 48 49 /* 50 * Bootstrap color modes 51 */ 52 53 // Set theme to the user's preferred color scheme 54 function updateTheme() { 55 const colorMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? 56 "dark" : 57 "light"; 58 document.querySelector("html")?.setAttribute("data-bs-theme", colorMode); 59 } 60 61 // Set theme on load 62 updateTheme() 63 64 // Update theme when the preferred scheme changes 65 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme) 66 67 const container = document.getElementById("root"); 68 if (container != null) { 69 const root = createRoot(container); 70 root.render(<App />); 71 }