add sync storage

src/modules/settings/hooks/usePersistSettings.ts

@@ -1,33 +1,37 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { SettingsValue } from "~/modules/settings/context/SettingsContext";
 import { useDefaultTheme } from "~/modules/theme/hooks/useDefaultTheme";
+import { BrowserSyncStorage } from "~/utils";
 import { defaultSettings } from "../context/SettingsContext";
 
-const getLocalStorageSettings = (defaultValue: SettingsValue) => {
-  try {
-    const raw = localStorage.getItem("settings");
-    const parsed = JSON.parse(raw ?? "");
-
-    return parsed ? { ...defaultValue, ...parsed } : defaultValue;
-  } catch (error) {
-    return defaultValue;
-  }
-};
+const storage = new BrowserSyncStorage('settings');
 
 export const usePersistSettings = () => {
+  const [hydrated, setHydrated] = useState(false);
+
   const defaultColors = useDefaultTheme();
 
-  const [settings, setSettings] = useState<SettingsValue>(
-    getLocalStorageSettings({ ...defaultSettings, ...defaultColors })
-  );
+  const [settings, setSettings] = useState({
+    ...defaultSettings, ...defaultColors
+  });
 
   const update = useCallback((val: Partial<SettingsValue>) => {
+    if (!hydrated) {
+      return;
+    }
+
     setSettings((v) => {
       const updatedValue = { ...v, ...val };
-      localStorage.setItem("settings", JSON.stringify(updatedValue));
+      storage.set("", updatedValue);
       return updatedValue;
     });
-  }, []);
+  }, [hydrated]);
 
-  return { settings, update };
+  useEffect(() => {
+    storage.get<SettingsValue>("").then(next => {
+      setSettings(prev => ({ ...prev, ...next }));
+    }).finally(() => setHydrated(true));
+  }, [])
+
+  return { settings, update, hydrated };
 };