fix rare config load bug

- view mode will default to admin if config does fail to load for w/e reason
- rename viewMode to currentViewMode

web/src/AppBar.jsx

@@ -17,7 +17,7 @@ export default function AppBar() {
   const [showMoreMenu, setShowMoreMenu] = useState(false);
   const [showDialog, setShowDialog] = useState(false);
   const [showDialogWait, setShowDialogWait] = useState(false);
-  const { viewMode, setViewMode } = useViewMode();
+  const { currentViewMode, setViewMode } = useViewMode();
   const { setDarkMode } = useDarkMode();
   const { send: sendRestart } = useRestart();
 
@@ -75,7 +75,7 @@ export default function AppBar() {
           <MenuItem icon={SettingsIcon} label="Viewmode:">
             <select
               className="py-0.5 pr-8"
-              value={viewMode}
+              value={currentViewMode}
               onChange={(e) => handleSetViewMode(e.target.value)}
             >
               { Object.keys(ViewModeTypes).filter((v) => !isNaN(Number(v))).map(key => <option key={key} value={key}>{ViewModeTypes[key]}</option>) }

web/src/app.tsx

@@ -16,7 +16,7 @@ export default function App() {
   return (
     <DarkModeProvider>
       <DrawerProvider>
-        <ViewModeProvider>
+        <ViewModeProvider config={config}>
           <div data-testid="app" className="w-full">
           <AppBar />
             {!config ? (

web/src/components/ViewOption.jsx

@@ -3,9 +3,9 @@ import { useViewMode } from '../context';
 import { ViewModeTypes } from './ViewOptionEnum';
 
 export default function ViewOption({children, requiredmode }) {
-  const { viewMode } = useViewMode();
+  const { currentViewMode } = useViewMode();
 
-  return viewMode >= ViewModeTypes[requiredmode] ? (
+  return currentViewMode >= ViewModeTypes[requiredmode] ? (
     <>{children}</>
     
   ) : null;

web/src/context/index.jsx

@@ -2,24 +2,34 @@ import { h, createContext } from 'preact';
 import { get as getData, set as setData } from 'idb-keyval';
 import { useCallback, useContext, useEffect, useLayoutEffect, useState } from 'preact/hooks';
 import { ViewModeTypes } from '../components/ViewOptionEnum';
-import useSWR from 'swr';
 
-const ViewMode = createContext(null);
+const ViewMode = createContext("");
 
-export function ViewModeProvider({ children }) {
+export function ViewModeProvider({ children, config }) {
-  const [viewMode, setViewMode] = usePersistence('view-mode', null);
+  const [currentViewMode, setCurrentViewMode] = useState(null);
-  const { data: config } = useSWR('config');
+
+  const setViewMode = useCallback(
+    (value) => {
+      setData('view-mode', value);
+      setCurrentViewMode(value);
+    },
+    [setCurrentViewMode]
+  );
 
   useEffect(() => {
     async function load() {
-      const configValue = ViewModeTypes[config.ui.viewmode]; //fixes a load error
+      const configValue = config ? ViewModeTypes[config.ui.viewmode].toString() : "2";
-      setViewMode(viewMode || configValue);
+      const viewmode = await getData('view-mode');
+      setViewMode(viewmode || configValue);
     }
 
     load();
-  }, [setViewMode, config]);
+  }, [config, setViewMode]);
 
-  return <ViewMode.Provider value={{ viewMode, setViewMode }}>{children}</ViewMode.Provider>;
+  
+  return !currentViewMode ? null : (
+    <ViewMode.Provider value={{ currentViewMode, setViewMode }}>{children}</ViewMode.Provider>
+  );
 }
 
 export function useViewMode() {

web/src/routes/Cameras.jsx

@@ -88,9 +88,9 @@ function Camera({ name, config }) {
     [config, detectValue, sendDetect, recordValue, sendRecordings, snapshotValue, sendSnapshots]
   );
 
-  const { viewMode } = useViewMode();
+  const { currentViewMode } = useViewMode();
 
   return (
-    <Card buttons={buttons} href={href} header={cleanName} icons={viewMode >= ViewModeTypes["admin"] ? icons : []} media={<CameraImage camera={name} stretch />} />
+    <Card buttons={buttons} href={href} header={cleanName} icons={currentViewMode >= ViewModeTypes["admin"] ? icons : []} media={<CameraImage camera={name} stretch />} />
   );
 }