feat: Improved data sharing between different windows

- Improved useStorage hook
- Reload data on chrome store change
- Use settings provider to share settings
- Moved IntlProvider

Author: CrawlerCode

src/hooks/useSettings.ts

@@ -1,41 +1,18 @@
 import deepmerge from "deepmerge";
-import { loadRedmineConfig } from "../api/axios.config";
-import useStorage, { getChromeStorage } from "./useStorage";
-
-export type Settings = {
-  language: string;
-  redmineURL: string;
-  redmineApiKey: string;
-  options: {
-    autoPauseOnSwitch: boolean;
-    extendedSearch: boolean;
-    roundTimeNearestQuarterHour: boolean;
-  };
-};
-
-const defaultSettings = {
-  language: "browser",
-  redmineURL: "",
-  redmineApiKey: "",
-  options: {
-    autoPauseOnSwitch: true,
-    extendedSearch: true,
-    roundTimeNearestQuarterHour: false,
-  },
-};
+import { useContext } from "react";
+import { Settings, SettingsContext, defaultSettings } from "../provider/SettingsProvider";
+import { getChromeStorage } from "./useStorage";
 
+/**
+ * Use settings context
+ */
 const useSettings = () => {
-  const { data, setData } = useStorage<Settings>("settings", defaultSettings);
-
-  return {
-    settings: deepmerge<Settings>(defaultSettings, data),
-    setSettings: (data: Settings) => {
-      setData(data);
-      loadRedmineConfig();
-    },
-  };
+  return useContext(SettingsContext);
 };
 
+/**
+ * Get the settings from storage
+ */
 export const getSettings = async () => {
   const data = await getChromeStorage<Settings>("settings", defaultSettings);
   return deepmerge<Settings>(defaultSettings, data);

src/hooks/useStorage.ts

@@ -4,34 +4,38 @@ const useStorage = <T>(name: string, defaultValue: T) => {
   const [localData, setLocalData] = useState(defaultValue);
 
   // load data from storage
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const data = await getChromeStorage(name, defaultValue);
-        setLocalData(data);
-        // eslint-disable-next-line no-empty
-      } catch (error) {}
-    };
+  const loadData = async () => {
+    try {
+      const data = await getChromeStorage(name, defaultValue);
+      setLocalData(data);
+      // eslint-disable-next-line no-empty
+    } catch (error) {}
+  };
+
+  // set data to storage
+  const setData = async (data: T) => {
+    setLocalData(data);
+    await setChromeStorage(name, data);
+  };
 
-    // init load
+  /**
+   * Init load
+   */
+  useEffect(() => {
     loadData();
+  }, []);
 
-    // load on custom event "local-storage"
-    window.addEventListener("local-storage", loadData);
-    return () => {
-      window.removeEventListener("local-storage", loadData);
+  /**
+   * On chrome storage change => load data
+   */
+  useEffect(() => {
+    const onChange = () => {
+      loadData();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    chrome.storage.local.onChanged.addListener(onChange);
+    return () => chrome.storage.local.onChanged.removeListener(onChange);
   }, []);
 
-  // set data to storage
-  const setData = (data: T) => {
-    setLocalData(data);
-    setChromeStorage(name, data);
-    // fire custom event "local-storage"
-    window.dispatchEvent(new Event("local-storage"));
-  };
-
   return { data: localData, setData };
 };
 
@@ -47,8 +51,8 @@ export const getChromeStorage = <T>(name: string, defaultValue: T) => {
   });
 };
 
