feat: first draft

contexts/state/StateProvider.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { Alert, AlertDescription } from '@components/ui/alert';
+import { StateContext, StateContextType } from './StateContext';
+import { Loader2 } from 'lucide-react';
+import { useEffect, useReducer, useState } from 'react';
+import { useStorage } from '@utils/useStorage';
+import { stateReducer } from '@utils/stateReducer';
+import _ from 'lodash';
+import { initialState } from '@utils/validateState';
+
+export function StateProvider({ children }: { children: React.ReactNode }) {
+  const [state, dispatch] = useReducer(stateReducer, initialState);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const { loadState, saveState } = useStorage();
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const saved = await loadState();
+        if (saved) {
+          dispatch({ type: 'SET_STATE', payload: saved });
+        }
+      } catch (error) {
+        console.error('Failed to load initial state:', error);
+        setError('Failed to load saved data. Starting with empty state.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    init();
+  }, [loadState]);
+
+  useEffect(() => {
+    const debouncedSave = _.debounce(async () => {
+      try {
+        await saveState(state);
+      } catch (error) {
+        console.error('Failed to save state:', error);
+        setError('Failed to save changes.');
+      }
+    }, 1000);
+
+    if (!isLoading) {
+      debouncedSave();
+    }
+
+    return () => {
+      debouncedSave.cancel();
+    };
+  }, [saveState, state, isLoading]);
+
+  const resetState = () => {
+    dispatch({ type: 'RESET_STATE' });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    );
+  }
+
+  const contextValue: StateContextType = {
+    state,
+    dispatch,
+    isLoading,
+    error,
+    resetState,
+  };
+
+  return (
+    <StateContext.Provider value={contextValue}>
+      {error && (
+        <Alert variant="destructive" className="mb-4">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+      {children}
+    </StateContext.Provider>
+  );
+}