Client: Created general useSavedState function

client/src/pages/spools/list.tsx

@@ -20,7 +20,7 @@ import { ISpool } from "./model";
 import {
   TableState,
   useInitialTableState,
-  useShowArchive,
+  useSavedState,
   useStoreInitialState,
 } from "../../utils/saveload";
 import {
@@ -55,7 +55,10 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   const initialState = useInitialTableState("spoolList");
 
   // State for the switch to show archived spools
-  const [showArchived, setShowArchived] = useShowArchive("spoolList");
+  const [showArchived, setShowArchived] = useSavedState(
+    "spoolList-showArchived",
+    false
+  );
 
   // Fetch data from the API
   const {

client/src/utils/saveload.ts

@@ -60,17 +60,17 @@ export function useStoreInitialState(tableId: string, state: TableState) {
     }, [tableId, state.showColumns]);
 }
 
-export function useShowArchive(tableId: string) {
+export function useSavedState<T>(id: string, defaultValue: T) {
-    const [showArchive, setShowArchive] = React.useState(() => {
+    const [state, setState] = React.useState<T>(() => {
-        const savedShowArchive = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showArchive`) : null;
+        const savedState = isLocalStorageAvailable ? localStorage.getItem(`savedStates-${id}`) : null;
-        return savedShowArchive ? JSON.parse(savedShowArchive) : false;
+        return savedState ? JSON.parse(savedState) : defaultValue;
     });
 
     React.useEffect(() => {
         if (isLocalStorageAvailable) {
-            localStorage.setItem(`${tableId}-showArchive`, JSON.stringify(showArchive));
+            localStorage.setItem(`savedStates-${id}`, JSON.stringify(state));
         }
-    }, [tableId, showArchive]);
+    }, [id, state]);
 
-    return [showArchive, setShowArchive] as const;
+    return [state, setState] as const;
 }