diff --git a/frontend/package.json b/frontend/package.json index 6854145..09de8f4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", + "react-storage-hooks": "^4.0.1", "typescript": "^4.1.2", "web-vitals": "^1.0.1" }, diff --git a/frontend/src/contexts/authorization.tsx b/frontend/src/contexts/authorization.tsx index b6afb98..2fefc3f 100644 --- a/frontend/src/contexts/authorization.tsx +++ b/frontend/src/contexts/authorization.tsx @@ -1,4 +1,5 @@ import * as React from "react" +import {useStorageReducer} from "react-storage-hooks" import {ContextData} from "../types/ContextTypes" import {WithChildren} from "../types/ExtraTypes" import {SophonUser} from "../types/SophonTypes" @@ -128,7 +129,7 @@ const AuthorizationContext = authorizationContext // Hooks export function useAuthorizationReducer(): AuthorizationContextData { - const [state, dispatch] = React.useReducer(authorizationReducer, authorizationDefaultState) + const [state, dispatch] = useStorageReducer(localStorage, "authorization", authorizationReducer, authorizationDefaultState) return {state, dispatch} } diff --git a/frontend/src/hooks/useStorageState.ts b/frontend/src/hooks/useStorageState.ts deleted file mode 100644 index dc19b12..0000000 --- a/frontend/src/hooks/useStorageState.ts +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from "react" -import {useCallback, useState} from "react" - - -/** - * Hook with the same API as {@link React.useState} which additionally stores its value in a {@link Storage}. - */ -export function useStorageState(storage: Storage, key: string, def: T): [T, React.Dispatch] { - /** - * Load the `key` from the `storage` into `value`, defaulting to `def` if it is not found. - */ - const load = useCallback( - () => { - if(storage) { - console.debug(`Loading ${key} from ${storage}...`) - const stored = storage.getItem(key) - - if(!stored) { - console.debug(`There is no value ${key} stored, defaulting...`) - return def - } - - let parsed = JSON.parse(stored) - - if(parsed) { - console.debug(`Loaded ${key} from storage!`) - return parsed - } - else { - console.debug(`Could not parse stored value at ${key}, defaulting...`) - return def - } - } - else { - console.warn(`Can't load ${key} as ${storage} doesn't seem to be available, defaulting...`) - return def - } - }, - [storage, key, def] - ) - - /** - * Save a value to the `storage`. - */ - const save = useCallback( - val => { - if(storage) { - console.debug(`Saving ${key} to storage...`) - storage.setItem(key, JSON.stringify(val)) - console.debug(`Saved ${val} at ${key} in storage!`) - } - else { - console.warn(`Can't save ${key} as storage doesn't seem to be available...`) - } - }, - [storage, key], - ) - - const [value, setValue] = useState(load()) - - /** - * Set `value` and save it to the {@link storage}. - */ - const setAndSaveValue = useCallback( - val => { - setValue(val) - save(val) - }, - [setValue, save], - ) - - return [value, setAndSaveValue] -} \ No newline at end of file diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 130d5f6..1f350f0 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -9343,6 +9343,11 @@ react-scripts@4.0.3: optionalDependencies: fsevents "^2.1.3" +react-storage-hooks@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/react-storage-hooks/-/react-storage-hooks-4.0.1.tgz#e30ed5cda48c77c431ecc02ec3824bd615f5b7fb" + integrity sha512-fetDkT5RDHGruc2NrdD1iqqoLuXgbx6AUpQSQLLkrCiJf8i97EtwJNXNTy3+GRfsATLG8TZgNc9lGRZOaU5yQA== + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"