87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
'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>
|
|
);
|
|
}
|