diff options
Diffstat (limited to 'src/components/PolicyUpdateOverlay/context.tsx')
-rw-r--r-- | src/components/PolicyUpdateOverlay/context.tsx | 51 |
1 files changed, 43 insertions, 8 deletions
diff --git a/src/components/PolicyUpdateOverlay/context.tsx b/src/components/PolicyUpdateOverlay/context.tsx index 68ae7bbd8..4f6e56e21 100644 --- a/src/components/PolicyUpdateOverlay/context.tsx +++ b/src/components/PolicyUpdateOverlay/context.tsx @@ -1,32 +1,67 @@ -import {createContext, type ReactNode, useContext} from 'react' +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<PolicyUpdateState>({ - completed: true, - complete: () => {}, +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 usePolicyUpdateStateContext() { +export function usePolicyUpdateContext() { const context = useContext(Context) if (!context) { throw new Error( - 'usePolicyUpdateStateContext must be used within a PolicyUpdateProvider', + 'usePolicyUpdateContext must be used within a PolicyUpdateProvider', ) } return context } export function Provider({children}: {children?: ReactNode}) { - const state = usePolicyUpdateState() + 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={state}>{children}</Context.Provider> + <Context.Provider value={ctx}>{children}</Context.Provider> </PortalProvider> ) } |