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,60 @@
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
+
+// Define the interface for the StorageContext that holds two methods: getItem and setItem.
+interface StorageContextData<T> {
+  getItem: (key: string) => T | undefined;
+  setItem: (key: string, value: T) => void;
+}
+
+// Create the StorageContext with default functions for getItem and setItem.
+const StorageContext = createContext<StorageContextData<unknown>>({
+  getItem: () => undefined,
+  setItem: () => {},
+});
+
+// StorageProvider: A React component that wraps the application and provides the storage context with getItem and setItem methods.
+export function StorageProvider<T>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
+  const [storedValue, setStoredValue] = useState<T | undefined>(initialValue);
+
+  // Initializes the state with the value from the local storage if it exists.
+  useEffect(() => {
+    const item = localStorage.getItem('key');
+    if (item) {
+      setStoredValue(JSON.parse(item));
+    }
+  }, []);
+
+  // Updates the local storage whenever the state changes.
+  useEffect(() => {
+    if (storedValue) {
+      localStorage.setItem('key', JSON.stringify(storedValue));
+    }
+  }, [storedValue]);
+
+  // Define the getItem method that retrieves the value from the local storage or returns undefined if it doesn't exist.
+  const getItem = (key: string) => {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : undefined;
+  };
+
+  // Define the setItem method that updates the local storage and the state with the new value.
+  const setItem = (key: string, value: T) => {
+    localStorage.setItem(key, JSON.stringify(value));
+    setStoredValue(value);
+  };
+
+  // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
+  const contextValue: StorageContextData<unknown> = { getItem, setItem } as StorageContextData<unknown>;
+
+  return (
+    <StorageContext.Provider value={contextValue}>
+      {children}
+    </StorageContext.Provider>
+  );
+}
+
+// useStorage: A custom hook that returns the getItem and setItem methods from the StorageContext.
+export function useStorage<T = string>() {
+  const { getItem, setItem } = useContext(StorageContext) as StorageContextData<T>;
+  return [getItem, setItem];
+}

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

@@ -0,0 +1,29 @@
+//useState and useEffect hooks from React
+import { useEffect, useState } from 'react';
+
+//UseStorageProps<T>: An interface defining the props for the useStorage hook
+interface UseStorageProps<T> {
+  key: string;
+  initialValue?: T;
+}
+
+//useStorage<T = string>: A generic function that accepts a UseStorageProps<T> object.
+
+export function useStorage<T = string>(props: UseStorageProps<T>): [T, React.Dispatch<React.SetStateAction<T>>] {
+
+  const { key, initialValue } = props;
+
+  //storedValue: A state variable that stores the value retrieved from the localStorage using the provided key
+
+  const [storedValue, setStoredValue] = useState<T>(() => {
+     const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : initialValue
+  });
+
+  //runs when the storedValue changes. It updates the localStorage
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(storedValue));
+  }, [key, storedValue]);
+
+  return [storedValue, setStoredValue];
+}

power-pay-frontend/src/main.tsx

@@ -1,10 +1,19 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { StorageProvider } from './hooks/StorageContext';
 import App from './App.tsx'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
+
 )
+const Root: React.FC = () => {
+  return (
+    <StorageProvider initialValue={0}>
+      <App />
+    </StorageProvider>
+  );
+};