acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Adjust Feed wizard, delete unused code

Browse Source
This commit is contained in:
Dan Abramov
2024-10-22 21:39:21 +01:00
parent d86805f532
commit 73d609c1bf
5 changed files with 27 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Feeds/Wizard/State.tsx
+2 -41
View File
@@ -5,13 +5,10 @@ import {
AppBskyGraphStarterpack,
} from '@atproto/api'
import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
import {msg} from '@lingui/macro'
import {STARTER_PACK_MAX_SIZE} from '#/lib/constants'
import {useSession} from '#/state/session'
import * as Toast from '#/view/com/util/Toast'
const steps = ['Details', 'Profiles', 'Feeds'] as const
const steps = ['Details'] as const
type Step = (typeof steps)[number]
type Action =
@@ -20,10 +17,6 @@ type Action =
| {type: 'SetCanNext'; canNext: boolean}
| {type: 'SetName'; name: string}
| {type: 'SetDescription'; description: string}
| {type: 'AddProfile'; profile: AppBskyActorDefs.ProfileViewBasic}
| {type: 'RemoveProfile'; profileDid: string}
| {type: 'AddFeed'; feed: GeneratorView}
| {type: 'RemoveFeed'; feedUri: string}
| {type: 'SetProcessing'; processing: boolean}
| {type: 'SetError'; error: string}
@@ -52,7 +45,7 @@ function reducer(state: State, action: Action): State {
// -- Navigation
const currentIndex = steps.indexOf(state.currentStep)
if (action.type === 'Next' && state.currentStep !== 'Feeds') {
if (action.type === 'Next') {
updatedState = {
...state,
currentStep: steps[currentIndex + 1],
@@ -73,38 +66,6 @@ function reducer(state: State, action: Action): State {
case 'SetDescription':
updatedState = {...state, description: action.description}
break
case 'AddProfile':
if (state.profiles.length > STARTER_PACK_MAX_SIZE) {
Toast.show(
msg`You may only add up to ${STARTER_PACK_MAX_SIZE} profiles`
.message ?? '',
'info',
)
} else {
updatedState = {...state, profiles: [...state.profiles, action.profile]}
}
break
case 'RemoveProfile':
updatedState = {
...state,
profiles: state.profiles.filter(
profile => profile.did !== action.profileDid,
),
}
break
case 'AddFeed':
if (state.feeds.length >= 3) {
Toast.show(msg`You may only add up to 3 feeds`.message ?? '', 'info')
} else {
updatedState = {...state, feeds: [...state.feeds, action.feed]}
}
break
case 'RemoveFeed':
updatedState = {
...state,
feeds: state.feeds.filter(f => f.uri !== action.feedUri),
}
break
case 'SetProcessing':
updatedState = {...state, processing: action.processing}
break
src/screens/Feeds/Wizard/StepDetails.tsx
+5 -7
View File
@@ -29,24 +29,22 @@ export function StepDetails() {
<View style={[a.gap_md, a.align_center, a.px_md, a.mb_md]}>
<StarterPack width={90} gradient="sky" />
<Text style={[a.font_bold, a.text_3xl]}>
<Trans>Invites, but personal</Trans>
<Trans>Your own feed</Trans>
</Text>
<Text style={[a.text_center, a.text_md, a.px_md]}>
<Trans>
Invite your friends to follow your favorite feeds and people
</Trans>
<Trans>Curate your and other people's posts into a feed</Trans>
</Text>
</View>
<View>
<TextField.LabelText>
<Trans>What do you want to call your starter pack?</Trans>
<Trans>What do you want to call your feed?</Trans>
</TextField.LabelText>
<TextField.Root>
<TextField.Input
label={_(
msg`${
currentProfile?.displayName || currentProfile?.handle
}'s starter pack`,
}'s feed`,
)}
value={state.name}
onChangeText={text => dispatch({type: 'SetName', name: text})}
@@ -67,7 +65,7 @@ export function StepDetails() {
label={_(
msg`${
currentProfile?.displayName || currentProfile?.handle
}'s favorite feeds and people - join me!`,
}'s favorite posts`,
)}
value={state.description}
onChangeText={text =>
src/screens/Feeds/Wizard/StepFeeds.tsx
-126
View File
@@ -1,126 +0,0 @@
import React, {useState} from 'react'
import {ListRenderItemInfo, View} from 'react-native'
import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
import {AppBskyFeedDefs, ModerationOpts} from '@atproto/api'
import {Trans} from '@lingui/macro'
import {DISCOVER_FEED_URI} from '#/lib/constants'
import {useA11y} from '#/state/a11y'
import {
useGetPopularFeedsQuery,
usePopularFeedsSearch,
useSavedFeeds,
} from '#/state/queries/feed'
import {List} from '#/view/com/util/List'
import {useWizardState} from '#/screens/StarterPack/Wizard/State'
import {atoms as a, useTheme} from '#/alf'
import {SearchInput} from '#/components/forms/SearchInput'
import {useThrottledValue} from '#/components/hooks/useThrottledValue'
import {Loader} from '#/components/Loader'
import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardListCard'
import {Text} from '#/components/Typography'
function keyExtractor(item: AppBskyFeedDefs.GeneratorView) {
return item.uri
}
export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
const t = useTheme()
const [state, dispatch] = useWizardState()
const [query, setQuery] = useState('')
const throttledQuery = useThrottledValue(query, 500)
const {screenReaderEnabled} = useA11y()
const {data: savedFeedsAndLists, isFetchedAfterMount: isFetchedSavedFeeds} =
useSavedFeeds()
const savedFeeds = savedFeedsAndLists?.feeds
.filter(f => f.type === 'feed' && f.view.uri !== DISCOVER_FEED_URI)
.map(f => f.view) as AppBskyFeedDefs.GeneratorView[]
const {
data: popularFeedsPages,
fetchNextPage,
isLoading: isLoadingPopularFeeds,
} = useGetPopularFeedsQuery({
limit: 30,
})
const popularFeeds = popularFeedsPages?.pages.flatMap(p => p.feeds) ?? []
// If we have saved feeds already loaded, display them immediately
// Then, when popular feeds have loaded we can concat them to the saved feeds
const suggestedFeeds =
savedFeeds || isFetchedSavedFeeds
? popularFeeds
? savedFeeds.concat(
popularFeeds.filter(f => !savedFeeds.some(sf => sf.uri === f.uri)),
)
: savedFeeds
: undefined
const {data: searchedFeeds, isFetching: isFetchingSearchedFeeds} =
usePopularFeedsSearch({query: throttledQuery})
const isLoading =
!isFetchedSavedFeeds || isLoadingPopularFeeds || isFetchingSearchedFeeds
const renderItem = ({
item,
}: ListRenderItemInfo<AppBskyFeedDefs.GeneratorView>) => {
return (
<WizardFeedCard
generator={item}
btnType="checkbox"
state={state}
dispatch={dispatch}
moderationOpts={moderationOpts}
/>
)
}
return (
<ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
<View style={[a.border_b, t.atoms.border_contrast_medium]}>
<View style={[a.py_sm, a.px_md, {height: 60}]}>
<SearchInput
value={query}
onChangeText={t => setQuery(t)}
onClearText={() => setQuery('')}
/>
</View>
</View>
<List
data={query ? searchedFeeds : suggestedFeeds}
renderItem={renderItem}
keyExtractor={keyExtractor}
onEndReached={
!query && !screenReaderEnabled ? () => fetchNextPage() : undefined
}
onEndReachedThreshold={2}
renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
keyboardShouldPersistTaps="handled"
disableFullWindowScroll={true}
sideBorders={false}
style={{flex: 1}}
ListEmptyComponent={
<View style={[a.flex_1, a.align_center, a.mt_lg, a.px_lg]}>
{isLoading ? (
<Loader size="lg" />
) : (
<Text
style={[
a.font_bold,
a.text_lg,
a.text_center,
a.mt_lg,
a.leading_snug,
]}>
<Trans>No feeds found. Try searching for something else.</Trans>
</Text>
)}
</View>
}
/>
</ScreenTransition>
)
}
src/screens/Feeds/Wizard/StepProfiles.tsx
-110
View File
@@ -1,110 +0,0 @@
import React, {useState} from 'react'
import {ListRenderItemInfo, View} from 'react-native'
import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
import {Trans} from '@lingui/macro'
import {isNative} from '#/platform/detection'
import {useA11y} from '#/state/a11y'
import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
import {useActorSearchPaginated} from '#/state/queries/actor-search'
import {List} from '#/view/com/util/List'
import {useWizardState} from '#/screens/StarterPack/Wizard/State'
import {atoms as a, useTheme} from '#/alf'
import {SearchInput} from '#/components/forms/SearchInput'
import {Loader} from '#/components/Loader'
import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard'
import {Text} from '#/components/Typography'
function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
return item?.did ?? ''
}
export function StepProfiles({
moderationOpts,
}: {
moderationOpts: ModerationOpts
}) {
const t = useTheme()
const [state, dispatch] = useWizardState()
const [query, setQuery] = useState('')
const {screenReaderEnabled} = useA11y()
const {
data: topPages,
fetchNextPage,
isLoading: isLoadingTopPages,
} = useActorSearchPaginated({
query: encodeURIComponent('*'),
})
const topFollowers = topPages?.pages
.flatMap(p => p.actors)
.filter(p => !p.associated?.labeler)
const {data: resultsUnfiltered, isFetching: isFetchingResults} =
useActorAutocompleteQuery(query, true, 12)
const results = resultsUnfiltered?.filter(p => !p.associated?.labeler)
const isLoading = isLoadingTopPages || isFetchingResults
const renderItem = ({
item,
}: ListRenderItemInfo<AppBskyActorDefs.ProfileViewBasic>) => {
return (
<WizardProfileCard
profile={item}
btnType="checkbox"
state={state}
dispatch={dispatch}
moderationOpts={moderationOpts}
/>
)
}
return (
<ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
<View style={[a.border_b, t.atoms.border_contrast_medium]}>
<View style={[a.py_sm, a.px_md, {height: 60}]}>
<SearchInput
value={query}
onChangeText={setQuery}
onClearText={() => setQuery('')}
/>
</View>
</View>
<List
data={query ? results : topFollowers}
renderItem={renderItem}
keyExtractor={keyExtractor}
renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
keyboardShouldPersistTaps="handled"
disableFullWindowScroll={true}
sideBorders={false}
style={[a.flex_1]}
onEndReached={
!query && !screenReaderEnabled ? () => fetchNextPage() : undefined
}
onEndReachedThreshold={isNative ? 2 : 0.25}
ListEmptyComponent={
<View style={[a.flex_1, a.align_center, a.mt_lg, a.px_lg]}>
{isLoading ? (
<Loader size="lg" />
) : (
<Text
style={[
a.font_bold,
a.text_lg,
a.text_center,
a.mt_lg,
a.leading_snug,
]}>
<Trans>Nobody was found. Try searching for someone else.</Trans>
</Text>
)}
</View>
}
/>
</ScreenTransition>
)
}
src/screens/Feeds/Wizard/index.tsx
+20 -311
View File
@@ -1,37 +1,27 @@
import React from 'react'
import {Keyboard, TouchableOpacity, View} from 'react-native'
import {TouchableOpacity, View} from 'react-native'
import {
KeyboardAwareScrollView,
useKeyboardController,
} from 'react-native-keyboard-controller'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {Image} from 'expo-image'
import {
AppBskyActorDefs,
AppBskyGraphDefs,
AtUri,
ModerationOpts,
} from '@atproto/api'
import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
import {AppBskyGraphDefs, AtUri} from '@atproto/api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg, Plural, Trans} from '@lingui/macro'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useFocusEffect, useNavigation} from '@react-navigation/native'
import {NativeStackScreenProps} from '@react-navigation/native-stack'
import {HITSLOP_10, STARTER_PACK_MAX_SIZE} from '#/lib/constants'
import {HITSLOP_10} from '#/lib/constants'
import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
import {logEvent} from '#/lib/statsig/statsig'
import {sanitizeDisplayName} from '#/lib/strings/display-names'
import {sanitizeHandle} from '#/lib/strings/handles'
import {enforceLen} from '#/lib/strings/helpers'
import {
getStarterPackOgCard,
parseStarterPackUri,
} from '#/lib/strings/starter-pack'
import {logger} from '#/logger'
import {isAndroid, isNative, isWeb} from '#/platform/detection'
import {isAndroid, isWeb} from '#/platform/detection'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useAllListMembersQuery} from '#/state/queries/list-members'
import {useProfileQuery} from '#/state/queries/profile'
@@ -43,21 +33,15 @@ import {
import {useSession} from '#/state/session'
import {useSetMinimalShellMode} from '#/state/shell'
import * as Toast from '#/view/com/util/Toast'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {CenteredView} from '#/view/com/util/Views'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import {useDialogControl} from '#/components/Dialog'
import * as Layout from '#/components/Layout'
import {ListMaybePlaceholder} from '#/components/Lists'
import {Loader} from '#/components/Loader'
import {WizardEditListDialog} from '#/components/StarterPack/Wizard/WizardEditListDialog'
import {Text} from '#/components/Typography'
import {useWizardState, WizardStep} from './State'
import {Provider} from './State'
import {StepDetails} from './StepDetails'
import {StepFeeds} from './StepFeeds'
import {StepProfiles} from './StepProfiles'
export function Wizard({
route,
@@ -123,8 +107,6 @@ export function Wizard({
<WizardInner
currentStarterPack={starterPack}
currentListItems={listItems}
profile={profile}
moderationOpts={moderationOpts}
/>
</Provider>
</Layout.Screen>
@@ -134,13 +116,9 @@ export function Wizard({
function WizardInner({
currentStarterPack,
currentListItems,
profile,
moderationOpts,
}: {
currentStarterPack?: AppBskyGraphDefs.StarterPackView
currentListItems?: AppBskyGraphDefs.ListItemView[]
profile: AppBskyActorDefs.ProfileViewBasic
moderationOpts: ModerationOpts
}) {
const navigation = useNavigation<NavigationProp>()
const {_} = useLingui()
@@ -183,16 +161,8 @@ function WizardInner({
{header: string; nextBtn: string; subtitle?: string}
> = {
Details: {
header: _(msg`Starter Pack`),
nextBtn: _(msg`Next`),
},
Profiles: {
header: _(msg`Choose People`),
nextBtn: _(msg`Next`),
},
Feeds: {
header: _(msg`Choose Feeds`),
nextBtn: state.feeds.length === 0 ? _(msg`Skip`) : _(msg`Finish`),
header: _(msg`Create a Feed`),
nextBtn: _(msg`Finish`),
},
}
const currUiStrings = wizardUiStrings[state.currentStep]
@@ -263,22 +233,6 @@ function WizardInner({
}
}
const onNext = () => {
if (state.currentStep === 'Feeds') {
submit()
return
}
const keyboardVisible = Keyboard.isVisible()
Keyboard.dismiss()
setTimeout(
() => {
dispatch({type: 'Next'})
},
keyboardVisible ? 16 : 0,
)
}
return (
<CenteredView style={[a.flex_1]} sideBorders>
<View
@@ -321,35 +275,22 @@ function WizardInner({
<View style={[{width: 65}]} />
</View>
<Container>
{state.currentStep === 'Details' ? (
<StepDetails />
) : state.currentStep === 'Profiles' ? (
<StepProfiles moderationOpts={moderationOpts} />
) : state.currentStep === 'Feeds' ? (
<StepFeeds moderationOpts={moderationOpts} />
) : null}
<Container onFinish={submit}>
{state.currentStep === 'Details' ? <StepDetails /> : null}
</Container>
{state.currentStep !== 'Details' && (
<Footer
onNext={onNext}
nextBtnText={currUiStrings.nextBtn}
moderationOpts={moderationOpts}
profile={profile}
/>
)}
</CenteredView>
)
}
function Container({children}: {children: React.ReactNode}) {
function Container({
children,
onFinish,
}: {
children: React.ReactNode
onFinish: () => void
}) {
const {_} = useLingui()
const [state, dispatch] = useWizardState()
if (state.currentStep === 'Profiles' || state.currentStep === 'Feeds') {
return <View style={[a.flex_1]}>{children}</View>
}
const [state] = useWizardState()
return (
<KeyboardAwareScrollView
@@ -359,14 +300,14 @@ function Container({children}: {children: React.ReactNode}) {
{state.currentStep === 'Details' && (
<>
<Button
label={_(msg`Next`)}
label={_(msg`Finish`)}
variant="solid"
color="primary"
size="large"
style={[a.mx_xl, a.mb_lg, {marginTop: 35}]}
onPress={() => dispatch({type: 'Next'})}>
onPress={onFinish}>
<ButtonText>
<Trans>Next</Trans>
<Trans>Finish</Trans>
</ButtonText>
</Button>
</>
@@ -374,235 +315,3 @@ function Container({children}: {children: React.ReactNode}) {
</KeyboardAwareScrollView>
)
}
function Footer({
onNext,
nextBtnText,
moderationOpts,
profile,
}: {
onNext: () => void
nextBtnText: string
moderationOpts: ModerationOpts
profile: AppBskyActorDefs.ProfileViewBasic
}) {
const {_} = useLingui()
const t = useTheme()
const [state, dispatch] = useWizardState()
const editDialogControl = useDialogControl()
const {bottom: bottomInset} = useSafeAreaInsets()
const items =
state.currentStep === 'Profiles'
? [profile, ...state.profiles]
: state.feeds
const isEditEnabled =
(state.currentStep === 'Profiles' && items.length > 1) ||
(state.currentStep === 'Feeds' && items.length > 0)
const minimumItems = state.currentStep === 'Profiles' ? 8 : 0
const textStyles = [a.text_md]
return (
<View
style={[
a.border_t,
a.align_center,
a.px_lg,
a.pt_xl,
a.gap_md,
t.atoms.bg,
t.atoms.border_contrast_medium,
{
paddingBottom: a.pb_lg.paddingBottom + bottomInset,
},
isNative && [
a.border_l,
a.border_r,
t.atoms.shadow_md,
{
borderTopLeftRadius: 14,
borderTopRightRadius: 14,
},
],
]}>
{items.length > minimumItems && (
<View style={[a.absolute, {right: 14, top: 31}]}>
<Text style={[a.font_bold]}>
{items.length}/
{state.currentStep === 'Profiles' ? STARTER_PACK_MAX_SIZE : 3}
</Text>
</View>
)}
<View style={[a.flex_row, a.gap_xs]}>
{items.slice(0, 6).map((p, index) => (
<UserAvatar
key={index}
avatar={p.avatar}
size={32}
type={state.currentStep === 'Profiles' ? 'user' : 'algo'}
/>
))}
</View>
{
state.currentStep === 'Profiles' ? (
<Text style={[a.text_center, textStyles]}>
{
items.length < 2 ? (
<Trans>
It's just you right now! Add more people to your starter pack
by searching above.
</Trans>
) : items.length === 2 ? (
<Trans>
<Text style={[a.font_bold, textStyles]}>You</Text> and
<Text> </Text>
<Text style={[a.font_bold, textStyles]}>
{getName(items[1] /* [0] is self, skip it */)}{' '}
</Text>
are included in your starter pack
</Trans>
) : items.length > 2 ? (
<Trans context="profiles">
<Text style={[a.font_bold, textStyles]}>
{getName(items[1] /* [0] is self, skip it */)},{' '}
</Text>
<Text style={[a.font_bold, textStyles]}>
{getName(items[2])},{' '}
</Text>
and{' '}
<Plural
value={items.length - 2}
one="# other"
other="# others"
/>{' '}
are included in your starter pack
</Trans>
) : null /* Should not happen. */
}
</Text>
) : state.currentStep === 'Feeds' ? (
items.length === 0 ? (
<View style={[a.gap_sm]}>
<Text style={[a.font_bold, a.text_center, textStyles]}>
<Trans>Add some feeds to your starter pack!</Trans>
</Text>
<Text style={[a.text_center, textStyles]}>
<Trans>
Search for feeds that you want to suggest to others.
</Trans>
</Text>
</View>
) : (
<Text style={[a.text_center, textStyles]}>
{
items.length === 1 ? (
<Trans>
<Text style={[a.font_bold, textStyles]}>
{getName(items[0])}
</Text>{' '}
is included in your starter pack
</Trans>
) : items.length === 2 ? (
<Trans>
<Text style={[a.font_bold, textStyles]}>
{getName(items[0])}
</Text>{' '}
and
<Text> </Text>
<Text style={[a.font_bold, textStyles]}>
{getName(items[1])}{' '}
</Text>
are included in your starter pack
</Trans>
) : items.length > 2 ? (
<Trans context="feeds">
<Text style={[a.font_bold, textStyles]}>
{getName(items[0])},{' '}
</Text>
<Text style={[a.font_bold, textStyles]}>
{getName(items[1])},{' '}
</Text>
and{' '}
<Plural
value={items.length - 2}
one="# other"
other="# others"
/>{' '}
are included in your starter pack
</Trans>
) : null /* Should not happen. */
}
</Text>
)
) : null /* Should not happen. */
}
<View
style={[
a.flex_row,
a.w_full,
a.justify_between,
a.align_center,
isNative ? a.mt_sm : a.mt_md,
]}>
{isEditEnabled ? (
<Button
label={_(msg`Edit`)}
variant="solid"
color="secondary"
size="small"
style={{width: 70}}
onPress={editDialogControl.open}>
<ButtonText>
<Trans>Edit</Trans>
</ButtonText>
</Button>
) : (
<View style={{width: 70, height: 35}} />
)}
{state.currentStep === 'Profiles' && items.length < 8 ? (
<>
<Text
style={[a.font_bold, textStyles, t.atoms.text_contrast_medium]}>
<Trans>Add {8 - items.length} more to continue</Trans>
</Text>
<View style={{width: 70}} />
</>
) : (
<Button
label={nextBtnText}
variant="solid"
color="primary"
size="small"
onPress={onNext}
disabled={!state.canNext || state.processing}>
<ButtonText>{nextBtnText}</ButtonText>
{state.processing && <Loader size="xs" style={{color: 'white'}} />}
</Button>
)}
</View>
<WizardEditListDialog
control={editDialogControl}
state={state}
dispatch={dispatch}
moderationOpts={moderationOpts}
profile={profile}
/>
</View>
)
}
function getName(item: AppBskyActorDefs.ProfileViewBasic | GeneratorView) {
if (typeof item.displayName === 'string') {
return enforceLen(sanitizeDisplayName(item.displayName), 28, true)
} else if (typeof item.handle === 'string') {
return enforceLen(sanitizeHandle(item.handle), 28, true)
}
return ''
}