diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 1208da4..e2ca9d5 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,2 +1 @@ -export { default as useLocalStorage } from "./useLocalStorage"; export { default as useForm } from "./useForm"; diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts deleted file mode 100644 index ba42cbc..0000000 --- a/src/hooks/useLocalStorage.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { type Dispatch, type SetStateAction, useState } from "react"; - -/** React hook for localStorage - * From https://usehooks.com/useLocalStorage/ - */ -export default function useLocalStorage( - key: string, - initialValue: T, -): [T, Dispatch>] { - // State to store our value - // Pass initial state function to useState so logic is only executed once - const [storedValue, setStoredValue] = useState(() => { - try { - // Get from local storage by key - const item = window.localStorage.getItem(key); - // Parse stored json or if none return initialValue - return item ? JSON.parse(item) : initialValue; - } catch (error) { - // If error also return initialValue - console.log(error); - return initialValue; - } - }); - - // Return a wrapped version of useState's setter function that ... - // ... persists the new value to localStorage. - const setValue = (value: T | ((prevState: T) => void)): void => { - try { - // Allow value to be a function so we have same API as useState - const valueToStore = - value instanceof Function ? value(storedValue) : value; - // Save state - setStoredValue(valueToStore); - // Save to local storage - window.localStorage.setItem(key, JSON.stringify(valueToStore)); - } catch (error) { - // A more advanced implementation would handle the error case - console.log(error); - } - }; - - return [storedValue, setValue]; -} diff --git a/src/providers/AppStateProvider.tsx b/src/providers/AppStateProvider.tsx index 65f6659..fadbc0b 100644 --- a/src/providers/AppStateProvider.tsx +++ b/src/providers/AppStateProvider.tsx @@ -1,5 +1,11 @@ import { useLocalStorage } from "@/hooks"; -import { type PropsWithChildren, createContext, useContext } from "react"; +import { + type PropsWithChildren, + createContext, + useContext, + useEffect, + useState, +} from "react"; export type AppStateContextProps = PropsWithChildren & { defaultValue?: AppStateContext; @@ -20,11 +26,26 @@ const AppStateContext = createContext(initialState); export const useAppState = () => useContext(AppStateContext); function AppStateProvider({ children, defaultValue }: AppStateContextProps) { - const [isCompliant, setIsCompliant] = useLocalStorage( - "isCompliant", - defaultValue?.isCompliant || initialState.isCompliant, + const params = new URLSearchParams(window.location.search); + const compliantParam = params.get("compliant") === "true"; + + const [isCompliant, setIsCompliant] = useState( + defaultValue?.isCompliant || compliantParam, ); + useEffect(() => { + if (isCompliant) { + params.set("compliant", "true"); + } else { + params.delete("compliant"); + } + + const newUrl = `${window.location.pathname}${ + params.size > 0 ? `?${params.toString()}` : "" + }`; + window.history.replaceState({}, "", newUrl); + }, [isCompliant, params.delete, params.set, params.size, params.toString]); + const toggleCompliancy = (newValue?: boolean) => { setIsCompliant((prev) => (newValue !== undefined ? newValue : !prev)); };