From 05d1d8d8a4565e7d042f8c09760186b4037dcd2f Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Wed, 30 Aug 2023 14:57:03 -0700 Subject: Fix onboarding on mobile web --- src/view/com/auth/onboarding/RecommendedFeeds.tsx | 101 +--------- .../com/auth/onboarding/RecommendedFeeds.web.tsx | 214 --------------------- .../auth/onboarding/RecommendedFeedsDesktop.tsx | 214 +++++++++++++++++++++ .../com/auth/onboarding/RecommendedFeedsMobile.tsx | 95 +++++++++ src/view/com/auth/onboarding/Welcome.tsx | 133 +------------ src/view/com/auth/onboarding/Welcome.web.tsx | 123 ------------ src/view/com/auth/onboarding/WelcomeDesktop.tsx | 123 ++++++++++++ src/view/com/auth/onboarding/WelcomeMobile.tsx | 123 ++++++++++++ src/view/com/util/layouts/withBreakpoints.tsx | 22 +++ 9 files changed, 597 insertions(+), 551 deletions(-) delete mode 100644 src/view/com/auth/onboarding/RecommendedFeeds.web.tsx create mode 100644 src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx create mode 100644 src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx delete mode 100644 src/view/com/auth/onboarding/Welcome.web.tsx create mode 100644 src/view/com/auth/onboarding/WelcomeDesktop.tsx create mode 100644 src/view/com/auth/onboarding/WelcomeMobile.tsx create mode 100644 src/view/com/util/layouts/withBreakpoints.tsx (limited to 'src') diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx index 4a3200168..76204ce31 100644 --- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx @@ -1,91 +1,10 @@ -import React from 'react' -import {FlatList, StyleSheet, View} from 'react-native' -import {Text} from 'view/com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {Button} from 'view/com/util/forms/Button' -import {observer} from 'mobx-react-lite' -import {CustomFeed} from 'view/com/feeds/CustomFeed' -import {useCustomFeed} from 'lib/hooks/useCustomFeed' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {isDesktopWeb} from 'platform/detection' -import {RECOMMENDED_FEEDS} from 'lib/constants' - -type Props = { - next: () => void -} -export const RecommendedFeeds = observer(({next}: Props) => { - const pal = usePalette('default') - - return ( - - - - Check out some recommended feeds. Tap + to add them to your list of - pinned feeds. - - - } - keyExtractor={item => item.did + item.rkey} - style={{flex: 1}} - /> - - - - - ) - - return ( - - } - keyExtractor={item => item.did + item.rkey} - style={{flex: 1}} - /> - - ) -}) - -const Item = observer(({did, rkey}: {did: string; rkey: string}) => { - const pal = usePalette('default') - const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey) - const item = useCustomFeed(uri) - if (!item) return null - const onToggle = async () => { - if (item.isSaved) { - try { - await item.unsave() - } catch (e) { - Toast.show('There was an issue contacting your server') - console.error('Failed to unsave feed', {e}) - } - } else { - try { - await item.save() - await item.pin() - } catch (e) { - Toast.show('There was an issue contacting your server') - console.error('Failed to pin feed', {e}) - } - } - } - return ( - - - - - - - - {item.displayName} - - - - by {sanitizeHandle(item.data.creator.handle, '@')} - - - {item.data.description ? ( - - {item.data.description} - - ) : null} - - - - - - - - {item.data.likeCount || 0} - - - - - - - ) -}) - -const styles = StyleSheet.create({ - container: { - flex: 1, - marginHorizontal: 16, - justifyContent: 'space-between', - }, - title1: { - fontSize: 36, - fontWeight: '800', - textAlign: 'right', - }, - title2: { - fontSize: 58, - fontWeight: '800', - textAlign: 'right', - }, - description: { - maxWidth: 400, - marginTop: 10, - marginLeft: 'auto', - textAlign: 'right', - }, -}) diff --git a/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx b/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx new file mode 100644 index 000000000..d305f4a82 --- /dev/null +++ b/src/view/com/auth/onboarding/RecommendedFeedsDesktop.tsx @@ -0,0 +1,214 @@ +import React from 'react' +import {FlatList, StyleSheet, View} from 'react-native' +import {observer} from 'mobx-react-lite' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Text} from 'view/com/util/text/Text' +import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {UserAvatar} from 'view/com/util/UserAvatar' +import {Button} from 'view/com/util/forms/Button' +import * as Toast from 'view/com/util/Toast' +import {usePalette} from 'lib/hooks/usePalette' +import {useCustomFeed} from 'lib/hooks/useCustomFeed' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {sanitizeHandle} from 'lib/strings/handles' +import {HeartIcon} from 'lib/icons' +import {RECOMMENDED_FEEDS} from 'lib/constants' + +type Props = { + next: () => void +} +export const RecommendedFeedsDesktop = observer(({next}: Props) => { + const pal = usePalette('default') + + const title = ( + <> + Choose your + Recomended + Feeds + + Feeds are created by users to curate content. Choose some feeds that you + find interesting. + + + + + + ) + + return ( + + } + keyExtractor={item => item.did + item.rkey} + style={{flex: 1}} + /> + + ) +}) + +const Item = observer(({did, rkey}: {did: string; rkey: string}) => { + const pal = usePalette('default') + const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey) + const item = useCustomFeed(uri) + if (!item) return null + const onToggle = async () => { + if (item.isSaved) { + try { + await item.unsave() + } catch (e) { + Toast.show('There was an issue contacting your server') + console.error('Failed to unsave feed', {e}) + } + } else { + try { + await item.save() + await item.pin() + } catch (e) { + Toast.show('There was an issue contacting your server') + console.error('Failed to pin feed', {e}) + } + } + } + return ( + + + + + + + + {item.displayName} + + + + by {sanitizeHandle(item.data.creator.handle, '@')} + + + {item.data.description ? ( + + {item.data.description} + + ) : null} + + + + + + + + {item.data.likeCount || 0} + + + + + + + ) +}) + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginHorizontal: 16, + justifyContent: 'space-between', + }, + title1: { + fontSize: 36, + fontWeight: '800', + textAlign: 'right', + }, + title2: { + fontSize: 58, + fontWeight: '800', + textAlign: 'right', + }, + description: { + maxWidth: 400, + marginTop: 10, + marginLeft: 'auto', + textAlign: 'right', + }, +}) diff --git a/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx b/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx new file mode 100644 index 000000000..b84b75df7 --- /dev/null +++ b/src/view/com/auth/onboarding/RecommendedFeedsMobile.tsx @@ -0,0 +1,95 @@ +import React from 'react' +import {FlatList, StyleSheet, View} from 'react-native' +import {Text} from 'view/com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {Button} from 'view/com/util/forms/Button' +import {observer} from 'mobx-react-lite' +import {CustomFeed} from 'view/com/feeds/CustomFeed' +import {useCustomFeed} from 'lib/hooks/useCustomFeed' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {isDesktopWeb} from 'platform/detection' +import {RECOMMENDED_FEEDS} from 'lib/constants' + +type Props = { + next: () => void +} +export const RecommendedFeedsMobile = observer(({next}: Props) => { + const pal = usePalette('default') + + return ( + + + + Check out some recommended feeds. Tap + to add them to your list of + pinned feeds. + + + } + keyExtractor={item => item.did + item.rkey} + style={{flex: 1}} + /> + + - - - ) -}) - -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/WelcomeDesktop.tsx b/src/view/com/auth/onboarding/WelcomeDesktop.tsx new file mode 100644 index 000000000..e63693443 --- /dev/null +++ b/src/view/com/auth/onboarding/WelcomeDesktop.tsx @@ -0,0 +1,123 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {useMediaQuery} from 'react-responsive' +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 {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {Button} from 'view/com/util/forms/Button' +import {observer} from 'mobx-react-lite' + +type Props = { + next: () => void + skip: () => void +} + +export const WelcomeDesktop = observer(({next}: Props) => { + const pal = usePalette('default') + const horizontal = useMediaQuery({ + query: '(min-width: 1230px)', + }) + const title = ( + <> + + Welcome to + + + Bluesky + + + ) + return ( + + + + + + 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. + + + + + + + + + ) +}) + +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 new file mode 100644 index 000000000..eb72de836 --- /dev/null +++ b/src/view/com/auth/onboarding/WelcomeMobile.tsx @@ -0,0 +1,123 @@ +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 {observer} from 'mobx-react-lite' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {isDesktopWeb} from 'platform/detection' + +type Props = { + next: () => void + skip: () => void +} + +export const WelcomeMobile = observer(({next, skip}: Props) => { + const pal = usePalette('default') + + 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. + + + + + +