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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import React from 'react'
import * as persisted from '#/state/persisted'
type StateContext = {
trendingDisabled: Exclude<persisted.Schema['trendingDisabled'], undefined>
trendingVideoDisabled: Exclude<
persisted.Schema['trendingVideoDisabled'],
undefined
>
}
type ApiContext = {
setTrendingDisabled(
hidden: Exclude<persisted.Schema['trendingDisabled'], undefined>,
): void
setTrendingVideoDisabled(
hidden: Exclude<persisted.Schema['trendingVideoDisabled'], undefined>,
): void
}
const StateContext = React.createContext<StateContext>({
trendingDisabled: Boolean(persisted.defaults.trendingDisabled),
trendingVideoDisabled: Boolean(persisted.defaults.trendingVideoDisabled),
})
const ApiContext = React.createContext<ApiContext>({
setTrendingDisabled() {},
setTrendingVideoDisabled() {},
})
function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) {
const [value, _set] = React.useState(() => {
return Boolean(persisted.get(key))
})
const set = React.useCallback<
(value: Exclude<persisted.Schema[T], undefined>) => void
>(
hidden => {
_set(Boolean(hidden))
persisted.write(key, hidden)
},
[key, _set],
)
React.useEffect(() => {
return persisted.onUpdate(key, hidden => {
_set(Boolean(hidden))
})
}, [key, _set])
return [value, set] as const
}
export function Provider({children}: React.PropsWithChildren<{}>) {
const [trendingDisabled, setTrendingDisabled] =
usePersistedBooleanValue('trendingDisabled')
const [trendingVideoDisabled, setTrendingVideoDisabled] =
usePersistedBooleanValue('trendingVideoDisabled')
/*
* Context
*/
const state = React.useMemo(
() => ({trendingDisabled, trendingVideoDisabled}),
[trendingDisabled, trendingVideoDisabled],
)
const api = React.useMemo(
() => ({setTrendingDisabled, setTrendingVideoDisabled}),
[setTrendingDisabled, setTrendingVideoDisabled],
)
return (
<StateContext.Provider value={state}>
<ApiContext.Provider value={api}>{children}</ApiContext.Provider>
</StateContext.Provider>
)
}
export function useTrendingSettings() {
return React.useContext(StateContext)
}
export function useTrendingSettingsApi() {
return React.useContext(ApiContext)
}
|
