diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 970317b754..85e48922bb 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,4 +1,6 @@ import {Insets, Platform} from 'react-native' +import {AppBskyActorDefs} from '@atproto/api' +import {TID} from '@atproto/common-web' export const LOCAL_DEV_SERVICE = Platform.OS === 'android' ? 'http://10.0.2.2:2583' : 'http://localhost:2583' @@ -92,3 +94,18 @@ export const BSKY_FEED_OWNER_DIDS = [ export const DISCOVER_FEED_URI = 'at://did:plc:z72i7hdynmk6r22z27h6tvur/app.bsky.feed.generator/whats-hot' + +export const RECOMMENDED_SAVED_FEEDS: AppBskyActorDefs.SavedFeed[] = [ + { + id: TID.nextStr(), + type: 'feed', + value: DISCOVER_FEED_URI, + pinned: true, + }, + { + id: TID.nextStr(), + type: 'timeline', + value: 'home', + pinned: true, + }, +] diff --git a/src/screens/Home/NoFeedsPinned.tsx b/src/screens/Home/NoFeedsPinned.tsx new file mode 100644 index 0000000000..346cc11cc9 --- /dev/null +++ b/src/screens/Home/NoFeedsPinned.tsx @@ -0,0 +1,89 @@ +import React from 'react' +import {useWindowDimensions, View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {RECOMMENDED_SAVED_FEEDS} from '#/lib/constants' +import {useSetSaveFeedsMutation} from '#/state/queries/preferences' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CenteredView} from '#/view/com/util/Views' +import {atoms as a} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' +import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' +import {Link} from '#/components/Link' +import {Text} from '#/components/Typography' + +export function useHeaderOffset() { + const {isDesktop, isTablet} = useWebMediaQueries() + const {fontScale} = useWindowDimensions() + if (isDesktop || isTablet) { + return 0 + } + const navBarHeight = 42 + const tabBarPad = 10 + 10 + 3 // padding + border + const normalLineHeight = 1.2 + const tabBarText = 16 * normalLineHeight * fontScale + return navBarHeight + tabBarPad + tabBarText +} + +export function NoFeedsPinned() { + const {_} = useLingui() + const headerOffset = useHeaderOffset() + const {isPending, mutateAsync: setSavedFeeds} = useSetSaveFeedsMutation() + + const addRecommendedFeeds = React.useCallback(async () => { + await setSavedFeeds(RECOMMENDED_SAVED_FEEDS) + }, [setSavedFeeds]) + + return ( + + + + + Whoops! + + + + Looks like you unpinned all your feeds. But don't worry, you can + add some below 😄 + + + + + + + + + + {_(msg`Browse other feeds`)} + + + + + ) +} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 33e40997f8..2ae99e26fe 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -21,6 +21,7 @@ import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState' import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState' import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed' +import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned' import {HomeHeader} from '../com/home/HomeHeader' type Props = NativeStackScreenProps @@ -110,12 +111,14 @@ function HomeScreenReady({ useFocusEffect( useNonReactiveCallback(() => { - logEvent('home:feedDisplayed', { - index: selectedIndex, - feedType: selectedFeed.split('|')[0], - feedUrl: selectedFeed, - reason: 'focus', - }) + if (selectedFeed) { + logEvent('home:feedDisplayed', { + index: selectedIndex, + feedType: selectedFeed.split('|')[0], + feedUrl: selectedFeed, + reason: 'focus', + }) + } }), ) @@ -147,12 +150,15 @@ function HomeScreenReady({ const onPageSelecting = React.useCallback( (index: number, reason: LogEvents['home:feedDisplayed']['reason']) => { const feed = allFeeds[index] - logEvent('home:feedDisplayed', { - index, - feedType: feed.split('|')[0], - feedUrl: feed, - reason, - }) + + if (feed) { + logEvent('home:feedDisplayed', { + index, + feedType: feed.split('|')[0], + feedUrl: feed, + reason, + }) + } }, [allFeeds], ) @@ -212,35 +218,39 @@ function HomeScreenReady({ onPageSelected={onPageSelected} onPageScrollStateChanged={onPageScrollStateChanged} renderTabBar={renderTabBar}> - {allFeeds.map(feed => { - if (feed === 'home' || feed === 'following') { + {allFeeds.length ? ( + allFeeds.map(feed => { + if (feed === 'home' || feed === 'following') { + return ( + + ) + } + const savedFeedConfig = preferences.savedFeeds.find(f => { + return feed.includes(f.value) + }) + return ( ) - } - const savedFeedConfig = preferences.savedFeeds.find(f => { - return feed.includes(f.value) }) - - return ( - - ) - })} + ) : ( + + )} ) : (