diff --git a/src/components/FeedEnd.tsx b/src/components/FeedEnd.tsx new file mode 100644 index 0000000000..5c0cb1a350 --- /dev/null +++ b/src/components/FeedEnd.tsx @@ -0,0 +1,129 @@ +import React from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped' +import {isNative} from '#/platform/detection' +import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics' +import {useTrendingConfig} from '#/state/trending-config' +import {atoms as a, useBreakpoints,useGutters, useTheme, web} from '#/alf' +import {Button, ButtonIcon,ButtonText} from '#/components/Button' +import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' +import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2' +import { + TrendingTopic, + TrendingTopicLink, + TrendingTopicSkeleton, +} from '#/components/TrendingTopics' +import {Text} from '#/components/Typography' + +const TRENDS_COUNT = 9 + +export function FeedEnd() { + const t = useTheme() + const {_} = useLingui() + const gutters = useGutters(['wide']) + const {enabled} = useTrendingConfig() + const navigation = useNavigationDeduped() + const {gtTablet} = useBreakpoints() + + const onPressExplore = React.useCallback(() => { + if (isNative) { + navigation.navigate('SearchTab') + navigation.popToTop() + } else { + navigation.navigate('Search', {}) + } + }, [navigation]) + + return ( + + + + That's it! You've reached the end of this feed. + + + + + + {enabled && !gtTablet ? : null} + + ) +} + +function Trending() { + const t = useTheme() + const {data: trending, error, isLoading} = useTrendingTopics() + const noTopics = !isLoading && !error && !trending?.topics?.length + const {gtMobile} = useBreakpoints() + + return error || noTopics ? null : ( + + + + Check out what's trending + + + + + + {isLoading ? ( + Array(TRENDS_COUNT) + .fill(0) + .map((_n, i) => ( + + )) + ) : !trending?.topics ? null : ( + <> + {trending.topics.slice(0, TRENDS_COUNT).map(topic => ( + + {({hovered}) => ( + + )} + + ))} + + )} + + + ) +} diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 59b2967308..e460aef5dc 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -25,10 +25,8 @@ import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' import {FeedPage} from '#/view/com/feeds/FeedPage' import {HomeHeader} from '#/view/com/home/HomeHeader' 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 {FeedEnd} from '#/components/FeedEnd' import * as Layout from '#/components/Layout' type Props = NativeStackScreenProps @@ -192,14 +190,6 @@ function HomeScreenReady({ [onPressSelected, pinnedFeedInfos], ) - const renderFollowingEmptyState = React.useCallback(() => { - return - }, []) - - const renderCustomFeedEmptyState = React.useCallback(() => { - return - }, []) - const homeFeedParams = React.useMemo(() => { return { mergeFeedEnabled: Boolean(preferences.feedViewPrefs.lab_mergeFeedEnabled), @@ -232,8 +222,8 @@ function HomeScreenReady({ isPageAdjacent={Math.abs(selectedIndex - index) === 1} feed={feed} feedParams={homeFeedParams} - renderEmptyState={renderFollowingEmptyState} - renderEndOfFeed={FollowingEndOfFeed} + renderEmptyState={FeedEnd} + renderEndOfFeed={FeedEnd} /> ) } @@ -245,8 +235,9 @@ function HomeScreenReady({ isPageFocused={selectedFeed === feed} isPageAdjacent={Math.abs(selectedIndex - index) === 1} feed={feed} - renderEmptyState={renderCustomFeedEmptyState} + renderEmptyState={FeedEnd} savedFeedConfig={savedFeedConfig} + renderEndOfFeed={FeedEnd} /> ) }) @@ -265,7 +256,7 @@ function HomeScreenReady({ isPageFocused isPageAdjacent={false} feed={`feedgen|${PROD_DEFAULT_FEED('whats-hot')}`} - renderEmptyState={renderCustomFeedEmptyState} + renderEmptyState={FeedEnd} /> )