diff --git a/src/lib/build-flags.ts b/src/lib/build-flags.ts index f85cbd9f84..cf05114e02 100644 --- a/src/lib/build-flags.ts +++ b/src/lib/build-flags.ts @@ -1,3 +1,2 @@ export const LOGIN_INCLUDE_DEV_SERVERS = true export const PWI_ENABLED = true -export const NEW_ONBOARDING_ENABLED = true diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx deleted file mode 100644 index bdb7f27c81..0000000000 --- a/src/view/com/auth/Onboarding.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react' -import {SafeAreaView, Platform} from 'react-native' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {Welcome} from './onboarding/Welcome' -import {RecommendedFeeds} from './onboarding/RecommendedFeeds' -import {RecommendedFollows} from './onboarding/RecommendedFollows' -import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' -import {useOnboardingState, useOnboardingDispatch} from '#/state/shell' - -export function Onboarding() { - const pal = usePalette('default') - const setMinimalShellMode = useSetMinimalShellMode() - const onboardingState = useOnboardingState() - const onboardingDispatch = useOnboardingDispatch() - - React.useEffect(() => { - setMinimalShellMode(true) - }, [setMinimalShellMode]) - - const next = () => onboardingDispatch({type: 'next'}) - const skip = () => onboardingDispatch({type: 'skip'}) - - return ( - - - {onboardingState.step === 'Welcome' && ( - - )} - {onboardingState.step === 'RecommendedFeeds' && ( - - )} - {onboardingState.step === 'RecommendedFollows' && ( - - )} - - - ) -} diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx deleted file mode 100644 index 95f8502f81..0000000000 --- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx +++ /dev/null @@ -1,211 +0,0 @@ -import React from 'react' -import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {useSuggestedFeedsQuery} from '#/state/queries/suggested-feeds' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -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 {RecommendedFeedsItem} from './RecommendedFeedsItem' - -type Props = { - next: () => void -} -export function RecommendedFeeds({next}: Props) { - const pal = usePalette('default') - const {_} = useLingui() - const {isTabletOrMobile} = useWebMediaQueries() - const {isLoading, data} = useSuggestedFeedsQuery() - - const hasFeeds = data && data.pages[0].feeds.length - - const title = ( - <> - - - Choose your - - - Recommended - - - Feeds - - - - - Feeds are created by users to curate content. Choose some feeds that - you find interesting. - - - - - - - ) - - return ( - <> - - - {hasFeeds ? ( - } - keyExtractor={item => item.uri} - style={{flex: 1}} - /> - ) : isLoading ? ( - - - - ) : ( - - )} - - - - - - - - Check out some recommended feeds. Tap + to add them to your list - of pinned feeds. - - - - {hasFeeds ? ( - } - keyExtractor={item => item.uri} - style={{flex: 1}} - showsVerticalScrollIndicator={false} - /> - ) : isLoading ? ( - - - - ) : ( - - - - )} - - - - - - - {item.likeCount || 0} - - - - - - - ) -} diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx deleted file mode 100644 index a840f949e4..0000000000 --- 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([]) - const moderationOpts = useModerationOpts() - - const title = ( - <> - - - Follow some - - - Recommended - - - Users - - - - - Follow some users to get started. We can recommend you more users - based on who you find interesting. - - - - - - - ) - - 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 ( - <> - - - {!suggestedFollows || !moderationOpts ? ( - - ) : ( - ( - - )} - keyExtractor={item => item.did} - style={{flex: 1}} - /> - )} - - - - - - - - - - Check out some recommended users. Follow them to see similar - users. - - - - {!suggestedFollows || !moderationOpts ? ( - - ) : ( - ( - - )} - keyExtractor={item => item.did} - style={{flex: 1}} - showsVerticalScrollIndicator={false} - /> - )} - - - - ) -} - -const styles = StyleSheet.create({ - row: { - flexDirection: 'row', - columnGap: 20, - alignItems: 'center', - marginVertical: 20, - }, - rowText: { - flex: 1, - }, - spacer: { - height: 20, - }, -}) diff --git a/src/view/com/auth/onboarding/WelcomeMobile.tsx b/src/view/com/auth/onboarding/WelcomeMobile.tsx deleted file mode 100644 index b8659d56cd..0000000000 --- a/src/view/com/auth/onboarding/WelcomeMobile.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import React from 'react' -import {Pressable, StyleSheet, View} from 'react-native' -import {Text} from 'view/com/util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Button} from 'view/com/util/forms/Button' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' - -type Props = { - next: () => void - skip: () => void -} - -export function WelcomeMobile({next, skip}: Props) { - const pal = usePalette('default') - const {_} = useLingui() - - return ( - - { - return ( - - - Skip - - - - ) - }} - /> - - - - Welcome to{' '} - Bluesky - - - - - - - - Bluesky is public. - - - - Your posts, likes, and blocks are public. Mutes are private. - - - - - - - - - Bluesky is open. - - - Never lose access to your followers and data. - - - - - - - - Bluesky is flexible. - - - - Choose the algorithms that power your experience with custom - feeds. - - - - - - -