Open AnjaSiewert opened 1 year ago
As an art enthusiast
I want to persist my favorites and comments
so that the data will not be lost when I close the app.
use-local-storage-state
useLocalStorageState
artPiecesInfo
To use the useImmer hook to mutate the artPiecesInfo state, implement this example to combine both.
useImmer
Hook:
import produce, { freeze } from "immer"; import { useCallback } from "react"; import useLocalStorageState from "use-local-storage-state"; export function useImmerLocalStorageState(key, options) { const [value, setValue] = useLocalStorageState(key, { ...options, defaultValue: freeze(options.defaultValue), }); return [ value, useCallback( (updater) => { if (typeof updater === "function") setValue(produce(updater)); else setValue(freeze(updater)); }, [setValue] ), ]; }
Usage in App component:
App
import { useImmerLocalStorageState } from "./useImmerLocalStorageState"; export default function App({ Component, pageProps }) { const [artPiecesInfo, updateArtPiecesInfo] = useImmerLocalStorageState( "art-pieces-info", { defaultValue: [] } ); // ... }
Value Proposition
As an art enthusiast
I want to persist my favorites and comments
so that the data will not be lost when I close the app.
Acceptance Criteria
Tasks
use-local-storage-state
useLocalStorageState
hook to store theartPiecesInfo
stateTo use the
useImmer
hook to mutate theartPiecesInfo
state, implement this example to combine both.Hook:
Usage in
App
component: