refractor: use local storage hook (#293)

* feat: resend login code on signing page after 30 seconds

* refractor: use local storage hook

* refractor: properly using new local storage hook on modules sidebar

apps/app/components/core/sidebar/sidebar-progress-stats.tsx

@@ -42,7 +42,7 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const [tab, setTab] = useLocalStorage("tab", "Assignees");
+  const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
@@ -58,7 +58,7 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
       : null
   );
 
-  const currentValue = (tab: string) => {
+  const currentValue = (tab: string | null) => {
     switch (tab) {
       case "Assignees":
         return 0;
@@ -66,6 +66,8 @@ export const SidebarProgressStats: React.FC<Props> = ({ groupedIssues, issues })
         return 1;
       case "States":
         return 2;
+      default:
+        return 0;
     }
   };
   return (

apps/app/hooks/use-local-storage.tsx

@@ -1,22 +1,43 @@
-import React, { useEffect, useState } from "react";
+import { useState, useEffect, useCallback } from "react";
 
-const getSavedValue = (key: any, value: any) => {
-  const savedValue = localStorage.getItem(key);
-  if (savedValue) {
-    return savedValue;
-  }
-  return value;
+const getValueFromLocalStorage = (key: string, defaultValue: any) => {
+  const value = window.localStorage.getItem(key);
+  return value ? JSON.parse(value) : defaultValue;
 };
 
-const useLocalStorage = (key: any, value: any) => {
-  const [updatedvalue, seUpdatedvalue] = useState(() => getSavedValue(key, value));
+const useLocalStorage = <T,>(key: string, initialValue: T) => {
+  const [storedValue, setStoredValue] = useState<T | null>(() =>
+    getValueFromLocalStorage(key, initialValue)
+  );
+
+  const setValue = useCallback(
+    (value: T) => {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      setStoredValue(value);
+      window.dispatchEvent(new Event(`local-storage:${key}`));
+    },
+    [key]
+  );
+
+  const clearValue = useCallback(() => {
+    window.localStorage.removeItem(key);
+    setStoredValue(null);
+    window.dispatchEvent(new Event(`local-storage:${key}`));
+  }, [key]);
+
+  const reHydrate = useCallback(() => {
+    const data = getValueFromLocalStorage(key, initialValue);
+    setStoredValue(data);
+  }, [key, initialValue]);
 
   useEffect(() => {
-    localStorage.setItem(key, updatedvalue);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [updatedvalue]);
+    window.addEventListener(`local-storage:${key}`, reHydrate);
+    return () => {
+      window.removeEventListener(`local-storage:${key}`, reHydrate);
+    };
+  }, [key, reHydrate]);
 
-  return [updatedvalue, seUpdatedvalue];
+  return { storedValue, setValue, clearValue } as const;
 };
 
 export default useLocalStorage;