🔧 Store authorization data in localStorage

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"
     },

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}
 }
 

frontend/src/hooks/useStorageState.ts

@@ -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<T>(storage: Storage, key: string, def: T): [T, React.Dispatch<T>] {
-    /**
-     * 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<T>(load())
-
-    /**
-     * Set `value` and save it to the {@link storage}.
-     */
-    const setAndSaveValue = useCallback(
-        val => {
-            setValue(val)
-            save(val)
-        },
-        [setValue, save],
-    )
-
-    return [value, setAndSaveValue]
-}

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"