diff options
Diffstat (limited to 'src/view/com/auth/onboarding/RecommendedFollows.tsx')
| -rw-r--r-- | src/view/com/auth/onboarding/RecommendedFollows.tsx | 272 |
1 files changed, 0 insertions, 272 deletions
diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx deleted file mode 100644 index a840f949e..000000000 --- a/src/view/com/auth/onboarding/RecommendedFollows.tsx +++ /dev/null @@ -1,272 +0,0 @@ -import React from 'react' -import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' -import {AppBskyActorDefs, moderateProfile} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {logger} from '#/logger' -import {useModerationOpts} from '#/state/queries/preferences' -import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows' -import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Button} from 'view/com/util/forms/Button' -import {Mobile, TabletOrDesktop} from 'view/com/util/layouts/Breakpoints' -import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' -import {Text} from 'view/com/util/text/Text' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {RecommendedFollowsItem} from './RecommendedFollowsItem' - -type Props = { - next: () => void -} -export function RecommendedFollows({next}: Props) { - const pal = usePalette('default') - const {_} = useLingui() - const {isTabletOrMobile} = useWebMediaQueries() - const {data: suggestedFollows} = useSuggestedFollowsQuery() - const getSuggestedFollowsByActor = useGetSuggestedFollowersByActor() - const [additionalSuggestions, setAdditionalSuggestions] = React.useState<{ - [did: string]: AppBskyActorDefs.ProfileView[] - }>({}) - const existingDids = React.useRef<string[]>([]) - const moderationOpts = useModerationOpts() - - const title = ( - <> - <Trans> - <Text - style={[ - pal.textLight, - tdStyles.title1, - isTabletOrMobile && tdStyles.title1Small, - ]}> - Follow some - </Text> - <Text - style={[ - pal.link, - tdStyles.title2, - isTabletOrMobile && tdStyles.title2Small, - ]}> - Recommended - </Text> - <Text - style={[ - pal.link, - tdStyles.title2, - isTabletOrMobile && tdStyles.title2Small, - ]}> - Users - </Text> - </Trans> - <Text type="2xl-medium" style={[pal.textLight, tdStyles.description]}> - <Trans> - Follow some users to get started. We can recommend you more users - based on who you find interesting. - </Trans> - </Text> - <View - style={{ - flexDirection: 'row', - justifyContent: 'flex-end', - marginTop: 20, - }}> - <Button onPress={next} testID="continueBtn"> - <View - style={{ - flexDirection: 'row', - alignItems: 'center', - paddingLeft: 2, - gap: 6, - }}> - <Text - type="2xl-medium" - style={{color: '#fff', position: 'relative', top: -1}}> - <Trans context="action">Done</Trans> - </Text> - <FontAwesomeIcon icon="angle-right" color="#fff" size={14} /> - </View> - </Button> - </View> - </> - ) - - const suggestions = React.useMemo(() => { - if (!suggestedFollows) return [] - - const additional = Object.entries(additionalSuggestions) - const items = suggestedFollows.pages.flatMap(page => page.actors) - - outer: while (additional.length) { - const additionalAccount = additional.shift() - - if (!additionalAccount) break - - const [followedUser, relatedAccounts] = additionalAccount - - for (let i = 0; i < items.length; i++) { - if (items[i].did === followedUser) { - items.splice(i + 1, 0, ...relatedAccounts) - continue outer - } - } - } - - existingDids.current = items.map(i => i.did) - - return items - }, [suggestedFollows, additionalSuggestions]) - - const onFollowStateChange = React.useCallback( - async ({following, did}: {following: boolean; did: string}) => { - if (following) { - try { - const {suggestions: results} = await getSuggestedFollowsByActor(did) - - if (results.length) { - const deduped = results.filter( - r => !existingDids.current.find(did => did === r.did), - ) - setAdditionalSuggestions(s => ({ - ...s, - [did]: deduped.slice(0, 3), - })) - } - } catch (e) { - logger.error('RecommendedFollows: failed to get suggestions', { - message: e, - }) - } - } - - // not handling the unfollow case - }, - [existingDids, getSuggestedFollowsByActor, setAdditionalSuggestions], - ) - - return ( - <> - <TabletOrDesktop> - <TitleColumnLayout - testID="recommendedFollowsOnboarding" - title={title} - horizontal - titleStyle={isTabletOrMobile ? undefined : {minWidth: 470}} - contentStyle={{paddingHorizontal: 0}}> - {!suggestedFollows || !moderationOpts ? ( - <ActivityIndicator size="large" /> - ) : ( - <FlatList - data={suggestions} - renderItem={({item}) => ( - <RecommendedFollowsItem - profile={item} - onFollowStateChange={onFollowStateChange} - moderation={moderateProfile(item, moderationOpts)} - /> - )} - keyExtractor={item => item.did} - style={{flex: 1}} - /> - )} - </TitleColumnLayout> - </TabletOrDesktop> - - <Mobile> - <View style={[mStyles.container]} testID="recommendedFollowsOnboarding"> - <View> - <ViewHeader - title={_(msg`Recommended Users`)} - showBackButton={false} - showOnDesktop - /> - <Text type="lg-medium" style={[pal.text, mStyles.header]}> - <Trans> - Check out some recommended users. Follow them to see similar - users. - </Trans> - </Text> - </View> - {!suggestedFollows || !moderationOpts ? ( - <ActivityIndicator size="large" /> - ) : ( - <FlatList - data={suggestions} - renderItem={({item}) => ( - <RecommendedFollowsItem - profile={item} - onFollowStateChange={onFollowStateChange} - moderation={moderateProfile(item, moderationOpts)} - /> - )} - keyExtractor={item => item.did} - style={{flex: 1}} - showsVerticalScrollIndicator={false} - /> - )} - <Button - onPress={next} - label={_(msg`Continue`)} - testID="continueBtn" - style={mStyles.button} - labelStyle={mStyles.buttonText} - /> - </View> - </Mobile> - </> - ) -} - -const tdStyles = StyleSheet.create({ - container: { - flex: 1, - marginHorizontal: 16, - justifyContent: 'space-between', - }, - title1: { - fontSize: 36, - fontWeight: '800', - textAlign: 'right', - }, - title1Small: { - fontSize: 24, - }, - title2: { - fontSize: 58, - fontWeight: '800', - textAlign: 'right', - }, - title2Small: { - fontSize: 36, - }, - description: { - maxWidth: 400, - marginTop: 10, - marginLeft: 'auto', - textAlign: 'right', - }, -}) - -const mStyles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'space-between', - }, - header: { - marginBottom: 16, - marginHorizontal: 16, - }, - button: { - marginBottom: 16, - marginHorizontal: 16, - marginTop: 16, - alignItems: 'center', - }, - buttonText: { - textAlign: 'center', - fontSize: 18, - paddingVertical: 4, - }, -}) |