add persisted state hook

app/javascript/src/hooks/usePersistedState.ts

@@ -0,0 +1,58 @@
+import type { SetStateAction, Dispatch } from "react";
+import { useState, useEffect, useCallback } from "react";
+
+export const usePersistedState = <S>(
+  key: string,
+  initialValue: S,
+  ttl?: number
+): [S, Dispatch<SetStateAction<S>>] => {
+  type PersistedStatePaylaod = {
+    value: S;
+    expiry?: number;
+  };
+
+  const [state, setState] = useState<S>(() => {
+    try {
+      const localStorageRaw = localStorage.getItem(key);
+
+      if (localStorageRaw === null) return initialValue;
+
+      const payload: PersistedStatePaylaod = JSON.parse(localStorageRaw);
+
+      if (!payload.expiry) return payload.value;
+
+      const expired = new Date().getTime() > payload.expiry;
+
+      if (expired) return initialValue;
+
+      return payload.value;
+    } catch {
+      return initialValue;
+    }
+  });
+
+  const setLocalStorage = useCallback(
+    (value) => {
+      try {
+        const expiry = ttl ? new Date().getTime() + ttl : undefined;
+        const payload: PersistedStatePaylaod = { value, expiry };
+
+        localStorage.setItem(key, JSON.stringify(payload));
+      } catch {
+        localStorage.removeItem(key);
+      }
+    },
+    [key]
+  );
+
+  const setLocalStorageAndState: Dispatch<SetStateAction<S>> = (newState) => {
+    setLocalStorage(newState);
+    setState(newState);
+  };
+
+  useEffect(() => {
+    setLocalStorage(state);
+  }, [setLocalStorage, state]);
+
+  return [state, setLocalStorageAndState];
+};