feature: useStorage hook to persist data on frontend

power-pay-frontend/package.json

@@ -18,7 +18,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
+    "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
@@ -27,8 +27,12 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "gh-pages": "^6.1.1",
+
+    "typescript": "^5.4.2",
+
     "sass": "^1.71.1",
-    "typescript": "^5.2.2",
+
+
     "vite": "^5.1.4"
   }
 }

power-pay-frontend/src/hooks/StorageContext.tsx

@@ -0,0 +1,89 @@
+import { createContext, PropsWithChildren, useEffect, useState } from 'react';
+
+
+// Create the StorageContextData interface.
+interface StorageContextData<T> {
+  item: Record<string, T>;
+  setItem: (key: string, value: T) => Promise<boolean>; // adding a key into the map
+  removeItem: (key: string) => Promise<boolean>; // remove a key from the map
+  clear: () => Promise<boolean>; // clear the map
+}
+
+
+interface StorageService {
+  getItem: <T>(key: string) => Promise<T | undefined>;
+  setItem: <T>(key: string, value: T) => Promise<boolean>;
+  removeItem: (key: string) => Promise<boolean>;
+  clear: () => Promise<boolean>;
+}
+
+
+export class LocalStorageService implements StorageService {
+  removeItem!: (key: string) => Promise<boolean>;
+  clear!: () => Promise<boolean>;
+  async getItem<T>(key: string) {
+    const found = localStorage.getItem(key);
+    if (!found) return undefined;
+    return JSON.parse(found) as T;
+  }
+
+  async setItem<T>(key: string, value: T) {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  }
+
+}
+
+
+// Define a global constant for the key.
+const STORAGE_KEY = 'key';
+
+// Create the StorageContext with default functions for getItem and setItem.
+const StorageContext = createContext<StorageContextData<unknown> | undefined>(undefined);
+
+// StorageProvider: A React component that wraps the application and provides the storage context with getItem and setItem methods.
+export function StorageProvider<T>({ children, storageService }: PropsWithChildren<{ storageService: StorageService }>) {
+  const [storedValue, setStoredValue] = useState<Record<string, unknown>>({});
+
+  // Initializes the state with the value from the local storage if it exists.
+  useEffect(() => {
+    storageService
+      .getItem<Record<string, T>>(STORAGE_KEY)
+      .then((item) => {
+        if (item) {
+          setStoredValue(item);
+        }
+      });
+  }, [storageService]);
+
+  // Updates the local storage whenever the state changes.
+  useEffect(() => {
+    if (storedValue !== undefined) {
+      storageService.setItem(STORAGE_KEY, storedValue);
+    }
+  }, [storageService, storedValue]);
+
+  // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
+  const contextValue: StorageContextData<unknown> = {
+    item: storedValue,
+    setItem: async (key, value) => {
+      setStoredValue(pre => ({
+        ...pre, [key]: value
+      }))
+      return true;
+    },
+
+
+    removeItem: (key) => storageService.removeItem(key),
+
+    clear: () => storageService.clear(),
+  };
+
+  return (
+    <StorageContext.Provider value={contextValue}>
+      {children}
+    </StorageContext.Provider>
+  );
+}
+
+export default StorageContext;

power-pay-frontend/src/hooks/useStorage.ts

@@ -0,0 +1,35 @@
+
+import { useContext, useEffect, useState } from 'react';
+import StorageContext, { StorageContextData } from './StorageContext';
+
+interface UseStorageProps<T> {
+  key: string; 
+  initialValue?: T | undefined;
+}
+
+// useStorage<T = string>: A generic function that accepts a UseStorageProps<T> object.
+export function useStorage<T = string>({ key, initialValue }: UseStorageProps<T>): [T, React.Dispatch<React.SetStateAction<T>>, () => void] {
+  const { item, setItem, removeItem } = useContext(StorageContext) as StorageContextData<T>;
+
+  // Initialize the state variable with the initial value or the value from the local storage
+  const [storedValue, setStoredValue] = useState<T | undefined>(() => {
+    return item[key] ?? initialValue;
+  });
+
+  // Another useEffect for updating the stored value when the context changes
+  useEffect(() => {
+    setStoredValue(item[key] ?? initialValue);
+  }, [item, key, initialValue]);
+
+  useEffect(() => {
+    setItem(key, storedValue!);
+  }, [key, storedValue, setItem]);
+
+  // Remove the item from local storage and set the stored value to undefined
+  const clearItem = () => {
+    removeItem(key);
+    setStoredValue(undefined)
+  };
+
+  return [storedValue!, setItem, clearItem];
+}

power-pay-frontend/src/main.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { LocalStorageService, StorageProvider } from './hooks/StorageContext';
 import App from './App.tsx'
 import './index.css'
 
+const storageService = new LocalStorageService();
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+      <StorageProvider storageService={storageService}>
+          <App />
+      </StorageProvider>
   </React.StrictMode>,
-)
+)