/
useStructureToolSetting.ts
48 lines (40 loc) · 1.32 KB
/
useStructureToolSetting.ts
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
import {useCallback, useEffect, useMemo, useState} from 'react'
import {map, startWith} from 'rxjs/operators'
import {useKeyValueStore} from 'sanity'
const STRUCTURE_TOOL_NAMESPACE = 'studio.structure-tool'
/**
* @internal
*/
export function useStructureToolSetting<ValueType>(
namespace: string | null,
key: string | null,
defaultValue?: ValueType,
): [ValueType | undefined, (_value: ValueType) => void] {
const keyValueStore = useKeyValueStore()
const [value, setValue] = useState<ValueType | undefined>(defaultValue)
const keyValueStoreKey = `${STRUCTURE_TOOL_NAMESPACE}.${namespace}.${key}`
const settings = useMemo(() => {
return keyValueStore.getKey(keyValueStoreKey)
}, [keyValueStore, keyValueStoreKey])
useEffect(() => {
const sub = settings
.pipe(
startWith(defaultValue),
map((fetchedValue) => {
return fetchedValue === null ? defaultValue : fetchedValue
}),
)
.subscribe({
next: setValue as any,
})
return () => sub?.unsubscribe()
}, [defaultValue, keyValueStoreKey, settings])
const set = useCallback(
(newValue: ValueType) => {
setValue(newValue)
keyValueStore.setKey(keyValueStoreKey, newValue as string)
},
[keyValueStore, keyValueStoreKey],
)
return useMemo(() => [value, set], [set, value])
}