Drop following feed settings step

This commit is contained in:
Dan Abramov
2024-02-16 22:23:47 +00:00
parent a2f462e261
commit 2b69e55870
4 changed files with 9 additions and 180 deletions
-2
View File
@@ -133,8 +133,6 @@ export type TrackPropertiesMap = {
'OnboardingV2:StepSuggestedAccounts:End': { 'OnboardingV2:StepSuggestedAccounts:End': {
selectedAccountsLength: number selectedAccountsLength: number
} }
'OnboardingV2:StepFollowingFeed:Start': {}
'OnboardingV2:StepFollowingFeed:End': {}
'OnboardingV2:StepAlgoFeeds:Start': {} 'OnboardingV2:StepAlgoFeeds:Start': {}
'OnboardingV2:StepAlgoFeeds:End': { 'OnboardingV2:StepAlgoFeeds:End': {
selectedPrimaryFeeds: string[] selectedPrimaryFeeds: string[]
@@ -1,160 +0,0 @@
import React from 'react'
import {View} from 'react-native'
import {useLingui} from '@lingui/react'
import {msg, Trans} from '@lingui/macro'
import {atoms as a} from '#/alf'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
import {Text} from '#/components/Typography'
import {Divider} from '#/components/Divider'
import * as Toggle from '#/components/forms/Toggle'
import {useAnalytics} from '#/lib/analytics/analytics'
import {Context} from '#/screens/Onboarding/state'
import {
Title,
Description,
OnboardingControls,
} from '#/screens/Onboarding/Layout'
import {
usePreferencesQuery,
useSetFeedViewPreferencesMutation,
} from 'state/queries/preferences'
import {IconCircle} from '#/components/IconCircle'
export function StepFollowingFeed() {
const {_} = useLingui()
const {track} = useAnalytics()
const {dispatch} = React.useContext(Context)
const {data: preferences} = usePreferencesQuery()
const {mutate: setFeedViewPref, variables} =
useSetFeedViewPreferencesMutation()
const showReplies = !(
variables?.hideReplies ?? preferences?.feedViewPrefs.hideReplies
)
const showReposts = !(
variables?.hideReposts ?? preferences?.feedViewPrefs.hideReposts
)
const showQuotes = !(
variables?.hideQuotePosts ?? preferences?.feedViewPrefs.hideQuotePosts
)
const onContinue = React.useCallback(() => {
dispatch({type: 'next'})
track('OnboardingV2:StepFollowingFeed:End')
}, [track, dispatch])
React.useEffect(() => {
track('OnboardingV2:StepFollowingFeed:Start')
}, [track])
return (
// Hack for now to move the image container up
<View style={[a.align_start]}>
<IconCircle icon={FilterTimeline} style={[a.mb_2xl]} />
<Title>
<Trans>Your default feed is "Following"</Trans>
</Title>
<Description style={[a.mb_md]}>
<Trans>It shows posts from the people you follow as they happen.</Trans>
</Description>
<View style={[a.w_full]}>
<Toggle.Item
name="Show Replies" // no need to translate
label={_(msg`Show replies in Following feed`)}
value={showReplies}
onChange={() => {
setFeedViewPref({
hideReplies: showReplies,
})
}}>
<View
style={[
a.flex_row,
a.w_full,
a.py_lg,
a.justify_between,
a.align_center,
]}>
<Text style={[a.text_md, a.font_bold]}>
<Trans>Show replies in Following</Trans>
</Text>
<Toggle.Switch />
</View>
</Toggle.Item>
<Divider />
<Toggle.Item
name="Show Reposts" // no need to translate
label={_(msg`Show re-posts in Following feed`)}
value={showReposts}
onChange={() => {
setFeedViewPref({
hideReposts: showReposts,
})
}}>
<View
style={[
a.flex_row,
a.w_full,
a.py_lg,
a.justify_between,
a.align_center,
]}>
<Text style={[a.text_md, a.font_bold]}>
<Trans>Show reposts in Following</Trans>
</Text>
<Toggle.Switch />
</View>
</Toggle.Item>
<Divider />
<Toggle.Item
name="Show Quotes" // no need to translate
label={_(msg`Show quote-posts in Following feed`)}
value={showQuotes}
onChange={() => {
setFeedViewPref({
hideQuotePosts: showQuotes,
})
}}>
<View
style={[
a.flex_row,
a.w_full,
a.py_lg,
a.justify_between,
a.align_center,
]}>
<Text style={[a.text_md, a.font_bold]}>
<Trans>Show quotes in Following</Trans>
</Text>
<Toggle.Switch />
</View>
</Toggle.Item>
</View>
<Description style={[a.mt_lg]}>
<Trans>You can change these settings later.</Trans>
</Description>
<OnboardingControls.Portal>
<Button
variant="gradient"
color="gradient_sky"
size="large"
label={_(msg`Continue to next step`)}
onPress={onContinue}>
<ButtonText>
<Trans>Continue</Trans>
</ButtonText>
<ButtonIcon icon={ChevronRight} position="right" />
</Button>
</OnboardingControls.Portal>
</View>
)
}
-2
View File
@@ -8,7 +8,6 @@ import {Context, initialState, reducer} from '#/screens/Onboarding/state'
import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout' import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout'
import {StepInterests} from '#/screens/Onboarding/StepInterests' import {StepInterests} from '#/screens/Onboarding/StepInterests'
import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts' import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts'
import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed'
import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds' import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds'
import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds' import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds'
import {StepFinished} from '#/screens/Onboarding/StepFinished' import {StepFinished} from '#/screens/Onboarding/StepFinished'
@@ -58,7 +57,6 @@ export function Onboarding() {
{state.activeStep === 'suggestedAccounts' && ( {state.activeStep === 'suggestedAccounts' && (
<StepSuggestedAccounts /> <StepSuggestedAccounts />
)} )}
{state.activeStep === 'followingFeed' && <StepFollowingFeed />}
{state.activeStep === 'algoFeeds' && <StepAlgoFeeds />} {state.activeStep === 'algoFeeds' && <StepAlgoFeeds />}
{state.activeStep === 'topicalFeeds' && <StepTopicalFeeds />} {state.activeStep === 'topicalFeeds' && <StepTopicalFeeds />}
{state.activeStep === 'moderation' && <StepModeration />} {state.activeStep === 'moderation' && <StepModeration />}
+9 -16
View File
@@ -8,7 +8,6 @@ export type OnboardingState = {
activeStep: activeStep:
| 'interests' | 'interests'
| 'suggestedAccounts' | 'suggestedAccounts'
| 'followingFeed'
| 'algoFeeds' | 'algoFeeds'
| 'topicalFeeds' | 'topicalFeeds'
| 'moderation' | 'moderation'
@@ -70,7 +69,7 @@ export type ApiResponseMap = {
export const initialState: OnboardingState = { export const initialState: OnboardingState = {
hasPrev: false, hasPrev: false,
totalSteps: 7, totalSteps: 6,
activeStep: 'interests', activeStep: 'interests',
activeStepIndex: 1, activeStepIndex: 1,
@@ -142,20 +141,17 @@ export function reducer(
next.activeStep = 'suggestedAccounts' next.activeStep = 'suggestedAccounts'
next.activeStepIndex = 2 next.activeStepIndex = 2
} else if (s.activeStep === 'suggestedAccounts') { } else if (s.activeStep === 'suggestedAccounts') {
next.activeStep = 'followingFeed'
next.activeStepIndex = 3
} else if (s.activeStep === 'followingFeed') {
next.activeStep = 'algoFeeds' next.activeStep = 'algoFeeds'
next.activeStepIndex = 4 next.activeStepIndex = 3
} else if (s.activeStep === 'algoFeeds') { } else if (s.activeStep === 'algoFeeds') {
next.activeStep = 'topicalFeeds' next.activeStep = 'topicalFeeds'
next.activeStepIndex = 5 next.activeStepIndex = 4
} else if (s.activeStep === 'topicalFeeds') { } else if (s.activeStep === 'topicalFeeds') {
next.activeStep = 'moderation' next.activeStep = 'moderation'
next.activeStepIndex = 6 next.activeStepIndex = 5
} else if (s.activeStep === 'moderation') { } else if (s.activeStep === 'moderation') {
next.activeStep = 'finished' next.activeStep = 'finished'
next.activeStepIndex = 7 next.activeStepIndex = 6
} }
break break
} }
@@ -163,21 +159,18 @@ export function reducer(
if (s.activeStep === 'suggestedAccounts') { if (s.activeStep === 'suggestedAccounts') {
next.activeStep = 'interests' next.activeStep = 'interests'
next.activeStepIndex = 1 next.activeStepIndex = 1
} else if (s.activeStep === 'followingFeed') { } else if (s.activeStep === 'algoFeeds') {
next.activeStep = 'suggestedAccounts' next.activeStep = 'suggestedAccounts'
next.activeStepIndex = 2 next.activeStepIndex = 2
} else if (s.activeStep === 'algoFeeds') {
next.activeStep = 'followingFeed'
next.activeStepIndex = 3
} else if (s.activeStep === 'topicalFeeds') { } else if (s.activeStep === 'topicalFeeds') {
next.activeStep = 'algoFeeds' next.activeStep = 'algoFeeds'
next.activeStepIndex = 4 next.activeStepIndex = 3
} else if (s.activeStep === 'moderation') { } else if (s.activeStep === 'moderation') {
next.activeStep = 'topicalFeeds' next.activeStep = 'topicalFeeds'
next.activeStepIndex = 5 next.activeStepIndex = 4
} else if (s.activeStep === 'finished') { } else if (s.activeStep === 'finished') {
next.activeStep = 'moderation' next.activeStep = 'moderation'
next.activeStepIndex = 6 next.activeStepIndex = 5
} }
break break
} }