src/tours/HomeTour.tsx


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
84
85
86
87
88
89
90
91
92
93

import React from 'react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {
  IStep,
  TourGuideZone,
  TourGuideZoneByPosition,
  useTourGuideController,
} from 'rn-tourguide'

import {DISCOVER_FEED_URI} from '#/lib/constants'
import {isWeb} from '#/platform/detection'
import {useSetSelectedFeed} from '#/state/shell/selected-feed'
import {TOURS} from '.'
import {useHeaderPosition} from './positioning'

export function HomeTour() {
  const {_} = useLingui()
  const {tourKey, eventEmitter} = useTourGuideController(TOURS.HOME)
  const setSelectedFeed = useSetSelectedFeed()
  const headerPosition = useHeaderPosition()

  React.useEffect(() => {
    const handleOnStepChange = (step?: IStep) => {
      if (step?.order === 2) {
        setSelectedFeed('following')
      } else if (step?.order === 3) {
        setSelectedFeed(`feedgen|${DISCOVER_FEED_URI}`)
      }
    }
    eventEmitter?.on('stepChange', handleOnStepChange)
    return () => {
      eventEmitter?.off('stepChange', handleOnStepChange)
    }
  }, [eventEmitter, setSelectedFeed])

  return (
    <>
      <TourGuideZoneByPosition
        isTourGuide
        tourKey={tourKey}
        zone={1}
        top={headerPosition.top}
        left={headerPosition.left}
        width={headerPosition.width}
        height={headerPosition.height}
        borderRadiusObject={headerPosition.borderRadiusObject}
        text={_(msg`Switch between feeds to control your experience.`)}
      />
      <TourGuideZoneByPosition
        isTourGuide
        tourKey={tourKey}
        zone={2}
        top={headerPosition.top}
        left={headerPosition.left}
        width={headerPosition.width}
        height={headerPosition.height}
        borderRadiusObject={headerPosition.borderRadiusObject}
        text={_(msg`Following shows the latest posts from people you follow.`)}
      />
      <TourGuideZoneByPosition
        isTourGuide
        tourKey={tourKey}
        zone={3}
        top={headerPosition.top}
        left={headerPosition.left}
        width={headerPosition.width}
        height={headerPosition.height}
        borderRadiusObject={headerPosition.borderRadiusObject}
        text={_(msg`Discover learns which posts you like as you browse.`)}
      />
    </>
  )
}

export function HomeTourExploreWrapper({
  children,
}: React.PropsWithChildren<{}>) {
  const {_} = useLingui()
  const {tourKey} = useTourGuideController(TOURS.HOME)
  return (
    <TourGuideZone
      tourKey={tourKey}
      zone={4}
      tooltipBottomOffset={50}
      shape={isWeb ? 'rectangle' : 'circle'}
      text={_(
        msg`Find more feeds and accounts to follow in the Explore page.`,
      )}>
      {children}
    </TourGuideZone>
  )
}