fix: updated storagecontext.tsx

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;

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;