From faf66f3178fbddcfaab9c851b9315f20cd285c38 Mon Sep 17 00:00:00 2001 From: dan Date: Thu, 29 Aug 2024 18:57:36 +0100 Subject: [PATCH] Remove new_user_guided_tour and tour code (#5023) --- package.json | 1 - src/App.native.tsx | 17 +-- src/App.web.tsx | 9 +- src/lib/statsig/gates.ts | 1 - src/screens/Onboarding/StepFinished.tsx | 4 - src/tours/Debug.tsx | 18 --- src/tours/HomeTour.tsx | 93 ------------ src/tours/Tooltip.tsx | 168 --------------------- src/tours/index.tsx | 62 -------- src/tours/positioning.ts | 23 --- src/tours/positioning.web.ts | 27 ---- src/view/screens/Home.tsx | 10 +- src/view/shell/bottom-bar/BottomBar.tsx | 25 ++- src/view/shell/bottom-bar/BottomBarWeb.tsx | 11 +- src/view/shell/desktop/LeftNav.tsx | 22 +-- yarn.lock | 119 ++------------- 16 files changed, 43 insertions(+), 567 deletions(-) delete mode 100644 src/tours/Debug.tsx delete mode 100644 src/tours/HomeTour.tsx delete mode 100644 src/tours/Tooltip.tsx delete mode 100644 src/tours/index.tsx delete mode 100644 src/tours/positioning.ts delete mode 100644 src/tours/positioning.web.ts diff --git a/package.json b/package.json index fe43922a..eaa03829 100644 --- a/package.json +++ b/package.json @@ -199,7 +199,6 @@ "react-responsive": "^9.0.2", "react-textarea-autosize": "^8.5.3", "rn-fetch-blob": "^0.12.0", - "rn-tourguide": "bluesky-social/rn-tourguide", "sentry-expo": "~7.0.1", "statsig-react-native-expo": "^4.6.1", "tippy.js": "^6.3.7", diff --git a/src/App.native.tsx b/src/App.native.tsx index a4282e7f..c26052a9 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -60,7 +60,6 @@ import {useColorModeTheme} from '#/alf/util/useColorModeTheme' import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry' import {Provider as PortalProvider} from '#/components/Portal' import {Splash} from '#/Splash' -import {Provider as TourProvider} from '#/tours' import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' import {AudioCategory, PlatformInfo} from '../modules/expo-bluesky-swiss-army' @@ -127,15 +126,13 @@ function InnerApp() { - - - - - - - - + + + + + + diff --git a/src/App.web.tsx b/src/App.web.tsx index 69a8020c..fa1fba03 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -48,7 +48,6 @@ import {ThemeProvider as Alf} from '#/alf' import {useColorModeTheme} from '#/alf/util/useColorModeTheme' import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry' import {Provider as PortalProvider} from '#/components/Portal' -import {Provider as TourProvider} from '#/tours' import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider' function InnerApp() { @@ -111,11 +110,9 @@ function InnerApp() { - - - - - + + + diff --git a/src/lib/statsig/gates.ts b/src/lib/statsig/gates.ts index 0f92cd14..39594bdb 100644 --- a/src/lib/statsig/gates.ts +++ b/src/lib/statsig/gates.ts @@ -2,7 +2,6 @@ export type Gate = // Keep this alphabetic please. | 'debug_show_feedcontext' | 'fixed_bottom_bar' - | 'new_user_guided_tour' | 'onboarding_minimum_interests' | 'show_follow_back_label_v2' | 'suggested_feeds_interstitial' diff --git a/src/screens/Onboarding/StepFinished.tsx b/src/screens/Onboarding/StepFinished.tsx index 379807d8..bc765781 100644 --- a/src/screens/Onboarding/StepFinished.tsx +++ b/src/screens/Onboarding/StepFinished.tsx @@ -44,7 +44,6 @@ import {News2_Stroke2_Corner0_Rounded as News} from '#/components/icons/News2' import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2' import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' -import {TOURS, useSetQueuedTour} from '#/tours' export function StepFinished() { const {_} = useLingui() @@ -59,7 +58,6 @@ export function StepFinished() { const activeStarterPack = useActiveStarterPack() const setActiveStarterPack = useSetActiveStarterPack() const setHasCheckedForStarterPack = useSetHasCheckedForStarterPack() - const setQueuedTour = useSetQueuedTour() const {startProgressGuide} = useProgressGuideControls() const finishOnboarding = React.useCallback(async () => { @@ -189,7 +187,6 @@ export function StepFinished() { setSaving(false) setActiveStarterPack(undefined) setHasCheckedForStarterPack(true) - setQueuedTour(TOURS.HOME) startProgressGuide('like-10-and-follow-7') dispatch({type: 'finish'}) onboardDispatch({type: 'finish'}) @@ -223,7 +220,6 @@ export function StepFinished() { requestNotificationsPermission, setActiveStarterPack, setHasCheckedForStarterPack, - setQueuedTour, startProgressGuide, ]) diff --git a/src/tours/Debug.tsx b/src/tours/Debug.tsx deleted file mode 100644 index ba643a80..00000000 --- a/src/tours/Debug.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import {useTourGuideController} from 'rn-tourguide' - -import {Button} from '#/components/Button' -import {Text} from '#/components/Typography' - -export function TourDebugButton() { - const {start} = useTourGuideController('home') - return ( - - ) -} diff --git a/src/tours/HomeTour.tsx b/src/tours/HomeTour.tsx deleted file mode 100644 index d938fe0e..00000000 --- a/src/tours/HomeTour.tsx +++ /dev/null @@ -1,93 +0,0 @@ -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 ( - <> - - - - - ) -} - -export function HomeTourExploreWrapper({ - children, -}: React.PropsWithChildren<{}>) { - const {_} = useLingui() - const {tourKey} = useTourGuideController(TOURS.HOME) - return ( - - {children} - - ) -} diff --git a/src/tours/Tooltip.tsx b/src/tours/Tooltip.tsx deleted file mode 100644 index e7727763..00000000 --- a/src/tours/Tooltip.tsx +++ /dev/null @@ -1,168 +0,0 @@ -import * as React from 'react' -import { - AccessibilityInfo, - findNodeHandle, - Pressable, - Text as RNText, - View, -} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {FocusScope} from '@tamagui/focus-scope' -import {IStep, Labels} from 'rn-tourguide' - -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' -import {useA11y} from '#/state/a11y' -import {Logo} from '#/view/icons/Logo' -import {atoms as a, useTheme} from '#/alf' -import {Button, ButtonText} from '#/components/Button' -import {leading, Text} from '#/components/Typography' - -const stopPropagation = (e: any) => e.stopPropagation() - -export interface TooltipComponentProps { - isFirstStep?: boolean - isLastStep?: boolean - currentStep: IStep - labels?: Labels - handleNext?: () => void - handlePrev?: () => void - handleStop?: () => void -} - -export function TooltipComponent({ - isLastStep, - handleNext, - handleStop, - currentStep, - labels, -}: TooltipComponentProps) { - const t = useTheme() - const {_} = useLingui() - const btnRef = React.useRef(null) - const textRef = React.useRef(null) - const {screenReaderEnabled} = useA11y() - useWebBodyScrollLock(true) - - const focusTextNode = () => { - const node = textRef.current ? findNodeHandle(textRef.current) : undefined - if (node) { - AccessibilityInfo.setAccessibilityFocus(node) - } - } - - // handle initial focus immediately on mount - React.useLayoutEffect(() => { - focusTextNode() - }, []) - - // handle focus between steps - const innerHandleNext = () => { - handleNext?.() - setTimeout(() => focusTextNode(), 200) - } - - return ( - - true} - onTouchEnd={stopPropagation} - style={[ - t.atoms.bg, - a.px_lg, - a.py_lg, - a.flex_col, - a.gap_md, - a.rounded_sm, - a.shadow_md, - {maxWidth: 300}, - ]}> - {screenReaderEnabled && ( - - )} - - - - - Quick tip - - - - {currentStep.text} - - {!isLastStep ? ( - - ) : ( - - )} - - {screenReaderEnabled && ( - - )} - - - ) -} diff --git a/src/tours/index.tsx b/src/tours/index.tsx deleted file mode 100644 index 8d4ca26b..00000000 --- a/src/tours/index.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react' -import {InteractionManager} from 'react-native' -import {TourGuideProvider, useTourGuideController} from 'rn-tourguide' - -import {useGate} from '#/lib/statsig/statsig' -import {useColorModeTheme} from '#/alf/util/useColorModeTheme' -import {HomeTour} from './HomeTour' -import {TooltipComponent} from './Tooltip' - -export enum TOURS { - HOME = 'home', -} - -type StateContext = TOURS | null -type SetContext = (v: TOURS | null) => void - -const stateContext = React.createContext(null) -const setContext = React.createContext((_: TOURS | null) => {}) - -export function Provider({children}: React.PropsWithChildren<{}>) { - const theme = useColorModeTheme() - const [state, setState] = React.useState(() => null) - - return ( - - - - - {children} - - - - ) -} - -export function useTriggerTourIfQueued(tour: TOURS) { - const {start} = useTourGuideController(tour) - const setQueuedTour = React.useContext(setContext) - const queuedTour = React.useContext(stateContext) - const gate = useGate() - - return React.useCallback(() => { - if (queuedTour === tour) { - setQueuedTour(null) - InteractionManager.runAfterInteractions(() => { - if (gate('new_user_guided_tour')) { - start() - } - }) - } - }, [tour, queuedTour, setQueuedTour, start, gate]) -} - -export function useSetQueuedTour() { - return React.useContext(setContext) -} diff --git a/src/tours/positioning.ts b/src/tours/positioning.ts deleted file mode 100644 index 03d61f53..00000000 --- a/src/tours/positioning.ts +++ /dev/null @@ -1,23 +0,0 @@ -import {useWindowDimensions} from 'react-native' -import {useSafeAreaInsets} from 'react-native-safe-area-context' - -import {useShellLayout} from '#/state/shell/shell-layout' - -export function useHeaderPosition() { - const {headerHeight} = useShellLayout() - const {width} = useWindowDimensions() - const insets = useSafeAreaInsets() - - return { - top: insets.top, - left: 10, - width: width - 20, - height: headerHeight.value, - borderRadiusObject: { - topLeft: 4, - topRight: 4, - bottomLeft: 4, - bottomRight: 4, - }, - } -} diff --git a/src/tours/positioning.web.ts b/src/tours/positioning.web.ts deleted file mode 100644 index fd0f7aa7..00000000 --- a/src/tours/positioning.web.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {useWindowDimensions} from 'react-native' - -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {useShellLayout} from '#/state/shell/shell-layout' - -export function useHeaderPosition() { - const {headerHeight} = useShellLayout() - const winDim = useWindowDimensions() - const {isMobile} = useWebMediaQueries() - - let left = 0 - let width = winDim.width - if (width > 590 && !isMobile) { - left = winDim.width / 2 - 295 - width = 590 - } - - let offset = isMobile ? 45 : 0 - - return { - top: headerHeight.value - offset, - left, - width, - height: 45, - borderRadiusObject: undefined, - } -} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index af424428..92599546 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -29,7 +29,6 @@ import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState' import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState' import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed' import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned' -import {TOURS, useTriggerTourIfQueued} from '#/tours' import {HomeHeader} from '../com/home/HomeHeader' type Props = NativeStackScreenProps @@ -88,7 +87,6 @@ function HomeScreenReady({ const selectedIndex = Math.max(0, maybeFoundIndex) const selectedFeed = allFeeds[selectedIndex] const requestNotificationsPermission = useRequestNotificationsPermission() - const triggerTourIfQueued = useTriggerTourIfQueued(TOURS.HOME) const gate = useGate() useSetTitle(pinnedFeedInfos[selectedIndex]?.displayName) @@ -141,16 +139,10 @@ function HomeScreenReady({ React.useCallback(() => { setMinimalShellMode(false) setDrawerSwipeDisabled(selectedIndex > 0) - triggerTourIfQueued() return () => { setDrawerSwipeDisabled(false) } - }, [ - setDrawerSwipeDisabled, - selectedIndex, - setMinimalShellMode, - triggerTourIfQueued, - ]), + }, [setDrawerSwipeDisabled, selectedIndex, setMinimalShellMode]), ) useFocusEffect( diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 80886b32..b5ad92b4 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -45,7 +45,6 @@ import { Message_Stroke2_Corner0_Rounded as Message, Message_Stroke2_Corner0_Rounded_Filled as MessageFilled, } from '#/components/icons/Message' -import {HomeTourExploreWrapper} from '#/tours/HomeTour' import {styles} from './BottomBarStyles' type TabOptions = @@ -163,19 +162,17 @@ export function BottomBar({navigation}: BottomTabBarProps) { - {isAtSearch ? ( - - ) : ( - - )} - + isAtSearch ? ( + + ) : ( + + ) } onPress={onPressSearch} accessibilityRole="search" diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index c89d2a63..21c253ee 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -41,7 +41,6 @@ import { UserCircle_Filled_Corner0_Rounded as UserCircleFilled, UserCircle_Stroke2_Corner0_Rounded as UserCircle, } from '#/components/icons/UserCircle' -import {HomeTourExploreWrapper} from '#/tours/HomeTour' import {styles} from './BottomBarStyles' export function BottomBarWeb() { @@ -95,12 +94,10 @@ export function BottomBarWeb() { {({isActive}) => { const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass return ( - - - + ) }} diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 49fb7fc9..ca8073f5 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -63,7 +63,6 @@ import { UserCircle_Filled_Corner0_Rounded as UserCircleFilled, UserCircle_Stroke2_Corner0_Rounded as UserCircle, } from '#/components/icons/UserCircle' -import {HomeTourExploreWrapper} from '#/tours/HomeTour' import {router} from '../../../routes' const NAV_ICON_WIDTH = 28 @@ -341,19 +340,14 @@ export function DesktopLeftNav() { iconFilled={} label={_(msg`Home`)} /> - - } - iconFilled={ - - } - label={_(msg`Search`)} - /> - + } + iconFilled={ + + } + label={_(msg`Search`)} + />