diff --git a/src/components/ProgressGuide/List.tsx b/src/components/ProgressGuide/List.tsx index 05f8cb25b2..7177be3273 100644 --- a/src/components/ProgressGuide/List.tsx +++ b/src/components/ProgressGuide/List.tsx @@ -18,7 +18,7 @@ import {ProgressGuideTask} from './Task' export function ProgressGuideList({style}: {style: StyleProp}) { const t = useTheme() const {_} = useLingui() - const guide = useProgressGuide(ProgressGuideName.Like10Posts) + const guide = useProgressGuide(ProgressGuideName.Like10AndFollow7) const {captureAction, endProgressGuide} = useProgressGuideControls() React.useEffect(() => { @@ -26,7 +26,7 @@ export function ProgressGuideList({style}: {style: StyleProp}) { return () => clearInterval(i) }, [captureAction]) - if (guide?.guide === ProgressGuideName.Like10Posts) { + if (guide?.guide === ProgressGuideName.Like10AndFollow7) { return ( @@ -43,7 +43,7 @@ export function ProgressGuideList({style}: {style: StyleProp}) { variant="ghost" size="tiny" color="secondary" - label={_(msg`Dismiss get started`)} + label={_(msg`Dismiss getting started guide`)} onPress={endProgressGuide}> @@ -54,6 +54,11 @@ export function ProgressGuideList({style}: {style: StyleProp}) { title={_(msg`Like 10 posts`)} subtitle={_(msg`Teach Discover what you like.`)} /> + ) } diff --git a/src/state/shell/progress-guide.tsx b/src/state/shell/progress-guide.tsx index b759a0a884..3f73e8fc03 100644 --- a/src/state/shell/progress-guide.tsx +++ b/src/state/shell/progress-guide.tsx @@ -9,10 +9,11 @@ import { export enum ProgressGuideAction { Like = 'like', + Follow = 'follow', } export enum ProgressGuideName { - Like10Posts = 'like-10-posts', + Like10AndFollow7 = 'like-10-and-follow-7', } interface BaseProgressGuide { @@ -20,12 +21,13 @@ interface BaseProgressGuide { isComplete: boolean } -interface Like10PostsProgressGuide extends BaseProgressGuide { - guide: ProgressGuideName.Like10Posts +interface Like10AndFollow7ProgressGuide extends BaseProgressGuide { + guide: ProgressGuideName.Like10AndFollow7 numLikes: number + numFollows: number } -type ProgressGuide = Like10PostsProgressGuide | undefined +type ProgressGuide = Like10AndFollow7ProgressGuide | undefined const ProgressGuideContext = React.createContext(undefined) @@ -56,8 +58,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) { const [activeProgressGuide, setActiveProgressGuide] = React.useState({ - guide: ProgressGuideName.Like10Posts, + guide: ProgressGuideName.Like10AndFollow7, numLikes: 0, + numFollows: 0, isComplete: false, }) @@ -68,10 +71,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) { const controls = React.useMemo(() => { return { startProgressGuide(guide: ProgressGuideName) { - if (guide === ProgressGuideName.Like10Posts) { + if (guide === ProgressGuideName.Like10AndFollow7) { setActiveProgressGuide({ - guide: ProgressGuideName.Like10Posts, + guide: ProgressGuideName.Like10AndFollow7, numLikes: 0, + numFollows: 0, isComplete: false, }) } @@ -86,7 +90,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) { if (guide?.isComplete) { return } - if (guide?.guide === ProgressGuideName.Like10Posts) { + if (guide?.guide === ProgressGuideName.Like10AndFollow7) { if (action === ProgressGuideAction.Like) { guide = { ...guide, @@ -100,10 +104,19 @@ export function Provider({children}: React.PropsWithChildren<{}>) { } if (guide.numLikes === 10) { tenthLikeToastRef.current?.open() - guide = { - ...guide, - isComplete: true, - } + } + } + if (action === ProgressGuideAction.Follow) { + guide = { + ...guide, + numFollows: (guide.numFollows || 0) + 1, + } + } + if (guide.numLikes >= 10 && guide.numFollows >= 7) { + tenthLikeToastRef.current?.open() + guide = { + ...guide, + isComplete: true, } } }