From c04d849ee3b0e18e4062ffb209065abb281a9ae0 Mon Sep 17 00:00:00 2001 From: AssahBismarkabah Date: Mon, 11 Mar 2024 13:05:51 +0100 Subject: [PATCH] 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: An interface defining the shape of the storage context data, which includes two functions: getItem and setItem interface StorageContextData { - getItem: (key: string) => T | undefined; - setItem: (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: An interface defining the props for the StorageProvider component, which includes the initialValue prop and the children to be rendered +interface StorageProviderProps extends PropsWithChildren { + initialValue?: T; +} + +// Create a context for storing and accessing items in localStorage const StorageContext = createContext>({ - getItem: () => undefined, - setItem: () => {}, + getItem: () => undefined, + setItem: () => {}, }); -// StorageProvider: 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({ initialValue, children }: PropsWithChildren<{ initialValue?: T }>) { - const [storedValue, setStoredValue] = useState(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 = (key: string) => { - const item = localStorage.getItem(key); - return item ? JSON.parse(item) : undefined; - }; - - // Define the setItem method that updates the local storage and the state with the new value. - const setItem = (key: string, value: T) => { - localStorage.setItem(key, JSON.stringify(value)); - setStoredValue(value); - }; - - return ( - - {children} - - ); +// StorageProvider: A functional component that uses the StorageContext to provide the storage-related functionality +export function StorageProvider({ initialValue, children }: StorageProviderProps) { + // Initialize the state variable storedValue with the initialValue prop, if provided, using useState hook + const [storedValue, setStoredValue] = useState(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 ( + + {children} + + ); } -// useStorage(): A custom hook that returns the getItem and setItem methods from the StorageContext. +// useStorage: A custom React hook that accepts a UseStorageProps object and returns the getItem and setItem functions export function useStorage() { - const { getItem, setItem } = useContext(StorageContext); - // Cast the getItem and setItem methods to the correct types. - return [getItem as StorageContextData['getItem'], setItem as StorageContextData['setItem']]; + const { getItem, setItem } = useContext(StorageContext); + // Cast the getItem and setItem functions to the correct types + return [getItem as StorageContextData['getItem'], setItem as StorageContextData['setItem']]; } \ No newline at end of file