Function PreferencesProvider

app/components/PreferencesProvider.tsx:28–50

({
  children,
}: {
  children: ReactNode;
})

const savePreferences = (preferences: Preferences) => localStorage.setItem('preferences', JSON.stringify(preferences));

export function PreferencesProvider({
  children,
}: {
  children: ReactNode;
}) {
  const [preferences, setPreferences] = useState<Preferences>();

  useEffect(() => {
    const preferences = loadPreferences();
    setPreferences(preferences);
  }, []);

  useEffect(() => {
    if (preferences === undefined) return;
    savePreferences(preferences);
  }, [preferences]);

  return (
    <PreferencesContext.Provider value={[preferences, setPreferences]}>
      {children}
    </PreferencesContext.Provider>
  );
}

export function usePreferences() {
  const context = useContext(PreferencesContext);