From 1920a3449210db84ea21b7968247b74b392a17fd Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Thu, 7 Mar 2024 18:18:12 +0100
Subject: [PATCH 01/34] feat: added useStorage hook to persist data on frontend

---
 .../src/components/useStorage.js              | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 power-pay-frontend/src/components/useStorage.js

diff --git a/power-pay-frontend/src/components/useStorage.js b/power-pay-frontend/src/components/useStorage.js
new file mode 100644
index 00000000..6ebad52c
--- /dev/null
+++ b/power-pay-frontend/src/components/useStorage.js
@@ -0,0 +1,34 @@
+//importing the useState and useEffect hooks from React.
+
+import { useEffect, useState } from 'react';
+
+
+//initializing the state with the value retrieved from the localStorage using the provided key
+
+const useStorage = (key) => {
+
+
+  const [value, setValue] = useState(localStorage.getItem(key));
+
+//useEffect hook to update the localStorage whenever the value changes
+
+  useEffect(() => {
+
+
+    localStorage.setItem(key, value);
+  }, [key, value]);
+
+//returns a setter function called setStoredValue that updates the state and, consequently, the localStorage
+
+  const setStoredValue = (newValue) => {
+    setValue(newValue);
+
+  };
+
+
+  return [value, setStoredValue];
+};
+
+
+
+export default useStorage;
\ No newline at end of file

From 7e7ea0f2ca840c750b68d9e93db95d453bfacd27 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Fri, 8 Mar 2024 11:22:58 +0100
Subject: [PATCH 02/34] fix: reimplement useStorage hook in typescrpt

---
 power-pay-frontend/src/hooks/useStorage.ts | 29 ++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 power-pay-frontend/src/hooks/useStorage.ts

diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
new file mode 100644
index 00000000..1a5863c4
--- /dev/null
+++ b/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];
+}
\ No newline at end of file

From 370d3bb7838460a808d3ae4eb0e963a436d2f319 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Fri, 8 Mar 2024 11:25:20 +0100
Subject: [PATCH 03/34] #deleted:   
 power-pay-frontend/src/components/useStorage.js

---
 .../src/components/useStorage.js              | 34 -------------------
 1 file changed, 34 deletions(-)
 delete mode 100644 power-pay-frontend/src/components/useStorage.js

diff --git a/power-pay-frontend/src/components/useStorage.js b/power-pay-frontend/src/components/useStorage.js
deleted file mode 100644
index 6ebad52c..00000000
--- a/power-pay-frontend/src/components/useStorage.js
+++ /dev/null
@@ -1,34 +0,0 @@
-//importing the useState and useEffect hooks from React.
-
-import { useEffect, useState } from 'react';
-
-
-//initializing the state with the value retrieved from the localStorage using the provided key
-
-const useStorage = (key) => {
-
-
-  const [value, setValue] = useState(localStorage.getItem(key));
-
-//useEffect hook to update the localStorage whenever the value changes
-
-  useEffect(() => {
-
-
-    localStorage.setItem(key, value);
-  }, [key, value]);
-
-//returns a setter function called setStoredValue that updates the state and, consequently, the localStorage
-
-  const setStoredValue = (newValue) => {
-    setValue(newValue);
-
-  };
-
-
-  return [value, setStoredValue];
-};
-
-
-
-export default useStorage;
\ No newline at end of file

From af59378f98352a1fe54a429bbe9c9afe80ae2eca Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Fri, 8 Mar 2024 17:09:46 +0100
Subject: [PATCH 04/34] feat: Add global context for interacting with
 localStorage and fix implement useStorage hook

---
 .../src/hooks/StorageContext.ts               | 87 +++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 power-pay-frontend/src/hooks/StorageContext.ts

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
new file mode 100644
index 00000000..8663a9cc
--- /dev/null
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -0,0 +1,87 @@
+import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
+
+// StorageContextData<T>: An interfac defining the shape of the storage context data, which includes two functions: getItem and setItem
+interface StorageContextData<T> {
+  getItem: (key: string) => T | undefined;
+  setItem: (key: string, value: T) => void;
+}
+
+// StorageProviderProps<T>: An interface defining the props for the StorageProvider component, which includes the initialValue prop and the children to be rendered
+interface StorageProviderProps<T> extends PropsWithChildren {
+  initialValue?: T;
+}
+
+// Create a context for storing and accessing items in localStorage
+const StorageContext = createContext<StorageContextData<unknown>>({
+  getItem: () => undefined,
+  setItem: () => {},
+});
+
+// StorageProvider<T>: A functional component that uses the StorageContext to provide the storage-related functionality
+export function StorageProvider<T>({ initialValue, children }: StorageProviderProps<T>) {
+  // Initialize the state variable storedValue with the initialValue prop, if provided, using useState hook
+  const [storedValue, setStoredValue] = useState<T>(initialValue);
+
+  // Initialize the state with the value from the localStorage if it exists, using useEffect hook
+  useEffect(() => {
+    const item = localStorage.getItem('key');
+    if (item) {
+      try {
+        // If the item exists, parse the JSON string and update the state with the parsed value
+        setStoredValue(JSON.parse(item));
+      } catch (error) {
+        console.error("Error parsing stored value:", error);
+      }
+    }
+  }, []);
+
+  // Update the localStorage whenever the state changes, using useEffect hook
+  useEffect(() => {
+    try {
+      // If the storedValue changes, stringify the value and update the localStorage
+      localStorage.setItem('key', JSON.stringify(storedValue));
+    } catch (error) {
+      console.error("Error setting stored value:", error);
+    }
+  }, [storedValue]);
+
+  // getItem: A function that retrieves an item from the localStorage by key, using the getItem method from the StorageContext
+  const getItem = (key: string) => {
+    const item = localStorage.getItem(key);
+    if (item) {
+      try {
+        // If the item exists, parse the JSON string and return the value
+        return JSON.parse(item);
+      } catch (error) {
+        console.error("Error parsing item:", error);
+      }
+    }
+    return undefined;
+  };
+
+  // setItem: A function that saves an item to the localStorage by key, using the setItem method from the StorageContext
+  const setItem = (key: string, value: T) => {
+    try {
+      // If the value changes, stringify the value and update the localStorage
+      localStorage.setItem(key, JSON.stringify(value));
+      // Update the state with the new value
+      setStoredValue(value);
+    } catch (error) {
+      console.error("Error setting item:", error);
+    }
+  };
+
+  // Provide the getItem and setItem functions to the child components through the StorageContext
+  return (
+    <StorageContext.Provider value={{ getItem, setItem }}>
+      {children}
+    </StorageContext.Provider>
+  );
+}
+
+// useStorage<T = string>: A custom React hook that accepts a UseStorageProps<T> object and returns the getItem and setItem functions
+export function useStorage<T = string>() {
+  const { getItem, setItem } = useContext(StorageContext);
+  // Cast the getItem and setItem functions to the correct types
+  return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
+}
\ No newline at end of file

From f1738d540c128fc8db0238fabdd8c0676552270e Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 12:38:11 +0100
Subject: [PATCH 05/34] fix: Add global context for interacting with
 localStorage and fix implement useStorage hook

---
 .../src/hooks/StorageContext.ts               | 124 +++++++-----------
 power-pay-frontend/src/hooks/useStorage.ts    |   4 +-
 power-pay-frontend/src/main.tsx               |   9 ++
 3 files changed, 60 insertions(+), 77 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
index 8663a9cc..8f5619ad 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -1,87 +1,61 @@
 import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-// StorageContextData<T>: An interfac defining the shape of the storage context data, which includes two functions: getItem and setItem
+// StorageContextData<T>: An interface for the StorageContext that holds two methods: getItem and setItem.
+// The getItem method returns the value associated with the given key if it exists in the local storage, otherwise returns undefined.
+// The setItem method sets the value in the local storage for the given key and updates the state with the new value.
 interface StorageContextData<T> {
-  getItem: (key: string) => T | undefined;
-  setItem: (key: string, value: T) => void;
+ getItem: <T>(key: string) => T | undefined;
+ setItem: <T>(key: string, value: T) => void;
 }
 
-// StorageProviderProps<T>: An interface defining the props for the StorageProvider component, which includes the initialValue prop and the children to be rendered
-interface StorageProviderProps<T> extends PropsWithChildren {
-  initialValue?: T;
-}
-
-// Create a context for storing and accessing items in localStorage
+// Initialize the StorageContext with default functions for getItem and setItem.
 const StorageContext = createContext<StorageContextData<unknown>>({
-  getItem: () => undefined,
-  setItem: () => {},
+ getItem: () => undefined,
+ setItem: () => {},
 });
 
