From 15ca05ea4f0ca7ee8e8bfbdef9a65d7105688f5a Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 10 Oct 2021 16:34:09 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Store=20authorization=20data=20i?=
 =?UTF-8?q?n=20`localStorage`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                   |  1 +
 frontend/src/contexts/authorization.tsx |  3 +-
 frontend/src/hooks/useStorageState.ts   | 73 -------------------------
 frontend/yarn.lock                      |  5 ++
 4 files changed, 8 insertions(+), 74 deletions(-)
 delete mode 100644 frontend/src/hooks/useStorageState.ts

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<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]
-}
\ 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"