steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 06:44:21 +00:00
Code Activity

🔧 Store authorization data in localStorage

Browse source
This commit is contained in:
Steffo 2021-10-10 16:34:09 +02:00
parent f21305d311
commit 15ca05ea4f
4 changed files with 8 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/package.json
View file

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

3
frontend/src/contexts/authorization.tsx
View file

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

73
frontend/src/hooks/useStorageState.ts
View file

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

5
frontend/yarn.lock
View file

@ -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"