robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useCallback, useState} from 'react'
2import {LayoutAnimationConfig} from 'react-native-reanimated'
3import {SafeAreaView} from 'react-native-safe-area-context'
4
5import {useCallOnce} from '#/lib/once'
6import {FindContactsFlow} from '#/components/contacts/FindContactsFlow'
7import {type Action, type State} from '#/components/contacts/state'
8import {ScreenTransition} from '#/components/ScreenTransition'
9import {useAnalytics} from '#/analytics'
10import {useOnboardingInternalState} from '../state'
11
12export function StepFindContacts({
13 flowState,
14 flowDispatch,
15}: {
16 flowState: State
17 flowDispatch: React.ActionDispatch<[Action]>
18}) {
19 const {dispatch} = useOnboardingInternalState()
20 const ax = useAnalytics()
21
22 useCallOnce(() => {
23 ax.metric('onboarding:contacts:begin', {})
24 })()
25
26 const [transitionDirection, setTransitionDirection] = useState<
27 'Forward' | 'Backward'
28 >('Forward')
29
30 const isFinalStep = flowState.step === '4: view matches'
31 const onSkip = useCallback(() => {
32 if (!isFinalStep) {
33 ax.metric('onboarding:contacts:skipPressed', {})
34 }
35 dispatch({type: 'next'})
36 }, [dispatch, isFinalStep, ax])
37
38 const canGoBack = flowState.step === '2: verify number'
39 const onBack = useCallback(() => {
40 if (canGoBack) {
41 setTransitionDirection('Backward')
42 flowDispatch({type: 'BACK'})
43 setTimeout(() => {
44 setTransitionDirection('Forward')
45 })
46 } else {
47 dispatch({type: 'prev'})
48 }
49 }, [dispatch, flowDispatch, canGoBack])
50
51 return (
52 <SafeAreaView edges={['left', 'top', 'right']}>
53 <LayoutAnimationConfig skipEntering skipExiting>
54 <ScreenTransition key={flowState.step} direction={transitionDirection}>
55 <FindContactsFlow
56 context="Onboarding"
57 state={flowState}
58 dispatch={flowDispatch}
59 onCancel={onSkip}
60 onBack={onBack}
61 />
62 </ScreenTransition>
63 </LayoutAnimationConfig>
64 </SafeAreaView>
65 )
66}