-// StorageProvider<T>: A functional component that uses the StorageContext to provide the storage-related functionality
-export function StorageProvider<T>({ initialValue, children }: StorageProviderProps<T>) {
-  // Initialize the state variable storedValue with the initialValue prop, if provided, using useState hook
-  const [storedValue, setStoredValue] = useState<T>(initialValue);
-
-  // Initialize the state with the value from the localStorage if it exists, using useEffect hook
-  useEffect(() => {
-    const item = localStorage.getItem('key');
-    if (item) {
-      try {
-        // If the item exists, parse the JSON string and update the state with the parsed value
-        setStoredValue(JSON.parse(item));
-      } catch (error) {
-        console.error("Error parsing stored value:", error);
-      }
-    }
-  }, []);
-
-  // Update the localStorage whenever the state changes, using useEffect hook
-  useEffect(() => {
-    try {
-      // If the storedValue changes, stringify the value and update the localStorage
-      localStorage.setItem('key', JSON.stringify(storedValue));
-    } catch (error) {
-      console.error("Error setting stored value:", error);
-    }
-  }, [storedValue]);
-
-  // getItem: A function that retrieves an item from the localStorage by key, using the getItem method from the StorageContext
-  const getItem = (key: string) => {
-    const item = localStorage.getItem(key);
-    if (item) {
-      try {
-        // If the item exists, parse the JSON string and return the value
-        return JSON.parse(item);
-      } catch (error) {
-        console.error("Error parsing item:", error);
-      }
-    }
-    return undefined;
-  };
-
-  // setItem: A function that saves an item to the localStorage by key, using the setItem method from the StorageContext
-  const setItem = (key: string, value: T) => {
-    try {
-      // If the value changes, stringify the value and update the localStorage
-      localStorage.setItem(key, JSON.stringify(value));
-      // Update the state with the new value
-      setStoredValue(value);
-    } catch (error) {
-      console.error("Error setting item:", error);
-    }
-  };
-
-  // Provide the getItem and setItem functions to the child components through the StorageContext
-  return (
-    <StorageContext.Provider value={{ getItem, setItem }}>
-      {children}
-    </StorageContext.Provider>
-  );
+// StorageProvider<T>: A React component that wraps the application and provides the storage context with getItem and setItem methods.
+// It initializes the state with the initialValue prop or a default value of undefined.
+// It initializes the state with the value from the local storage if it exists.
+
+export function StorageProvider<T>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
+ const [storedValue, setStoredValue] = useState<T>(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(() => {
+   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 = <T>(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 = <T>(key: string, value: T) => {
+   localStorage.setItem(key, JSON.stringify(value));
+   setStoredValue(value);
+ };
+
+ return (
+   <StorageContext.Provider value={{ getItem, setItem }}>
+     {children}
+   </StorageContext.Provider>
+ );
 }
 
-// useStorage<T = string>: A custom React hook that accepts a UseStorageProps<T> object and returns the getItem and setItem functions
+// useStorage<T = string>(): A custom hook that returns the getItem and setItem methods from the StorageContext.
 export function useStorage<T = string>() {
-  const { getItem, setItem } = useContext(StorageContext);
-  // Cast the getItem and setItem functions to the correct types
-  return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
+ const { getItem, setItem } = useContext(StorageContext);
+ // Cast the getItem and setItem methods to the correct types.
+ return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
 }
\ No newline at end of file
diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
index 1a5863c4..fad3d135 100644
--- a/power-pay-frontend/src/hooks/useStorage.ts
+++ b/power-pay-frontend/src/hooks/useStorage.ts
@@ -16,8 +16,8 @@ export function useStorage<T = string>(props: UseStorageProps<T>): [T, React.Dis
   //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;
+     const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : initialValue
   });
 
   //runs when the storedValue changes. It updates the localStorage
diff --git a/power-pay-frontend/src/main.tsx b/power-pay-frontend/src/main.tsx
index 3d7150da..c583ebf5 100644
--- a/power-pay-frontend/src/main.tsx
+++ b/power-pay-frontend/src/main.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import { StorageProvider } from './hooks/StorageContext';
 import App from './App.tsx'
 import './index.css'
 
@@ -7,4 +8,12 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
+  
 )
+const Root: React.FC = () => {
+  return (
+    <StorageProvider initialValue={0}>
+      <App />
+    </StorageProvider>
+  );
+};

From 7b7f93340f980c2aa0d9bfea40511969a13556d1 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 13:01:07 +0100
Subject: [PATCH 06/34] fix: updated storagecontext

---
 power-pay-frontend/src/hooks/StorageContext.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
index 8f5619ad..64522250 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -1,6 +1,5 @@
 import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-// StorageContextData<T>: An interface for the StorageContext that holds two methods: getItem and setItem.
 // The getItem method returns the value associated with the given key if it exists in the local storage, otherwise returns undefined.
 // The setItem method sets the value in the local storage for the given key and updates the state with the new value.
 interface StorageContextData<T> {
@@ -15,7 +14,6 @@ const StorageContext = createContext<StorageContextData<unknown>>({
 });
 
 // StorageProvider<T>: A React component that wraps the application and provides the storage context with getItem and setItem methods.
-// It initializes the state with the initialValue prop or a default value of undefined.
 // It initializes the state with the value from the local storage if it exists.
 
 export function StorageProvider<T>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {

From c04d849ee3b0e18e4062ffb209065abb281a9ae0 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 13:05:51 +0100
Subject: [PATCH 07/34] fix: updated storagecontext

---
 .../src/hooks/StorageContext.ts               | 122 +++++++++++-------
 1 file changed, 75 insertions(+), 47 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
index 64522250..174702a8 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -1,59 +1,87 @@
 import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-// The getItem method returns the value associated with the given key if it exists in the local storage, otherwise returns undefined.
-// The setItem method sets the value in the local storage for the given key and updates the state with the new value.
+// StorageContextData<T>: An interface defining the shape of the storage context data, which includes two functions: getItem and setItem
 interface StorageContextData<T> {
- getItem: <T>(key: string) => T | undefined;
- setItem: <T>(key: string, value: T) => void;
+  getItem: (key: string) => T | undefined;
+  setItem: (key: string, value: T) => void;
 }
 
-// Initialize the StorageContext with default functions for getItem and setItem.
+// StorageProviderProps<T>: An interface defining the props for the StorageProvider component, which includes the initialValue prop and the children to be rendered
+interface StorageProviderProps<T> extends PropsWithChildren {
+  initialValue?: T;
+}
+
+// Create a context for storing and accessing items in localStorage
 const StorageContext = createContext<StorageContextData<unknown>>({
- getItem: () => undefined,
- setItem: () => {},
+  getItem: () => undefined,
+  setItem: () => {},
 });
 
-// StorageProvider<T>: A React component that wraps the application and provides the storage context with getItem and setItem methods.
-// It initializes the state with the value from the local storage if it exists.
-
-export function StorageProvider<T>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
- const [storedValue, setStoredValue] = useState<T>(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(() => {
-   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 = <T>(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 = <T>(key: string, value: T) => {
-   localStorage.setItem(key, JSON.stringify(value));
-   setStoredValue(value);
- };
-
- return (
-   <StorageContext.Provider value={{ getItem, setItem }}>
-     {children}
-   </StorageContext.Provider>
- );
+// StorageProvider<T>: A functional component that uses the StorageContext to provide the storage-related functionality
+export function StorageProvider<T>({ initialValue, children }: StorageProviderProps<T>) {
+  // Initialize the state variable storedValue with the initialValue prop, if provided, using useState hook
+  const [storedValue, setStoredValue] = useState<T>(initialValue);
+
+  // Initialize the state with the value from the localStorage if it exists, using useEffect hook
+  useEffect(() => {
+    const item = localStorage.getItem('key');
+    if (item) {
+      try {
+        // If the item exists, parse the JSON string and update the state with the parsed value
+        setStoredValue(JSON.parse(item));
+      } catch (error) {
+        console.error("Error parsing stored value:", error);
+      }
+    }
+  }, []);
+
+  // Update the localStorage whenever the state changes, using useEffect hook
+  useEffect(() => {
+    try {
+      // If the storedValue changes, stringify the value and update the localStorage
+      localStorage.setItem('key', JSON.stringify(storedValue));
+    } catch (error) {
+      console.error("Error setting stored value:", error);
+    }
+  }, [storedValue]);
+
+  // getItem: A function that retrieves an item from the localStorage by key, using the getItem method from the StorageContext
+  const getItem = (key: string) => {
+    const item = localStorage.getItem(key);
+    if (item) {
+      try {
+        // If the item exists, parse the JSON string and return the value
+        return JSON.parse(item);
+      } catch (error) {
+        console.error("Error parsing item:", error);
+      }
+    }
+    return undefined;
+  };
+
+  // setItem: A function that saves an item to the localStorage by key, using the setItem method from the StorageContext
+  const setItem = (key: string, value: T) => {
+    try {
+      // If the value changes, stringify the value and update the localStorage
+      localStorage.setItem(key, JSON.stringify(value));
+      // Update the state with the new value
+      setStoredValue(value);
+    } catch (error) {
+      console.error("Error setting item:", error);
+    }
+  };
+
+  // Provide the getItem and setItem functions to the child components through the StorageContext
+  return (
+    <StorageContext.Provider value={{ getItem, setItem }}>
+      {children}
+    </StorageContext.Provider>
+  );
 }
 
-// useStorage<T = string>(): A custom hook that returns the getItem and setItem methods from the StorageContext.
+// useStorage<T = string>: A custom React hook that accepts a UseStorageProps<T> object and returns the getItem and setItem functions
 export function useStorage<T = string>() {
- const { getItem, setItem } = useContext(StorageContext);
- // Cast the getItem and setItem methods to the correct types.
- return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
+  const { getItem, setItem } = useContext(StorageContext);
+  // Cast the getItem and setItem functions to the correct types
+  return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
 }
\ No newline at end of file

From c8c5c731a06fdda3264907f46f154c728406628d Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 13:08:28 +0100
Subject: [PATCH 08/34] fix: updated storagecontext

---
 .../src/hooks/StorageContext.ts               | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
index 174702a8..d88a9130 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -1,33 +1,30 @@
 import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-// StorageContextData<T>: An interface defining the shape of the storage context data, which includes two functions: getItem and setItem
 interface StorageContextData<T> {
   getItem: (key: string) => T | undefined;
   setItem: (key: string, value: T) => void;
 }
 
-// StorageProviderProps<T>: An interface defining the props for the StorageProvider component, which includes the initialValue prop and the children to be rendered
 interface StorageProviderProps<T> extends PropsWithChildren {
   initialValue?: T;
 }
 
-// Create a context for storing and accessing items in localStorage
 const StorageContext = createContext<StorageContextData<unknown>>({
   getItem: () => undefined,
   setItem: () => {},
 });
 
-// StorageProvider<T>: A functional component that uses the StorageContext to provide the storage-related functionality
+//StorageProvider component is a wrapper component that uses the StorageContext to provide the storage-related functionality
+
 export function StorageProvider<T>({ initialValue, children }: StorageProviderProps<T>) {
-  // Initialize the state variable storedValue with the initialValue prop, if provided, using useState hook
   const [storedValue, setStoredValue] = useState<T>(initialValue);
 
-  // Initialize the state with the value from the localStorage if it exists, using useEffect hook
+  //useEffect hook  used to initialize the state with the value from the localStorage if it exists
+
   useEffect(() => {
     const item = localStorage.getItem('key');
     if (item) {
       try {
-        // If the item exists, parse the JSON string and update the state with the parsed value
         setStoredValue(JSON.parse(item));
       } catch (error) {
         console.error("Error parsing stored value:", error);
@@ -35,22 +32,21 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
   }, []);
 
-  // Update the localStorage whenever the state changes, using useEffect hook
+  //useEffect hook is used to update the localStorage whenever the state changes. It updates the localStorage with the current state value.
   useEffect(() => {
     try {
-      // If the storedValue changes, stringify the value and update the localStorage
       localStorage.setItem('key', JSON.stringify(storedValue));
     } catch (error) {
       console.error("Error setting stored value:", error);
     }
   }, [storedValue]);
 
-  // getItem: A function that retrieves an item from the localStorage by key, using the getItem method from the StorageContext
+  
+  //StorageProvider also provides two functions (getItem and setItem) via the StorageContext that can be used by its child components
   const getItem = (key: string) => {
     const item = localStorage.getItem(key);
     if (item) {
       try {
-        // If the item exists, parse the JSON string and return the value
         return JSON.parse(item);
       } catch (error) {
         console.error("Error parsing item:", error);
@@ -58,20 +54,16 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
     return undefined;
   };
-
-  // setItem: A function that saves an item to the localStorage by key, using the setItem method from the StorageContext
+   
   const setItem = (key: string, value: T) => {
     try {
-      // If the value changes, stringify the value and update the localStorage
       localStorage.setItem(key, JSON.stringify(value));
-      // Update the state with the new value
       setStoredValue(value);
     } catch (error) {
       console.error("Error setting item:", error);
     }
   };
 
-  // Provide the getItem and setItem functions to the child components through the StorageContext
   return (
     <StorageContext.Provider value={{ getItem, setItem }}>
       {children}
@@ -79,9 +71,7 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
   );
 }
 
-// useStorage<T = string>: A custom React hook that accepts a UseStorageProps<T> object and returns the getItem and setItem functions
 export function useStorage<T = string>() {
   const { getItem, setItem } = useContext(StorageContext);
-  // Cast the getItem and setItem functions to the correct types
-  return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
-}
\ No newline at end of file
+  return [getItem, setItem] as [StorageContextData<T>['getItem'], StorageContextData<T>['setItem']];
+}

From de3dd35a3aaee10396ee865191ee03ecb44470c9 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 13:12:12 +0100
Subject: [PATCH 09/34] fix: updated storagecontext

---
 power-pay-frontend/src/hooks/StorageContext.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
index d88a9130..ce8abf02 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -14,13 +14,9 @@ const StorageContext = createContext<StorageContextData<unknown>>({
   setItem: () => {},
 });
 
-//StorageProvider component is a wrapper component that uses the StorageContext to provide the storage-related functionality
-
 export function StorageProvider<T>({ initialValue, children }: StorageProviderProps<T>) {
   const [storedValue, setStoredValue] = useState<T>(initialValue);
 
-  //useEffect hook  used to initialize the state with the value from the localStorage if it exists
-
   useEffect(() => {
     const item = localStorage.getItem('key');
     if (item) {
@@ -32,7 +28,6 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
   }, []);
 
-  //useEffect hook is used to update the localStorage whenever the state changes. It updates the localStorage with the current state value.
   useEffect(() => {
     try {
       localStorage.setItem('key', JSON.stringify(storedValue));
@@ -41,8 +36,6 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
   }, [storedValue]);
 
-  
-  //StorageProvider also provides two functions (getItem and setItem) via the StorageContext that can be used by its child components
   const getItem = (key: string) => {
     const item = localStorage.getItem(key);
     if (item) {
@@ -54,7 +47,7 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
     return undefined;
   };
-   
+
   const setItem = (key: string, value: T) => {
     try {
       localStorage.setItem(key, JSON.stringify(value));
@@ -64,6 +57,7 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
   };
 
+  // Pass getItem and setItem individually as the value prop
   return (
     <StorageContext.Provider value={{ getItem, setItem }}>
       {children}

From 6ae1246a04700bcb30f48b6f8bc9e8b42fa62efb Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 13:35:23 +0100
Subject: [PATCH 10/34] fix:  updated login component

---
 power-pay-frontend/src/hooks/StorageContext.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
index ce8abf02..55a000e6 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -14,9 +14,13 @@ const StorageContext = createContext<StorageContextData<unknown>>({
   setItem: () => {},
 });
 
-export function StorageProvider<T>({ initialValue, children }: StorageProviderProps<T>) {
+//StorageProvider component is a wrapper component that uses the StorageContext to provide the storage-related functionality
+
+export function StorageProvider<T>({ initialValue }: StorageProviderProps<T>) {
   const [storedValue, setStoredValue] = useState<T>(initialValue);
 
+  //useEffect hook  used to initialize the state with the value from the localStorage if it exists
+
   useEffect(() => {
     const item = localStorage.getItem('key');
     if (item) {
@@ -28,6 +32,7 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
   }, []);
 
+  //useEffect hook is used to update the localStorage whenever the state changes. It updates the localStorage with the current state value.
   useEffect(() => {
     try {
       localStorage.setItem('key', JSON.stringify(storedValue));
@@ -36,6 +41,8 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
   }, [storedValue]);
 
+  
+  //StorageProvider also provides two functions (getItem and setItem) via the StorageContext that can be used by its child components
   const getItem = (key: string) => {
     const item = localStorage.getItem(key);
     if (item) {
@@ -47,7 +54,7 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
     return undefined;
   };
-
+   
   const setItem = (key: string, value: T) => {
     try {
       localStorage.setItem(key, JSON.stringify(value));
@@ -57,7 +64,6 @@ export function StorageProvider<T>({ initialValue, children }: StorageProviderPr
     }
   };
 
-  // Pass getItem and setItem individually as the value prop
   return (
     <StorageContext.Provider value={{ getItem, setItem }}>
       {children}

From 6e02da05635b02bbbf3973f4fc3aeb117993396c Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 13:57:01 +0100
Subject: [PATCH 11/34] fix: storagecontext

---
 .../src/hooks/StorageContext.ts               | 74 ++++++++-----------
 1 file changed, 31 insertions(+), 43 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
index 55a000e6..2d8ef920 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -1,69 +1,55 @@
 import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 
+// StorageContextData<T>: An interface for the StorageContext that holds two methods: getItem and setItem.
+// The getItem method returns the value associated with the given key if it exists in the local storage, otherwise returns undefined.
+// The setItem method sets the value in the local storage for the given key and updates the state with the new value.
 interface StorageContextData<T> {
-  getItem: (key: string) => T | undefined;
-  setItem: (key: string, value: T) => void;
-}
-
-interface StorageProviderProps<T> extends PropsWithChildren {
-  initialValue?: T;
+  getItem: <T>(key: string) => T | undefined;
+  setItem: <T>(key: string, value: T) => void;
 }
 
+// Initialize the StorageContext with default functions for getItem and setItem.
 const StorageContext = createContext<StorageContextData<unknown>>({
   getItem: () => undefined,
   setItem: () => {},
 });
 
-//StorageProvider component is a wrapper component that uses the StorageContext to provide the storage-related functionality
-
-export function StorageProvider<T>({ initialValue }: StorageProviderProps<T>) {
+// StorageProvider<T>: A React component that wraps the application and provides the storage context with getItem and setItem methods.
+// It initializes the state with the initialValue prop or a default value of undefined.
+// It initializes the state with the value from the local storage if it exists.
+// It updates the local storage whenever the state changes.
+// It exposes the getItem and setItem methods through the context.
+export function StorageProvider<T>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
   const [storedValue, setStoredValue] = useState<T>(initialValue);
 
-  //useEffect hook  used to initialize the state with the value from the localStorage if it exists
-
+  // Initializes the state with the value from the local storage if it exists.
   useEffect(() => {
     const item = localStorage.getItem('key');
     if (item) {
-      try {
-        setStoredValue(JSON.parse(item));
-      } catch (error) {
-        console.error("Error parsing stored value:", error);
-      }
+      setStoredValue(JSON.parse(item));
     }
   }, []);
 
-  //useEffect hook is used to update the localStorage whenever the state changes. It updates the localStorage with the current state value.
+  // Updates the local storage whenever the state changes.
   useEffect(() => {
-    try {
-      localStorage.setItem('key', JSON.stringify(storedValue));
-    } catch (error) {
-      console.error("Error setting stored value:", error);
-    }
+    localStorage.setItem('key', JSON.stringify(storedValue));
   }, [storedValue]);
 
-  
-  //StorageProvider also provides two functions (getItem and setItem) via the StorageContext that can be used by its child components
-  const getItem = (key: string) => {
+  // Define the getItem method that retrieves the value from the local storage or returns undefined if it doesn't exist.
+  const getItem = <T>(key: string) => {
     const item = localStorage.getItem(key);
-    if (item) {
-      try {
-        return JSON.parse(item);
-      } catch (error) {
-        console.error("Error parsing item:", error);
-      }
-    }
-    return undefined;
+    return item ? JSON.parse(item) : undefined;
   };
-   
-  const setItem = (key: string, value: T) => {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-      setStoredValue(value);
-    } catch (error) {
-      console.error("Error setting item:", error);
-    }
+
+  // Define the setItem method that updates the local storage and the state with the new value.
+  const setItem = <T>(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 { getItem, setItem } = { getItem, setItem };
+
   return (
     <StorageContext.Provider value={{ getItem, setItem }}>
       {children}
@@ -71,7 +57,9 @@ export function StorageProvider<T>({ initialValue }: StorageProviderProps<T>) {
   );
 }
 
+// useStorage<T = string>(): A custom hook that returns the getItem and setItem methods from the StorageContext.
 export function useStorage<T = string>() {
   const { getItem, setItem } = useContext(StorageContext);
-  return [getItem, setItem] as [StorageContextData<T>['getItem'], StorageContextData<T>['setItem']];
-}
+  // Cast the getItem and setItem methods to the correct types.
+  return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
+}
\ No newline at end of file

From 1a1782d7abc5af4ef04f70b6f6da7b3299d4f0d2 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 14:06:15 +0100
Subject: [PATCH 12/34] fix: modified storageContext

---
 .../src/hooks/StorageContext.ts               | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.ts
index 2d8ef920..aa94f6a2 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.ts
@@ -1,24 +1,18 @@
 import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-// StorageContextData<T>: An interface for the StorageContext that holds two methods: getItem and setItem.
-// The getItem method returns the value associated with the given key if it exists in the local storage, otherwise returns undefined.
-// The setItem method sets the value in the local storage for the given key and updates the state with the new value.
+// Define the interface for the StorageContext that holds two methods: getItem and setItem.
 interface StorageContextData<T> {
   getItem: <T>(key: string) => T | undefined;
   setItem: <T>(key: string, value: T) => void;
 }
 
-// Initialize the StorageContext with default functions for getItem and setItem.
+// Create the StorageContext with default functions for getItem and setItem.
 const StorageContext = createContext<StorageContextData<unknown>>({
   getItem: () => undefined,
   setItem: () => {},
 });
 
-// StorageProvider<T>: A React component that wraps the application and provides the storage context with getItem and setItem methods.
-// It initializes the state with the initialValue prop or a default value of undefined.
-// It initializes the state with the value from the local storage if it exists.
-// It updates the local storage whenever the state changes.
-// It exposes the getItem and setItem methods through the context.
+// 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>(initialValue);
 
@@ -48,18 +42,17 @@ export function StorageProvider<T>({ initialValue, children }: PropsWithChildren
   };
 
   // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-  const { getItem, setItem } = { getItem, setItem };
+  const contextValue = { getItem, setItem };
 
   return (
-    <StorageContext.Provider value={{ getItem, setItem }}>
+    <StorageContext.Provider value={contextValue}>
       {children}
     </StorageContext.Provider>
   );
 }
 
-// useStorage<T = string>(): A custom hook that returns the getItem and setItem methods from the StorageContext.
+// useStorage: A custom hook that returns the getItem and setItem methods from the StorageContext.
 export function useStorage<T = string>() {
   const { getItem, setItem } = useContext(StorageContext);
-  // Cast the getItem and setItem methods to the correct types.
   return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
 }
\ No newline at end of file

From 0e9a79536e797632b0fa842289ac62d135117d8e Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 14:24:42 +0100
Subject: [PATCH 13/34] fix: updated package.json with the corresponding
 dependecies

---
 power-pay-frontend/package-lock.json          | 16 +++++++--------
 power-pay-frontend/package.json               |  4 ++--
 .../{StorageContext.ts => StorageContext.tsx} | 20 ++++++++++---------
 3 files changed, 21 insertions(+), 19 deletions(-)
 rename power-pay-frontend/src/hooks/{StorageContext.ts => StorageContext.tsx} (76%)

diff --git a/power-pay-frontend/package-lock.json b/power-pay-frontend/package-lock.json
index 12fc9d87..4b64ec4c 100644
--- a/power-pay-frontend/package-lock.json
+++ b/power-pay-frontend/package-lock.json
@@ -12,7 +12,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",
@@ -21,7 +21,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.5",
         "gh-pages": "^6.1.1",
-        "typescript": "^5.2.2",
+        "typescript": "^5.4.2",
         "vite": "^5.1.4"
       }
     },
@@ -1220,9 +1220,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.61",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.61.tgz",
-      "integrity": "sha512-NURTN0qNnJa7O/k4XUkEW2yfygA+NxS0V5h1+kp9jPwhzZy95q3ADoGMP0+JypMhrZBTTgjKAUlTctde1zzeQA==",
+      "version": "18.2.64",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.64.tgz",
+      "integrity": "sha512-MlmPvHgjj2p3vZaxbQgFUQFvD8QiZwACfGqEdDSWou5yISWxDQ4/74nCAwsUiX7UFLKZz3BbVSPj+YxeoGGCfg==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -3421,9 +3421,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz",
+      "integrity": "sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/power-pay-frontend/package.json b/power-pay-frontend/package.json
index 736dc803..1890e65d 100644
--- a/power-pay-frontend/package.json
+++ b/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,7 +27,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "gh-pages": "^6.1.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.4.2",
     "vite": "^5.1.4"
   }
 }
diff --git a/power-pay-frontend/src/hooks/StorageContext.ts b/power-pay-frontend/src/hooks/StorageContext.tsx
similarity index 76%
rename from power-pay-frontend/src/hooks/StorageContext.ts
rename to power-pay-frontend/src/hooks/StorageContext.tsx
index aa94f6a2..beb34722 100644
--- a/power-pay-frontend/src/hooks/StorageContext.ts
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -2,8 +2,8 @@ import React, { createContext, PropsWithChildren, useContext, useEffect, useStat
 
 // Define the interface for the StorageContext that holds two methods: getItem and setItem.
 interface StorageContextData<T> {
-  getItem: <T>(key: string) => T | undefined;
-  setItem: <T>(key: string, value: T) => void;
+  getItem: (key: string) => T | undefined;
+  setItem: (key: string, value: T) => void;
 }
 
 // Create the StorageContext with default functions for getItem and setItem.
@@ -14,7 +14,7 @@ const StorageContext = createContext<StorageContextData<unknown>>({
 
 // 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>(initialValue);
+  const [storedValue, setStoredValue] = useState<T | undefined>(initialValue);
 
   // Initializes the state with the value from the local storage if it exists.
   useEffect(() => {
@@ -26,23 +26,25 @@ export function StorageProvider<T>({ initialValue, children }: PropsWithChildren
 
   // Updates the local storage whenever the state changes.
   useEffect(() => {
-    localStorage.setItem('key', JSON.stringify(storedValue));
+    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 = <T>(key: string) => {
+  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 = <T>(key: string, value: T) => {
+  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 = { getItem, setItem };
+  const contextValue: StorageContextData<T> = { getItem, setItem };
 
   return (
     <StorageContext.Provider value={contextValue}>
@@ -53,6 +55,6 @@ export function StorageProvider<T>({ initialValue, children }: PropsWithChildren
 
 // useStorage: A custom hook that returns the getItem and setItem methods from the StorageContext.
 export function useStorage<T = string>() {
-  const { getItem, setItem } = useContext(StorageContext);
-  return [getItem as StorageContextData<T>['getItem'], setItem as StorageContextData<T>['setItem']];
+  const { getItem, setItem } = useContext(StorageContext) as StorageContextData<T>;
+  return [getItem, setItem];
 }
\ No newline at end of file

From 4f189c2787f2aa241b36eca91902314ed4a0ea06 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 14:40:12 +0100
Subject: [PATCH 14/34] fix: use a type assertion to ensure compatibility
 between setItem in StorageContextData

---
 power-pay-frontend/src/hooks/StorageContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index beb34722..0763dfba 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -44,7 +44,7 @@ export function StorageProvider<T>({ initialValue, children }: PropsWithChildren
   };
 
   // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-  const contextValue: StorageContextData<T> = { getItem, setItem };
+  const contextValue: StorageContextData<unknown> = { getItem, setItem } as StorageContextData<unknown>;
 
   return (
     <StorageContext.Provider value={contextValue}>

From 2faa9bb3aa5abc3e1b8ae59f83cedfcba4c1225e Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 11 Mar 2024 15:00:37 +0100
Subject: [PATCH 15/34] fix: updated storageContext.tsx

---
 power-pay-frontend/src/hooks/StorageContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 0763dfba..7fdeb9e6 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
 
 // Define the interface for the StorageContext that holds two methods: getItem and setItem.
 interface StorageContextData<T> {

From 7974f916dcb9fa93481769e2dcebb80dc8a5872a Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Tue, 12 Mar 2024 14:54:30 +0100
Subject: [PATCH 16/34] updated main.tsx

---
 power-pay-frontend/src/main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/power-pay-frontend/src/main.tsx b/power-pay-frontend/src/main.tsx
index c583ebf5..f2cb156d 100644
--- a/power-pay-frontend/src/main.tsx
+++ b/power-pay-frontend/src/main.tsx
@@ -13,7 +13,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 const Root: React.FC = () => {
   return (
     <StorageProvider initialValue={0}>
-      <App />
+      <Root />
     </StorageProvider>
   );
 };

From 48933b57177a4d18241ac36997bf8cd84bb715a2 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Tue, 12 Mar 2024 15:35:24 +0100
Subject: [PATCH 17/34] fix: updated removeValue

---
 power-pay-frontend/src/hooks/useStorage.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
index fad3d135..3f39c21e 100644
--- a/power-pay-frontend/src/hooks/useStorage.ts
+++ b/power-pay-frontend/src/hooks/useStorage.ts
@@ -4,12 +4,12 @@ import { useEffect, useState } from 'react';
 //UseStorageProps<T>: An interface defining the props for the useStorage hook
 interface UseStorageProps<T> {
   key: string;
-  initialValue?: T;
+  initialValue?: T | undefined ;
 }
 
 //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>>] {
+export function useStorage<T = string>(props: UseStorageProps<T>): [T, React.Dispatch<React.SetStateAction<T>> , () => void] {
 
   const { key, initialValue } = props;
 
@@ -25,5 +25,12 @@ export function useStorage<T = string>(props: UseStorageProps<T>): [T, React.Dis
     localStorage.setItem(key, JSON.stringify(storedValue));
   }, [key, storedValue]);
 
-  return [storedValue, setStoredValue];
+  //adding a newfunction removeValue to remove the stored value from the localstorage and set it to its initial state
+
+  const removeValue = () => {
+    localStorage.removeItem(key);
+    setStoredValue(initialValue!);
+  };
+
+  return [storedValue, setStoredValue , removeValue];
 }
\ No newline at end of file

From 6cc7740db2227c864c59d73cfa7915a647124b13 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Tue, 12 Mar 2024 16:59:13 +0100
Subject: [PATCH 18/34] fix: updated usestorage.ts ->  hook does not interact
 with the storage

---
 power-pay-frontend/src/hooks/useStorage.ts | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
index 3f39c21e..98a02dd2 100644
--- a/power-pay-frontend/src/hooks/useStorage.ts
+++ b/power-pay-frontend/src/hooks/useStorage.ts
@@ -1,34 +1,25 @@
 //useState and useEffect hooks from React
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 //UseStorageProps<T>: An interface defining the props for the useStorage hook
 interface UseStorageProps<T> {
-  key: string;
-  initialValue?: T | undefined ;
+  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>> , () => void] {
 
-  const { key, initialValue } = props;
+  const { 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]);
+  const [storedValue, setStoredValue] = useState<T>(initialValue!);
+;
 
   //adding a newfunction removeValue to remove the stored value from the localstorage and set it to its initial state
 
   const removeValue = () => {
-    localStorage.removeItem(key);
     setStoredValue(initialValue!);
   };
 

From 562946a720002434c6c350aa0b457cc701e7a943 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Tue, 12 Mar 2024 17:45:45 +0100
Subject: [PATCH 19/34] fix: removed duplicate usestorage hook

---
 .../src/hooks/StorageContext.tsx              | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 7fdeb9e6..dc1879f9 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -1,4 +1,6 @@
-import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { createContext, PropsWithChildren, useEffect } from 'react';
+import { useStorage } from './useStorage';
+
 
 // Define the interface for the StorageContext that holds two methods: getItem and setItem.
 interface StorageContextData<T> {
@@ -7,14 +9,12 @@ interface StorageContextData<T> {
 }
 
 // Create the StorageContext with default functions for getItem and setItem.
-const StorageContext = createContext<StorageContextData<unknown>>({
-  getItem: () => undefined,
-  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>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
-  const [storedValue, setStoredValue] = useState<T | undefined>(initialValue);
+  const [storedValue, setStoredValue] = useStorage<T>({ initialValue });
 
   // Initializes the state with the value from the local storage if it exists.
   useEffect(() => {
@@ -44,17 +44,12 @@ export function StorageProvider<T>({ initialValue, children }: PropsWithChildren
   };
 
   // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-  const contextValue: StorageContextData<unknown> = { getItem, setItem } as StorageContextData<unknown>;
+  const contextValue: StorageContextData<T> = { getItem, setItem };
 
   return (
-    <StorageContext.Provider value={contextValue}>
+    <StorageContext.Provider value={contextValue as StorageContextData<unknown>}>
       {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];
-}
\ No newline at end of file

From 4ab0b57f40c756f1aed7bffe2f199ea4407e1688 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Wed, 13 Mar 2024 10:59:39 +0100
Subject: [PATCH 20/34] fix: updated storagecontext.tsx

---
 .../src/hooks/StorageContext.tsx              | 47 +++++++++++++------
 power-pay-frontend/src/main.tsx               |  6 ++-
 2 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index dc1879f9..be6d889a 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -1,20 +1,19 @@
 import { createContext, PropsWithChildren, useEffect } from 'react';
 import { useStorage } from './useStorage';
 
-
-// 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;
+interface StorageService<T> {
+  getItem: (key: string) => Promise<T | undefined>;
+  setItem: (key: string, value: T) => Promise<boolean>;
+  removeItem: (key: string) => Promise<boolean>;
+  clear: () => Promise<boolean>;
 }
 
 // Create the StorageContext with default functions for getItem and setItem.
-const StorageContext = createContext<StorageContextData<unknown> | undefined>(undefined);
-
+const StorageContext = createContext<StorageService<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>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
-  const [storedValue, setStoredValue] = useStorage<T>({ initialValue });
+export function StorageProvider<T extends Record<string, T> | undefined>({ initialValue = {} as T, children }: PropsWithChildren<{ initialValue?: T }>) {
+  const [storedValue, setStoredValue] = useStorage<Record<string, T>>({ initialValue: { ...initialValue } });
 
   // Initializes the state with the value from the local storage if it exists.
   useEffect(() => {
@@ -32,24 +31,42 @@ export function StorageProvider<T>({ initialValue, children }: PropsWithChildren
   }, [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 getItem = async (key: string): Promise<T | undefined> => {
     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) => {
+  const setItem = async (key: string, value: T): Promise<boolean> => {
     localStorage.setItem(key, JSON.stringify(value));
-    setStoredValue(value);
+    setStoredValue({ ...storedValue, [key]: value });
+    return true;
+  };
+
+  const removeItem = async (key: string): Promise<boolean> => {
+    localStorage.removeItem(key);
+    setStoredValue((prevData) => {
+      const newData = { ...prevData };
+      delete newData[key];
+      return newData;
+    });
+    return true;
+  };
+
+  const clear = async (): Promise<boolean> => {
+    localStorage.clear();
+    setStoredValue({});
+    return true;
   };
 
   // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-  const contextValue: StorageContextData<T> = { getItem, setItem };
+  const contextValue: StorageService<T> = { getItem, setItem, removeItem, clear };
 
   return (
-    <StorageContext.Provider value={contextValue as StorageContextData<unknown>}>
+    <StorageContext.Provider value={contextValue as StorageService<unknown>}>
       {children}
     </StorageContext.Provider>
   );
 }
 
+export default StorageContext;
\ No newline at end of file
diff --git a/power-pay-frontend/src/main.tsx b/power-pay-frontend/src/main.tsx
index f2cb156d..ad0bcdaa 100644
--- a/power-pay-frontend/src/main.tsx
+++ b/power-pay-frontend/src/main.tsx
@@ -6,14 +6,16 @@ import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+      <App />
   </React.StrictMode>,
   
 )
 const Root: React.FC = () => {
   return (
-    <StorageProvider initialValue={0}>
+    <StorageProvider>
       <Root />
     </StorageProvider>
   );
 };
+
+export default Root;

From e1d7d335d69327decc4ddc189a5c238ccfa0c2d1 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Wed, 13 Mar 2024 12:15:26 +0100
Subject: [PATCH 21/34] fix: added fakeimpl

---
 .../src/hooks/StorageContext.tsx              | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index be6d889a..85e04fa8 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -8,8 +8,38 @@ interface StorageService<T> {
   clear: () => Promise<boolean>;
 }
 
+// Create the StorageContextData interface.
+interface StorageContextData<T> {
+  getItem: (key: string) => Promise<unknown | undefined>;
+  setItem: (key: string, value: T) => Promise<boolean>;
+  removeItem: (key: string) => Promise<boolean>;
+  clear: () => Promise<boolean>;
+}
+
+
+// Creating  a fake implementation of the StorageContextData interface.
+const fakeStorage: StorageContextData<unknown> = {
+  getItem: async (key: string): Promise< unknown | undefined> => {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item): undefined;
+  },
+  setItem: async (key: string, value: unknown): Promise<boolean> => {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  },
+  removeItem: async (key: string): Promise<boolean> => {
+    localStorage.removeItem(key);
+    return true;
+  },
+  clear: async (): Promise<boolean> => {
+    localStorage.clear();
+    return true;
+  },
+};
+
+
 // Create the StorageContext with default functions for getItem and setItem.
-const StorageContext = createContext<StorageService<unknown> | undefined>(undefined);
+const StorageContext = createContext<StorageService<unknown> | undefined>(fakeStorage);
 
 // StorageProvider: A React component that wraps the application and provides the storage context with getItem and setItem methods.
 export function StorageProvider<T extends Record<string, T> | undefined>({ initialValue = {} as T, children }: PropsWithChildren<{ initialValue?: T }>) {
@@ -30,37 +60,9 @@ export function StorageProvider<T extends Record<string, T> | undefined>({ initi
     }
   }, [storedValue]);
 
-  // Define the getItem method that retrieves the value from the local storage or returns undefined if it doesn't exist.
-  const getItem = async (key: string): Promise<T | undefined> => {
-    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 = async (key: string, value: T): Promise<boolean> => {
-    localStorage.setItem(key, JSON.stringify(value));
-    setStoredValue({ ...storedValue, [key]: value });
-    return true;
-  };
-
-  const removeItem = async (key: string): Promise<boolean> => {
-    localStorage.removeItem(key);
-    setStoredValue((prevData) => {
-      const newData = { ...prevData };
-      delete newData[key];
-      return newData;
-    });
-    return true;
-  };
-
-  const clear = async (): Promise<boolean> => {
-    localStorage.clear();
-    setStoredValue({});
-    return true;
-  };
 
   // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-  const contextValue: StorageService<T> = { getItem, setItem, removeItem, clear };
+  const contextValue: StorageService<T> = { getItem: fakeStorage.getItem, setItem: fakeStorage.setItem, removeItem: fakeStorage.removeItem, clear: fakeStorage.clear };
 
   return (
     <StorageContext.Provider value={contextValue as StorageService<unknown>}>

From f700b508e4e026f95b59bbbd6f333fd92d1384b8 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Wed, 13 Mar 2024 13:13:10 +0100
Subject: [PATCH 22/34] fix: updated storagecontext.tsx

---
 .../src/hooks/StorageContext.tsx              | 38 +++++++++++++------
 power-pay-frontend/src/hooks/useStorage.ts    |  2 +-
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 85e04fa8..0e874155 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -42,12 +42,15 @@ const fakeStorage: StorageContextData<unknown> = {
 const StorageContext = createContext<StorageService<unknown> | undefined>(fakeStorage);
 
 // StorageProvider: A React component that wraps the application and provides the storage context with getItem and setItem methods.
-export function StorageProvider<T extends Record<string, T> | undefined>({ initialValue = {} as T, children }: PropsWithChildren<{ initialValue?: T }>) {
-  const [storedValue, setStoredValue] = useStorage<Record<string, T>>({ initialValue: { ...initialValue } });
+export function StorageProvider<T>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
+  const [storedValue, setStoredValue] = useStorage<T | undefined>({ initialValue: { ...initialValue } });
+
+// Define a global constant for the key.
+  const STORAGE_KEY = 'key';
 
   // Initializes the state with the value from the local storage if it exists.
   useEffect(() => {
-    const item = localStorage.getItem('key');
+    const item = localStorage.getItem('STORAGE_KEY');
     if (item) {
       setStoredValue(JSON.parse(item));
     }
@@ -56,19 +59,30 @@ export function StorageProvider<T extends Record<string, T> | undefined>({ initi
   // Updates the local storage whenever the state changes.
   useEffect(() => {
     if (storedValue) {
-      localStorage.setItem('key', JSON.stringify(storedValue));
+      setItemWrapper(STORAGE_KEY, storedValue);
     }
   }, [storedValue]);
 
+   // Defining a wrapper function for the setItem method that updates the local storage and the state with the new value.
+   const setItemWrapper = async (key: string, value: T | undefined) => {
+    fakeStorage.setItem(key, value);
+    setStoredValue(value);
+    return true;
+  };
 
-  // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-  const contextValue: StorageService<T> = { getItem: fakeStorage.getItem, setItem: fakeStorage.setItem, removeItem: fakeStorage.removeItem, clear: fakeStorage.clear };
-
-  return (
-    <StorageContext.Provider value={contextValue as StorageService<unknown>}>
-      {children}
-    </StorageContext.Provider>
-  );
+// Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
+const contextValue: StorageService<T> = {
+  getItem: fakeStorage.getItem,
+  setItem: setItemWrapper,
+  removeItem: fakeStorage.removeItem,
+  clear: fakeStorage.clear,
+};
+return (
+  <StorageContext.Provider value={contextValue as StorageService<unknown>}>
+    {children}
+  </StorageContext.Provider>
+);
 }
 
+
 export default StorageContext;
\ No newline at end of file
diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
index 98a02dd2..10d4c729 100644
--- a/power-pay-frontend/src/hooks/useStorage.ts
+++ b/power-pay-frontend/src/hooks/useStorage.ts
@@ -3,7 +3,7 @@ import { useState } from 'react';
 
 //UseStorageProps<T>: An interface defining the props for the useStorage hook
 interface UseStorageProps<T> {
-  initialValue?: T ;
+  initialValue?: T  | undefined;
 }
 
 //useStorage<T = string>: A generic function that accepts a UseStorageProps<T> object.

From d3d1db1aa43fb7887261771b47be5bd8c52e7b4c Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Sun, 17 Mar 2024 10:45:43 +0100
Subject: [PATCH 23/34] fix: updated main.tsx

---
 power-pay-frontend/src/main.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/power-pay-frontend/src/main.tsx b/power-pay-frontend/src/main.tsx
index ad0bcdaa..5c729f0d 100644
--- a/power-pay-frontend/src/main.tsx
+++ b/power-pay-frontend/src/main.tsx
@@ -6,16 +6,8 @@ import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-      <App />
+      <StorageProvider>
+          <App />
+      </StorageProvider>
   </React.StrictMode>,
-  
-)
-const Root: React.FC = () => {
-  return (
-    <StorageProvider>
-      <Root />
-    </StorageProvider>
-  );
-};
-
-export default Root;
+)
\ No newline at end of file

From 2f66278a9e1bfee179a70c75c76822fef520041a Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Sun, 17 Mar 2024 11:17:21 +0100
Subject: [PATCH 24/34] fix: updated usestorage

---
 power-pay-frontend/src/hooks/useStorage.ts | 36 +++++++++++++---------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
index 10d4c729..6aa77f60 100644
--- a/power-pay-frontend/src/hooks/useStorage.ts
+++ b/power-pay-frontend/src/hooks/useStorage.ts
@@ -1,27 +1,33 @@
-//useState and useEffect hooks from React
 import { useState } from 'react';
 
-//UseStorageProps<T>: An interface defining the props for the useStorage hook
+// UseStorageProps<T>: An interface defining the props for the useStorage hook
 interface UseStorageProps<T> {
-  initialValue?: T  | undefined;
+  key: string; // the key to use for storing and retrieving the value from local storage
+  initialValue?: T | undefined; // the initial value to use for the state variable
 }
 
-//useStorage<T = string>: A generic function that accepts a UseStorageProps<T> object.
+// 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>>, () => void] {
+  const { key, initialValue } = props;
 
-export function useStorage<T = string>(props: UseStorageProps<T>): [T, React.Dispatch<React.SetStateAction<T>> , () => void] {
+  // storedValue: A state variable that stores the value retrieved from the localStorage using the provided key
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    // Retrieve the value from local storage using the provided key
+    const valueInLocalStorage = localStorage.getItem(key);
 
-  const { initialValue } = props;
-
-  //storedValue: A state variable that stores the value retrieved from the localStorage using the provided key
-
-  const [storedValue, setStoredValue] = useState<T>(initialValue!);
-;
-
-  //adding a newfunction removeValue to remove the stored value from the localstorage and set it to its initial state
+    // If the value exists, parse it from JSON and return it. Otherwise, return the initial value.
+    return valueInLocalStorage ? JSON.parse(valueInLocalStorage) : initialValue!;
+  });
 
+  // adding a new function removeValue to remove the stored value from the localstorage and set it to its initial state
   const removeValue = () => {
+    // Set the storedValue to the initial value
     setStoredValue(initialValue!);
+
+    // Remove the value from local storage using the provided key
+    localStorage.removeItem(key);
   };
 
-  return [storedValue, setStoredValue , removeValue];
-}
\ No newline at end of file
+  // Return the storedValue, setStoredValue function, and removeValue function as an array
+  return [storedValue, setStoredValue, removeValue];
+}

From c6a61e1f8b3ff32b704f789b88bc124822c0ad86 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Sun, 17 Mar 2024 12:01:46 +0100
Subject: [PATCH 25/34] fix: updated storagecontext

---
 .../src/hooks/StorageContext.tsx              | 82 ++++++++++---------
 1 file changed, 44 insertions(+), 38 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 0e874155..22ff5391 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -1,20 +1,6 @@
 import { createContext, PropsWithChildren, useEffect } from 'react';
 import { useStorage } from './useStorage';
 
-interface StorageService<T> {
-  getItem: (key: string) => Promise<T | undefined>;
-  setItem: (key: string, value: T) => Promise<boolean>;
-  removeItem: (key: string) => Promise<boolean>;
-  clear: () => Promise<boolean>;
-}
-
-// Create the StorageContextData interface.
-interface StorageContextData<T> {
-  getItem: (key: string) => Promise<unknown | undefined>;
-  setItem: (key: string, value: T) => Promise<boolean>;
-  removeItem: (key: string) => Promise<boolean>;
-  clear: () => Promise<boolean>;
-}
 
 
 // Creating  a fake implementation of the StorageContextData interface.
@@ -38,51 +24,71 @@ const fakeStorage: StorageContextData<unknown> = {
 };
 
 
+// Create the StorageContextData interface.
+interface StorageContextData<T> {
+  getItem: (key: string) => Promise<unknown | undefined>;
+  setItem: (key: string, value: T) => Promise<boolean>;
+  removeItem: (key: string) => Promise<boolean>;
+  clear: () => Promise<boolean>;
+}
+
+interface StorageService<T> {
+  getItem: (key: string) => Promise<T | undefined>;
+  setItem: (key: string, value: T) => Promise<boolean>;
+  removeItem: (key: string) => Promise<boolean>;
+  clear: () => Promise<boolean>;
+}
+
+
 // Create the StorageContext with default functions for getItem and setItem.
-const StorageContext = createContext<StorageService<unknown> | undefined>(fakeStorage);
+const StorageContext = createContext<StorageService<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>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
-  const [storedValue, setStoredValue] = useStorage<T | undefined>({ initialValue: { ...initialValue } });
+  const [storedValue, setStoredValue] = useStorage<T | undefined>({ key: 'your_key_here', initialValue });
 
-// Define a global constant for the key.
+  // Define a global constant for the key.
   const STORAGE_KEY = 'key';
 
   // Initializes the state with the value from the local storage if it exists.
   useEffect(() => {
-    const item = localStorage.getItem('STORAGE_KEY');
+    const item = localStorage.getItem(STORAGE_KEY);
     if (item) {
       setStoredValue(JSON.parse(item));
     }
-  }, []);
+  }, [setStoredValue]);
 
   // Updates the local storage whenever the state changes.
   useEffect(() => {
-    if (storedValue) {
-      setItemWrapper(STORAGE_KEY, storedValue);
+    if (storedValue !== undefined) {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(storedValue));
     }
   }, [storedValue]);
 
-   // Defining a wrapper function for the setItem method that updates the local storage and the state with the new value.
-   const setItemWrapper = async (key: string, value: T | undefined) => {
-    fakeStorage.setItem(key, value);
+  // Defining a wrapper function for the setItem method that updates the local storage and the state with the new value.
+  const setItemWrapper = async (key: string, value: T | undefined) => {
+    if (value !== undefined) {
+      localStorage.setItem(key, JSON.stringify(value));
+    } else {
+      localStorage.removeItem(key);
+    }
     setStoredValue(value);
     return true;
   };
 
-// Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-const contextValue: StorageService<T> = {
-  getItem: fakeStorage.getItem,
-  setItem: setItemWrapper,
-  removeItem: fakeStorage.removeItem,
-  clear: fakeStorage.clear,
-};
-return (
-  <StorageContext.Provider value={contextValue as StorageService<unknown>}>
-    {children}
-  </StorageContext.Provider>
-);
-}
+  // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
+  const contextValue: StorageService<T> = {
+    getItem: (key) => fakeStorage.getItem(key),
+    setItem: (key, value) => setItemWrapper(key, value),
+    removeItem: (key) => fakeStorage.removeItem(key),
+    clear: () => fakeStorage.clear(),
+  };
 
+  return (
+    <StorageContext.Provider value={contextValue as StorageService<unknown>}>
+      {children}
+    </StorageContext.Provider>
+  );
+}
 
-export default StorageContext;
\ No newline at end of file
+export default StorageContext;

From e5aff4cf1a168cbb84d31d94af706f8c0a1fcf4f Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Mon, 18 Mar 2024 16:55:58 +0100
Subject: [PATCH 26/34] fix: updated main.ts, useStorage.ts

---
 .../src/hooks/StorageContext.tsx              | 117 +++++++++---------
 power-pay-frontend/src/hooks/useStorage.ts    |  44 +++----
 power-pay-frontend/src/main.tsx               |   6 +-
 3 files changed, 83 insertions(+), 84 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 22ff5391..49d31d93 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -1,91 +1,86 @@
-import { createContext, PropsWithChildren, useEffect } from 'react';
-import { useStorage } from './useStorage';
-
-
-
-// Creating  a fake implementation of the StorageContextData interface.
-const fakeStorage: StorageContextData<unknown> = {
-  getItem: async (key: string): Promise< unknown | undefined> => {
-    const item = localStorage.getItem(key);
-    return item ? JSON.parse(item): undefined;
-  },
-  setItem: async (key: string, value: unknown): Promise<boolean> => {
-    localStorage.setItem(key, JSON.stringify(value));
-    return true;
-  },
-  removeItem: async (key: string): Promise<boolean> => {
-    localStorage.removeItem(key);
-    return true;
-  },
-  clear: async (): Promise<boolean> => {
-    localStorage.clear();
-    return true;
-  },
-};
+import { createContext, PropsWithChildren, useEffect, useState } from 'react';
 
 
 // Create the StorageContextData interface.
 interface StorageContextData<T> {
-  getItem: (key: string) => Promise<unknown | undefined>;
-  setItem: (key: string, value: T) => Promise<boolean>;
-  removeItem: (key: string) => Promise<boolean>;
-  clear: () => Promise<boolean>;
+  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<T> {
-  getItem: (key: string) => Promise<T | undefined>;
-  setItem: (key: string, value: T) => Promise<boolean>;
+
+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<StorageService<unknown> | undefined>(undefined);
+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>({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) {
-  const [storedValue, setStoredValue] = useStorage<T | undefined>({ key: 'your_key_here', initialValue });
-
-  // Define a global constant for the key.
-  const STORAGE_KEY = 'key';
+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(() => {
-    const item = localStorage.getItem(STORAGE_KEY);
-    if (item) {
-      setStoredValue(JSON.parse(item));
-    }
-  }, [setStoredValue]);
+    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) {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(storedValue));
-    }
-  }, [storedValue]);
-
-  // Defining a wrapper function for the setItem method that updates the local storage and the state with the new value.
-  const setItemWrapper = async (key: string, value: T | undefined) => {
-    if (value !== undefined) {
-      localStorage.setItem(key, JSON.stringify(value));
-    } else {
-      localStorage.removeItem(key);
+      storageService.setItem(STORAGE_KEY, storedValue);
     }
-    setStoredValue(value);
-    return true;
-  };
+  }, [storageService, storedValue]);
 
   // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-  const contextValue: StorageService<T> = {
-    getItem: (key) => fakeStorage.getItem(key),
-    setItem: (key, value) => setItemWrapper(key, value),
-    removeItem: (key) => fakeStorage.removeItem(key),
-    clear: () => fakeStorage.clear(),
+  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 as StorageService<unknown>}>
+    <StorageContext.Provider value={contextValue}>
       {children}
     </StorageContext.Provider>
   );
diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
index 6aa77f60..9f7dceef 100644
--- a/power-pay-frontend/src/hooks/useStorage.ts
+++ b/power-pay-frontend/src/hooks/useStorage.ts
@@ -1,33 +1,35 @@
-import { useState } from 'react';
 
-// UseStorageProps<T>: An interface defining the props for the useStorage hook
+import { useContext, useEffect, useState } from 'react';
+import StorageContext, { StorageContextData } from './StorageContext';
+
 interface UseStorageProps<T> {
-  key: string; // the key to use for storing and retrieving the value from local storage
-  initialValue?: T | undefined; // the initial value to use for the state variable
+  key: string; 
+  initialValue?: T | undefined;
 }
 
 // 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>>, () => void] {
-  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>(() => {
-    // Retrieve the value from local storage using the provided key
-    const valueInLocalStorage = localStorage.getItem(key);
+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>;
 
-    // If the value exists, parse it from JSON and return it. Otherwise, return the initial value.
-    return valueInLocalStorage ? JSON.parse(valueInLocalStorage) : initialValue!;
+  // 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;
   });
 
-  // adding a new function removeValue to remove the stored value from the localstorage and set it to its initial state
-  const removeValue = () => {
-    // Set the storedValue to the initial value
-    setStoredValue(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 value from local storage using the provided key
-    localStorage.removeItem(key);
+  // Remove the item from local storage and set the stored value to undefined
+  const clearItem = () => {
+    removeItem(key);
+    setStoredValue(undefined)
   };
 
-  // Return the storedValue, setStoredValue function, and removeValue function as an array
-  return [storedValue, setStoredValue, removeValue];
+  return [storedValue!, setItem, clearItem];
 }
diff --git a/power-pay-frontend/src/main.tsx b/power-pay-frontend/src/main.tsx
index 5c729f0d..51b227b2 100644
--- a/power-pay-frontend/src/main.tsx
+++ b/power-pay-frontend/src/main.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { StorageProvider } from './hooks/StorageContext';
+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>
-      <StorageProvider>
+      <StorageProvider storageService={storageService}>
           <App />
       </StorageProvider>
   </React.StrictMode>,

From 695395a331b31acf3ca8196909c8c901c498d380 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Tue, 19 Mar 2024 18:33:07 +0100
Subject: [PATCH 27/34] fix: updated the logic in the usestorage.ts

---
 power-pay-frontend/src/hooks/useStorage.ts | 26 ++++++++++------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
index 9f7dceef..ddea890c 100644
--- a/power-pay-frontend/src/hooks/useStorage.ts
+++ b/power-pay-frontend/src/hooks/useStorage.ts
@@ -1,35 +1,33 @@
-
 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; 
-  initialValue?: T | undefined;
+  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, React.Dispatch<React.SetStateAction<T>>, () => void] {
+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 initial value or the value from the local storage
+  // Initialize the state variable with the value from the context or the initial value
   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]);
-
+  // Update the context when the storedValue changes
   useEffect(() => {
-    setItem(key, storedValue!);
+    if (storedValue !== undefined) {
+      setItem(key, storedValue);
+    }
   }, [key, storedValue, setItem]);
 
-  // Remove the item from local storage and set the stored value to undefined
+  // Clear the item from local storage and reset the stored value
   const clearItem = () => {
     removeItem(key);
-    setStoredValue(undefined)
+    setStoredValue(initialValue); // Reset stored value to initial value
   };
 
-  return [storedValue!, setItem, clearItem];
+  return [storedValue, setStoredValue, clearItem];
 }

From 4cac1c592e00150f375175566a9af93ca5a572df Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Tue, 19 Mar 2024 18:34:40 +0100
Subject: [PATCH 28/34] fix: complete implementation of localstorageservice

---
 .../src/hooks/StorageContext.tsx              | 71 ++++++++++++-------
 1 file changed, 45 insertions(+), 26 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 49d31d93..d58668d7 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -1,15 +1,14 @@
 import { createContext, PropsWithChildren, useEffect, useState } from 'react';
 
-
-// Create the StorageContextData interface.
-interface StorageContextData<T> {
+// Dethe StorageContextData interface.
+export 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
+  setItem: (key: string, value: T) => Promise<boolean>;
+  removeItem: (key: string) => Promise<boolean>;
+  clear: () => Promise<boolean>;
 }
 
-
+// Defining the StorageService interface.
 interface StorageService {
   getItem: <T>(key: string) => Promise<T | undefined>;
   setItem: <T>(key: string, value: T) => Promise<boolean>;
@@ -17,23 +16,29 @@ interface StorageService {
   clear: () => Promise<boolean>;
 }
 
-
+// Define the LocalStorageService class implementing the StorageService interface.
 export class LocalStorageService implements StorageService {
-  removeItem!: (key: string) => Promise<boolean>;
-  clear!: () => Promise<boolean>;
-  async getItem<T>(key: string) {
+  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) {
+  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 = 'key';
@@ -41,11 +46,11 @@ 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.
+// Define the StorageProvider component.
 export function StorageProvider<T>({ children, storageService }: PropsWithChildren<{ storageService: StorageService }>) {
-  const [storedValue, setStoredValue] = useState<Record<string, unknown>>({});
+  const [storedValue, setStoredValue] = useState<Record<string, T>>({});
 
-  // Initializes the state with the value from the local storage if it exists.
+  // Initialize the state with the value from the local storage if it exists.
   useEffect(() => {
     storageService
       .getItem<Record<string, T>>(STORAGE_KEY)
@@ -56,6 +61,7 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
       });
   }, [storageService]);
 
+
   // Updates the local storage whenever the state changes.
   useEffect(() => {
     if (storedValue !== undefined) {
@@ -63,20 +69,33 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
     }
   }, [storageService, storedValue]);
 
-  // Destructure getItem and setItem before using them in the StorageContext.Provider value prop.
-  const contextValue: StorageContextData<unknown> = {
+  // 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(pre => ({
-        ...pre, [key]: value
-      }))
+      setStoredValue((prevState) => ({
+        ...prevState,
+        [key]: value,
+      }));
+      return true;
+    },
+    removeItem: async (key) => clearItem(key),
+    clear: async () => {
+      localStorage.clear();
+      setStoredValue({});
       return true;
     },
-
-  
-    removeItem: (key) => storageService.removeItem(key),
-    
-    clear: () => storageService.clear(),
   };
 
   return (

From 9c1ec670eaed791ea89df255921197c595a9b608 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Tue, 19 Mar 2024 18:46:42 +0100
Subject: [PATCH 29/34] fix: updated package.json to previous version

---
 power-pay-frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/power-pay-frontend/package.json b/power-pay-frontend/package.json
index 6805bc45..c421d177 100644
--- a/power-pay-frontend/package.json
+++ b/power-pay-frontend/package.json
@@ -18,7 +18,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.64",
+    "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",

From 089b27e2633d59d7d085e5865fe7033ba7297c78 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Wed, 20 Mar 2024 08:19:35 +0100
Subject: [PATCH 30/34] fix: removed updated storagecontext.tsx Removed the
 unnecessary line localStorage.clear():

---
 power-pay-frontend/src/hooks/StorageContext.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index d58668d7..db6701d6 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -1,6 +1,6 @@
 import { createContext, PropsWithChildren, useEffect, useState } from 'react';
 
-// Dethe StorageContextData interface.
+// Define the StorageContextData interface.
 export interface StorageContextData<T> {
   item: Record<string, T>;
   setItem: (key: string, value: T) => Promise<boolean>;
@@ -8,7 +8,7 @@ export interface StorageContextData<T> {
   clear: () => Promise<boolean>;
 }
 
-// Defining the StorageService interface.
+// Define the StorageService interface.
 interface StorageService {
   getItem: <T>(key: string) => Promise<T | undefined>;
   setItem: <T>(key: string, value: T) => Promise<boolean>;
@@ -61,12 +61,9 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
       });
   }, [storageService]);
 
-
   // Updates the local storage whenever the state changes.
   useEffect(() => {
-    if (storedValue !== undefined) {
-      storageService.setItem(STORAGE_KEY, storedValue);
-    }
+    storageService.setItem(STORAGE_KEY, storedValue);
   }, [storageService, storedValue]);
 
   // Remove the item from local storage and set the stored value to undefined
@@ -92,7 +89,6 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
     },
     removeItem: async (key) => clearItem(key),
     clear: async () => {
-      localStorage.clear();
       setStoredValue({});
       return true;
     },

From e933383eaa1a4c7584e27ade8549a255ec551f41 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Wed, 20 Mar 2024 09:09:33 +0100
Subject: [PATCH 31/34] fix: remove if condition before calling
 storageService.setItem

---
 power-pay-frontend/src/hooks/StorageContext.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index db6701d6..8ae49081 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -89,6 +89,7 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
     },
     removeItem: async (key) => clearItem(key),
     clear: async () => {
+     // localStorage.clear();
       setStoredValue({});
       return true;
     },

From cc5f16f655a492b8d1feb9c44cdfd00ffa707611 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Wed, 20 Mar 2024 16:29:36 +0100
Subject: [PATCH 32/34] fix: updated useStorage.ts

---
 power-pay-frontend/src/hooks/StorageContext.tsx | 8 ++++----
 power-pay-frontend/src/hooks/useStorage.ts      | 6 ++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 8ae49081..867711ba 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -41,7 +41,7 @@ export class LocalStorageService implements StorageService {
 }
 
 // Define a global constant for the key.
-const STORAGE_KEY = 'key';
+const STORAGE_KEY = 'new_key';
 
 // Create the StorageContext with default functions for getItem and setItem.
 const StorageContext = createContext<StorageContextData<unknown> | undefined>(undefined);
@@ -53,7 +53,7 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
   // Initialize the state with the value from the local storage if it exists.
   useEffect(() => {
     storageService
-      .getItem<Record<string, T>>(STORAGE_KEY)
+      .getItem<Record<string, T>>(STORAGE_KEY) 
       .then((item) => {
         if (item) {
           setStoredValue(item);
@@ -63,7 +63,7 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
 
   // Updates the local storage whenever the state changes.
   useEffect(() => {
-    storageService.setItem(STORAGE_KEY, storedValue);
+    storageService.setItem(STORAGE_KEY, storedValue); 
   }, [storageService, storedValue]);
 
   // Remove the item from local storage and set the stored value to undefined
@@ -89,7 +89,7 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
     },
     removeItem: async (key) => clearItem(key),
     clear: async () => {
-     // localStorage.clear();
+      localStorage.clear();
       setStoredValue({});
       return true;
     },
diff --git a/power-pay-frontend/src/hooks/useStorage.ts b/power-pay-frontend/src/hooks/useStorage.ts
index ddea890c..29214c86 100644
--- a/power-pay-frontend/src/hooks/useStorage.ts
+++ b/power-pay-frontend/src/hooks/useStorage.ts
@@ -18,9 +18,7 @@ export function useStorage<T = string>({ key, initialValue }: UseStorageProps<T>
 
   // Update the context when the storedValue changes
   useEffect(() => {
-    if (storedValue !== undefined) {
-      setItem(key, storedValue);
-    }
+    setItem(key, storedValue as T);
   }, [key, storedValue, setItem]);
 
   // Clear the item from local storage and reset the stored value
@@ -30,4 +28,4 @@ export function useStorage<T = string>({ key, initialValue }: UseStorageProps<T>
   };
 
   return [storedValue, setStoredValue, clearItem];
-}
+}
\ No newline at end of file

From f0311dea3e7a1f5e395e665007b448e749e9d188 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Wed, 20 Mar 2024 16:36:22 +0100
Subject: [PATCH 33/34] fix: updated storagecontext.tsx

---
 power-pay-frontend/src/hooks/StorageContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 867711ba..6b82ead8 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -89,7 +89,7 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
     },
     removeItem: async (key) => clearItem(key),
     clear: async () => {
-      localStorage.clear();
+    //  localStorage.clear();
       setStoredValue({});
       return true;
     },

From 2424a9ed915f61d2263d10e88df0d5038019f2d4 Mon Sep 17 00:00:00 2001
From: AssahBismarkabah <assah9799@gmail.com>
Date: Wed, 20 Mar 2024 16:40:19 +0100
Subject: [PATCH 34/34] fix: updated storagecontext.tsx

---
 power-pay-frontend/src/hooks/StorageContext.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/power-pay-frontend/src/hooks/StorageContext.tsx b/power-pay-frontend/src/hooks/StorageContext.tsx
index 6b82ead8..f3d60f43 100644
--- a/power-pay-frontend/src/hooks/StorageContext.tsx
+++ b/power-pay-frontend/src/hooks/StorageContext.tsx
@@ -89,7 +89,6 @@ export function StorageProvider<T>({ children, storageService }: PropsWithChildr
     },
     removeItem: async (key) => clearItem(key),
     clear: async () => {
-    //  localStorage.clear();
       setStoredValue({});
       return true;
     },