-
Notifications
You must be signed in to change notification settings - Fork 288
/
LocalStorage.tsx
68 lines (60 loc) · 1.86 KB
/
LocalStorage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { Dispatch, SetStateAction, useContext } from "react"
import { useStorageState } from "react-storage-hooks"
export type TiltfileKey = string
export const tiltfileKeyContext = React.createContext<TiltfileKey>("unset")
export function makeKey(tiltfileKey: string, key: string): string {
return "tilt-" + JSON.stringify({ tiltfileKey: tiltfileKey, key: key })
}
export type accessor<S> = {
get: () => S | null
set: (s: S) => void
}
export function accessorsForTesting<S>(name: string) {
const key = makeKey("test", name)
function get(): S | null {
const v = localStorage.getItem(key)
if (!v) {
return null
}
return JSON.parse(v) as S
}
function set(s: S): void {
localStorage.setItem(key, JSON.stringify(s))
}
return {
get: get,
set: set,
}
}
// Like `useState`, but backed by localStorage and namespaced by the tiltfileKey
// maybeUpgradeSavedState: transforms any state read from storage - allows, e.g., filling in default values for
// fields added since the state was saved
export function usePersistentState<S>(
name: string,
defaultValue: S,
maybeUpgradeSavedState?: (state: S) => S
): [state: S, setState: Dispatch<SetStateAction<S>>] {
const tiltfileKey = useContext(tiltfileKeyContext)
let [state, setState] = useStorageState<S>(
localStorage,
makeKey(tiltfileKey, name),
defaultValue
)
if (maybeUpgradeSavedState) {
state = maybeUpgradeSavedState(state)
}
return [state, setState]
}
export function PersistentStateProvider<S>(props: {
name: string
defaultValue: S
maybeUpgradeSavedState?: (state: S) => S
children: (state: S, setState: Dispatch<SetStateAction<S>>) => JSX.Element
}) {
let [state, setState] = usePersistentState(
props.name,
props.defaultValue,
props.maybeUpgradeSavedState
)
return props.children(state, setState)
}