fix(extension): Fix extension setting hook not firing on setting change. #10

1 files changed, 36 insertions, 9 deletions

diff --git a/apps/browser-extension/src/utils/settings.ts b/apps/browser-extension/src/utils/settings.ts
index 76ff0f61..6d51acde 100644
--- a/apps/browser-extension/src/utils/settings.ts
+++ b/apps/browser-extension/src/utils/settings.ts
@@ -1,4 +1,4 @@
-import { useChromeStorageSync } from "use-chrome-storage";
+import React from "react";
 
 export interface Settings {
   apiKey: string;
@@ -6,20 +6,47 @@ export interface Settings {
   address: string;
 }
 
+const STORAGE = chrome.storage.sync;
+
 export default function usePluginSettings() {
-  const [settings, setSettings, _1, _2, isInit] = useChromeStorageSync(
-    "settings",
-    {
-      apiKey: "",
-      address: "",
-    } as Settings,
-  );
+  const [settings, setSettingsInternal] = React.useState<Settings>({
+    apiKey: "",
+    address: "",
+  });
+
+  const [isInit, setIsInit] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!isInit) {
+      getPluginSettings().then((settings) => {
+        setSettingsInternal(settings);
+        setIsInit(true);
+      });
+    }
+    const onChange = (
+      changes: Record<string, chrome.storage.StorageChange>,
+    ) => {
+      if (changes.settings === undefined) {
+        return;
+      }
+      setSettingsInternal(changes.settings.newValue as Settings);
+    };
+    STORAGE.onChanged.addListener(onChange);
+    return () => {
+      STORAGE.onChanged.removeListener(onChange);
+    };
+  }, []);
+
+  const setSettings = async (s: (_: Settings) => Settings) => {
+    const newVal = s(settings);
+    await STORAGE.set({ settings: newVal });
+  };
 
   return { settings, setSettings, isPending: isInit };
 }
 
 export async function getPluginSettings() {
-  return (await chrome.storage.sync.get("settings")).settings as Settings;
+  return (await STORAGE.get("settings")).settings as Settings;
 }
 
 export function subscribeToSettingsChanges(