From 67f8645a25d0a397b7c7c414d5f630d362a33be5 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Wed, 16 Apr 2025 12:29:02 -0600
Subject: [PATCH] theme is saving properly to local storage

---
 src/navigation/Router.tsx      | 91 ++++++++++++++++------------------
 src/theme/AppThemeProvider.tsx |  6 ++-
 2 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/navigation/Router.tsx b/src/navigation/Router.tsx
index f70fdc4..4dd6917 100644
--- a/src/navigation/Router.tsx
+++ b/src/navigation/Router.tsx
@@ -8,7 +8,6 @@ import { ErrorBoundary } from "react-error-boundary";
 import { getWhitelabel } from "services/whiteLabel";
 import Ventilation from "pages/VentEditor";
 import { useGlobalState } from "providers";
-import { Box } from "@mui/material";
 
 const DeviceHistory = lazy(() => import("pages/DeviceHistory"));
 const DevicePage = lazy(() => import("pages/Device"));
@@ -289,54 +288,52 @@ export default function Router() {
   return (
     <BrowserRouter>
       <Header />
-      {/* <Box sx={{ height: "100%", minHeight: "200px" }}> */}
-        <Suspense fallback={<LoadingScreen message="Loading Page"/>}>
-          <Routes>
-            
-            {/* Redirects */}
-            <Route path="/callback" element={<Navigate to="/" />} />
-            {/* <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} /> */}
-            {/* <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} /> */}
-            <Route path="" element={<Navigate to={whiteLabel.homePage ? whiteLabel.homePage : "/devices"} />} />
-            
-            {/* Page routes */}
-            {/* <Route index element={<Typography>Hello!</Typography>} /> */}
-            <Route path="users" element={<Users/>} />
-            <Route path="tasks" element={<Tasks />} />
-            <Route path="transactions" element={<Transactions />} />
-            {user.hasFeature("installer") &&
-              <Route path="cableEstimate" element={<BinCableEstimator />} />
-            }
-            {user.hasFeature("developer") &&
-              <Route path="api" element={<APIDocs />} />
-            }
-            {user.hasFeature("admin") &&
-              <Route path="logs" element={<Logs />} />
-            }
-            <Route path="fields" element={<Fields />} />
-            <Route path="marketplace" element={<Marketplace />} />
-            {user.hasFeature("admin") && (
-              <Route path="firmware" element={<Firmware />} />
-            )}
-            <Route path="nfc" element={<Nfc />} />
-            
-            {/* Map pages */}
-            <Route path="visualFarm" element={<FieldMap />} />
-            <Route path="aviationMap" element={<AviationMap />} />
-            <Route path="constructionMap" element={<ConstructionSiteMap />} />
-
-            <Route path="/logout" element={<Logout />} />
-            <Route path="grainbags/:bagID" element={<GrainBag />} />
-    {/* 
-            <ErrorBoundary FallbackComponent={ErrorFallback}>
-              <Route path="*" element={<RelativeRoutes/>} />
-            </ErrorBoundary> */}
+      <Suspense fallback={<LoadingScreen message="Loading Page"/>}>
+        <Routes>
+          
+          {/* Redirects */}
+          <Route path="/callback" element={<Navigate to="/" />} />
+          {/* <Route path="/team/:teamID" element={<Navigate to="/teams/:teamID" />} /> */}
+          {/* <Route path="/device/:deviceID" element={<Navigate to="/devices/:devicesID" />} /> */}
+          <Route path="" element={<Navigate to={whiteLabel.homePage ? whiteLabel.homePage : "/devices"} />} />
+          
+          {/* Page routes */}
+          {/* <Route index element={<Typography>Hello!</Typography>} /> */}
+          <Route path="users" element={<Users/>} />
+          <Route path="tasks" element={<Tasks />} />
+          <Route path="transactions" element={<Transactions />} />
+          {user.hasFeature("installer") &&
+            <Route path="cableEstimate" element={<BinCableEstimator />} />
+          }
+          {user.hasFeature("developer") &&
+            <Route path="api" element={<APIDocs />} />
+          }
+          {user.hasFeature("admin") &&
+            <Route path="logs" element={<Logs />} />
+          }
+          <Route path="fields" element={<Fields />} />
+          <Route path="marketplace" element={<Marketplace />} />
+          {user.hasFeature("admin") && (
+            <Route path="firmware" element={<Firmware />} />
+          )}
+          <Route path="nfc" element={<Nfc />} />
+          
+          {/* Map pages */}
+          <Route path="visualFarm" element={<FieldMap />} />
+          <Route path="aviationMap" element={<AviationMap />} />
+          <Route path="constructionMap" element={<ConstructionSiteMap />} />
 
+          <Route path="/logout" element={<Logout />} />
+          <Route path="grainbags/:bagID" element={<GrainBag />} />
+  {/* 
+          <ErrorBoundary FallbackComponent={ErrorFallback}>
             <Route path="*" element={<RelativeRoutes/>} />
-            
-          </Routes>
-        </Suspense>
-      {/* </Box> */}
+          </ErrorBoundary> */}
+
+          <Route path="*" element={<RelativeRoutes/>} />
+          
+        </Routes>
+      </Suspense>
     </BrowserRouter>
   )
 }
\ No newline at end of file
diff --git a/src/theme/AppThemeProvider.tsx b/src/theme/AppThemeProvider.tsx
index 4cedb98..6cc9601 100644
--- a/src/theme/AppThemeProvider.tsx
+++ b/src/theme/AppThemeProvider.tsx
@@ -24,7 +24,11 @@ export const useThemeMode = () => {
 };
 
 export const AppThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [mode, setMode] = useState<ThemeMode>("system");
+  
+  const savedTheme = localStorage.getItem("theme");
+  const isValidTheme = (theme: string | null): theme is ThemeMode =>
+    theme === "light" || theme === "dark" || theme === "system";
+  const [mode, setMode] = useState<ThemeMode>(isValidTheme(savedTheme) ? savedTheme : "system");
 
   const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
   const resolvedMode: PaletteMode = mode === "system" ? (prefersDark ? "dark" : "light") : mode;