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
|
import {
createContext,
type ReactNode,
useContext,
useMemo,
useState,
} from 'react'
import {useSession} from '#/state/session'
import {Provider as PortalProvider} from '#/components/PolicyUpdateOverlay/Portal'
import {
type PolicyUpdateState,
usePolicyUpdateState,
} from '#/components/PolicyUpdateOverlay/usePolicyUpdateState'
const Context = createContext<{
state: PolicyUpdateState
setIsReadyToShowOverlay: () => void
}>({
state: {
completed: true,
complete: () => {},
},
/**
* Although our data will be ready to go when the app shell mounts, we don't
* want to show the overlay until we actually render it, which happens after
* sigin/signup/onboarding in `createNativeStackNavigatorWithAuth`.
*/
setIsReadyToShowOverlay: () => {},
})
export function usePolicyUpdateContext() {
const context = useContext(Context)
if (!context) {
throw new Error(
'usePolicyUpdateContext must be used within a PolicyUpdateProvider',
)
}
return context
}
export function Provider({children}: {children?: ReactNode}) {
const {hasSession} = useSession()
const [isReadyToShowOverlay, setIsReadyToShowOverlay] = useState(false)
const state = usePolicyUpdateState({
// only enable the policy update overlay in non-test environments
enabled:
isReadyToShowOverlay && hasSession && process.env.NODE_ENV !== 'test',
})
const ctx = useMemo(
() => ({
state,
setIsReadyToShowOverlay() {
if (isReadyToShowOverlay) return
setIsReadyToShowOverlay(true)
},
}),
[state, isReadyToShowOverlay, setIsReadyToShowOverlay],
)
return (
<PortalProvider>
<Context.Provider value={ctx}>{children}</Context.Provider>
</PortalProvider>
)
}
|
