Add 7 follows to the progress guide

This commit is contained in:
Paul Frazee
2024-07-01 18:38:31 -07:00
parent 9513b574df
commit 7d3368cc14
2 changed files with 33 additions and 15 deletions
+8 -3
View File
@@ -18,7 +18,7 @@ import {ProgressGuideTask} from './Task'
export function ProgressGuideList({style}: {style: StyleProp<ViewStyle>}) { export function ProgressGuideList({style}: {style: StyleProp<ViewStyle>}) {
const t = useTheme() const t = useTheme()
const {_} = useLingui() const {_} = useLingui()
const guide = useProgressGuide(ProgressGuideName.Like10Posts) const guide = useProgressGuide(ProgressGuideName.Like10AndFollow7)
const {captureAction, endProgressGuide} = useProgressGuideControls() const {captureAction, endProgressGuide} = useProgressGuideControls()
React.useEffect(() => { React.useEffect(() => {
@@ -26,7 +26,7 @@ export function ProgressGuideList({style}: {style: StyleProp<ViewStyle>}) {
return () => clearInterval(i) return () => clearInterval(i)
}, [captureAction]) }, [captureAction])
if (guide?.guide === ProgressGuideName.Like10Posts) { if (guide?.guide === ProgressGuideName.Like10AndFollow7) {
return ( return (
<View style={[a.flex_col, a.gap_md, style]}> <View style={[a.flex_col, a.gap_md, style]}>
<View style={[a.flex_row, a.align_center]}> <View style={[a.flex_row, a.align_center]}>
@@ -43,7 +43,7 @@ export function ProgressGuideList({style}: {style: StyleProp<ViewStyle>}) {
variant="ghost" variant="ghost"
size="tiny" size="tiny"
color="secondary" color="secondary"
label={_(msg`Dismiss get started`)} label={_(msg`Dismiss getting started guide`)}
onPress={endProgressGuide}> onPress={endProgressGuide}>
<ButtonIcon icon={Times} /> <ButtonIcon icon={Times} />
</Button> </Button>
@@ -54,6 +54,11 @@ export function ProgressGuideList({style}: {style: StyleProp<ViewStyle>}) {
title={_(msg`Like 10 posts`)} title={_(msg`Like 10 posts`)}
subtitle={_(msg`Teach Discover what you like.`)} subtitle={_(msg`Teach Discover what you like.`)}
/> />
<ProgressGuideTask
current={guide.numFollows}
total={7}
title={_(msg`Follow 7 accounts`)}
/>
</View> </View>
) )
} }
+25 -12
View File
@@ -9,10 +9,11 @@ import {
export enum ProgressGuideAction { export enum ProgressGuideAction {
Like = 'like', Like = 'like',
Follow = 'follow',
} }
export enum ProgressGuideName { export enum ProgressGuideName {
Like10Posts = 'like-10-posts', Like10AndFollow7 = 'like-10-and-follow-7',
} }
interface BaseProgressGuide { interface BaseProgressGuide {
@@ -20,12 +21,13 @@ interface BaseProgressGuide {
isComplete: boolean isComplete: boolean
} }
interface Like10PostsProgressGuide extends BaseProgressGuide { interface Like10AndFollow7ProgressGuide extends BaseProgressGuide {
guide: ProgressGuideName.Like10Posts guide: ProgressGuideName.Like10AndFollow7
numLikes: number numLikes: number
numFollows: number
} }
type ProgressGuide = Like10PostsProgressGuide | undefined type ProgressGuide = Like10AndFollow7ProgressGuide | undefined
const ProgressGuideContext = React.createContext<ProgressGuide>(undefined) const ProgressGuideContext = React.createContext<ProgressGuide>(undefined)
@@ -56,8 +58,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const [activeProgressGuide, setActiveProgressGuide] = const [activeProgressGuide, setActiveProgressGuide] =
React.useState<ProgressGuide>({ React.useState<ProgressGuide>({
guide: ProgressGuideName.Like10Posts, guide: ProgressGuideName.Like10AndFollow7,
numLikes: 0, numLikes: 0,
numFollows: 0,
isComplete: false, isComplete: false,
}) })
@@ -68,10 +71,11 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
const controls = React.useMemo(() => { const controls = React.useMemo(() => {
return { return {
startProgressGuide(guide: ProgressGuideName) { startProgressGuide(guide: ProgressGuideName) {
if (guide === ProgressGuideName.Like10Posts) { if (guide === ProgressGuideName.Like10AndFollow7) {
setActiveProgressGuide({ setActiveProgressGuide({
guide: ProgressGuideName.Like10Posts, guide: ProgressGuideName.Like10AndFollow7,
numLikes: 0, numLikes: 0,
numFollows: 0,
isComplete: false, isComplete: false,
}) })
} }
@@ -86,7 +90,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
if (guide?.isComplete) { if (guide?.isComplete) {
return return
} }
if (guide?.guide === ProgressGuideName.Like10Posts) { if (guide?.guide === ProgressGuideName.Like10AndFollow7) {
if (action === ProgressGuideAction.Like) { if (action === ProgressGuideAction.Like) {
guide = { guide = {
...guide, ...guide,
@@ -100,10 +104,19 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
} }
if (guide.numLikes === 10) { if (guide.numLikes === 10) {
tenthLikeToastRef.current?.open() 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,
} }
} }
} }