-export const setChromeStorage = <T>(name: string, data: T) => {
-  chrome.storage.local.set({ [name]: JSON.stringify(data) });
+export const setChromeStorage = async <T>(name: string, data: T) => {
+  await chrome.storage.local.set({ [name]: JSON.stringify(data) });
 };
 
 export default useStorage;

src/main.tsx

@@ -4,8 +4,9 @@ import ReactDOM from "react-dom/client";
 import { HashRouter } from "react-router-dom";
 import "react-tooltip/dist/react-tooltip.css";
 import App from "./App.tsx";
-import IntlProvider from "./IntlProvider.tsx";
 import "./index.css";
+import IntlProvider from "./provider/IntlProvider.tsx";
+import SettingsProvider from "./provider/SettingsProvider.tsx";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -19,9 +20,11 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <HashRouter>
       <QueryClientProvider client={queryClient}>
-        <IntlProvider>
-          <App />
-        </IntlProvider>
+        <SettingsProvider>
+          <IntlProvider>
+            <App />
+          </IntlProvider>
+        </SettingsProvider>
       </QueryClientProvider>
     </HashRouter>
   </React.StrictMode>

src/pages/SettingsPage.tsx

@@ -5,15 +5,16 @@ import { Field, Form, Formik, FormikProps } from "formik";
 import { useEffect, useRef, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as Yup from "yup";
-import { LANGUAGES } from "../IntlProvider";
 import Button from "../components/general/Button";
 import CheckBox from "../components/general/CheckBox";
 import Indicator from "../components/general/Indicator";
 import InputField from "../components/general/InputField";
 import SelectField from "../components/general/SelectField";
 import Toast from "../components/general/Toast";
 import useMyAccount from "../hooks/useMyAccount";
-import useSettings, { Settings } from "../hooks/useSettings";
+import useSettings from "../hooks/useSettings";
+import { LANGUAGES } from "../provider/IntlProvider";
+import { Settings } from "../provider/SettingsProvider";
 
 const SettingsPage = () => {
   const queryClient = useQueryClient();

src/IntlProvider.tsx src/provider/IntlProvider.tsxsrc/IntlProvider.tsx renamed to src/provider/IntlProvider.tsx

@@ -2,9 +2,9 @@ import { setDefaultOptions } from "date-fns";
 import { de as dateFnsLocalDE, enUS as dateFnsLocalEN } from "date-fns/locale";
 import React from "react";
 import { IntlProvider as ReactIntlProvider } from "react-intl";
-import useSettings from "./hooks/useSettings";
-import messagesDE from "./lang/de.json";
-import messagesEN from "./lang/en.json";
+import useSettings from "../hooks/useSettings";
+import messagesDE from "../lang/de.json";
+import messagesEN from "../lang/en.json";
 
 type Language = "de" | "en";
 // eslint-disable-next-line react-refresh/only-export-components

src/provider/SettingsProvider.tsx

@@ -0,0 +1,53 @@
+import deepmerge from "deepmerge";
+import { ReactNode, createContext } from "react";
+import { loadRedmineConfig } from "../api/axios.config";
+import useStorage from "../hooks/useStorage";
+
+export type Settings = {
+  language: string;
+  redmineURL: string;
+  redmineApiKey: string;
+  options: {
+    autoPauseOnSwitch: boolean;
+    extendedSearch: boolean;
+    roundTimeNearestQuarterHour: boolean;
+  };
+};
+
+export const defaultSettings = {
+  language: "browser",
+  redmineURL: "",
+  redmineApiKey: "",
+  options: {
+    autoPauseOnSwitch: true,
+    extendedSearch: true,
+    roundTimeNearestQuarterHour: false,
+  },
+};
+
+const SettingsContext = createContext({
+  settings: defaultSettings,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setSettings: (data: Settings) => undefined,
+});
+
+const SettingsProvider = ({ children }: { children: ReactNode }) => {
+  const { data, setData } = useStorage<Settings>("settings", defaultSettings);
+
+  return (
+    <SettingsContext.Provider
+      value={{
+        settings: deepmerge<Settings>(defaultSettings, data),
+        setSettings: (data: Settings) => {
+          setData(data);
+          loadRedmineConfig();
+        },
+      }}
+    >
+      {children}
+    </SettingsContext.Provider>
+  );
+};
+
+export { SettingsContext };
+export default SettingsProvider;