feature: useStorage hook to persist data on frontend

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

@@ -0,0 +1,104 @@
+import { createContext, PropsWithChildren, useEffect, useState } from 'react';
+
+// Define the StorageContextData interface.
+export interface StorageContextData<T> {
+  item: Record<string, T>;
+  setItem: (key: string, value: T) => Promise<boolean>;
+  removeItem: (key: string) => Promise<boolean>;
+  clear: () => Promise<boolean>;
+}
+
+// Define the StorageService interface.
+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>;
+}
+
+// Define the LocalStorageService class implementing the StorageService interface.
+export class LocalStorageService implements StorageService {
+  async getItem<T>(key: string): Promise<T | undefined> {
+    const found = localStorage.getItem(key);
+    if (!found) return undefined;
+    return JSON.parse(found) as T;
+  }
+
+  async setItem<T>(key: string, value: T): Promise<boolean> {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  }
+
+  async removeItem(key: string): Promise<boolean> {
+    localStorage.removeItem(key);
+    return true;
+  }
+
+  async clear(): Promise<boolean> {
+    localStorage.clear();
+    return true;
+  }
+}
+
+// Define a global constant for the key.
+const STORAGE_KEY = 'new_key';
+
+// Create the StorageContext with default functions for getItem and setItem.
+const StorageContext = createContext<StorageContextData<unknown> | undefined>(undefined);
+
+// Define the StorageProvider component.
+export function StorageProvider<T>({ children, storageService }: PropsWithChildren<{ storageService: StorageService }>) {
+  const [storedValue, setStoredValue] = useState<Record<string, T>>({});
+
+  // Initialize 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(() => {
+    storageService.setItem(STORAGE_KEY, storedValue); 
+  }, [storageService, storedValue]);
+
+  // Remove the item from local storage and set the stored value to undefined
+  const clearItem = async (key: string): Promise<boolean> => {
+    localStorage.removeItem(key);
+    setStoredValue((prevState) => {
+      const newState = { ...prevState };
+      delete newState[key];
+      return newState;
+    });
+    return true;
+  };
+
+  // Define the context value.
+  const contextValue: StorageContextData<T> = {
+    item: storedValue,
+    setItem: async (key, value) => {
+      setStoredValue((prevState) => ({
+        ...prevState,
+        [key]: value,
+      }));
+      return true;
+    },
+    removeItem: async (key) => clearItem(key),
+    clear: async () => {
+      setStoredValue({});
+      return true;
+    },
+  };
+
+  return (
+    <StorageContext.Provider value={contextValue}>
+      {children}
+    </StorageContext.Provider>
+  );
+}
+
+export default StorageContext;

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

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

power-pay-frontend/src/main.tsx

@@ -1,11 +1,16 @@
 
 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>,
-)
+)