Handle no feeds on Feeds screen

src/screens/Feeds/NoSavedFeeds.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import {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 {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Text} from '#/components/Typography'
+
+export function NoSavedFeeds() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {isPending, mutateAsync: setSavedFeeds} = useSetSaveFeedsMutation()
+
+  const addRecommendedFeeds = React.useCallback(async () => {
+    await setSavedFeeds(RECOMMENDED_SAVED_FEEDS)
+  }, [setSavedFeeds])
+
+  return (
+    <View
+      style={[a.flex_row, a.flex_wrap, a.justify_between, a.p_xl, a.gap_md]}>
+      <Text
+        style={[a.leading_snug, t.atoms.text_contrast_medium, {maxWidth: 310}]}>
+        <Trans>
+          Looks like you haven't saved any feeds! Use our recommendations or
+          browse more below.
+        </Trans>
+      </Text>
+
+      <Button
+        disabled={isPending}
+        label={_(msg`Apply default recommended feeds`)}
+        size="small"
+        variant="solid"
+        color="primary"
+        onPress={addRecommendedFeeds}>
+        <ButtonIcon icon={Plus} position="left" />
+        <ButtonText>{_(msg`Use recommended`)}</ButtonText>
+      </Button>
+    </View>
+  )
+}

src/view/screens/Feeds.tsx

@@ -45,6 +45,7 @@ import {
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {ViewHeader} from 'view/com/util/ViewHeader'
+import {NoSavedFeeds} from '#/screens/Feeds/NoSavedFeeds'
 import {atoms as a, useTheme} from '#/alf'
 import {IconCircle} from '#/components/IconCircle'
 import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
@@ -232,7 +233,7 @@ export function FeedsScreen(_props: Props) {
           error: cleanError(preferencesError.toString()),
         })
       } else {
-        if (isPreferencesLoading || !preferences?.savedFeeds?.length) {
+        if (isPreferencesLoading || !preferences?.savedFeeds) {
           slices.push({
             key: 'savedFeedsLoading',
             type: 'savedFeedsLoading',
@@ -264,6 +265,11 @@ export function FeedsScreen(_props: Props) {
                   savedFeedConfig: feed,
                 })),
             )
+          } else {
+            slices.push({
+              key: 'savedFeedNoResults',
+              type: 'savedFeedNoResults',
+            })
           }
         }
       }
@@ -476,19 +482,19 @@ export function FeedsScreen(_props: Props) {
                 </View>
               </View>
             )}
-            {preferences?.savedFeeds?.length !== 0 && <FeedsSavedHeader />}
+            <FeedsSavedHeader />
           </>
         )
       } else if (item.type === 'savedFeedNoResults') {
         return (
           <View
-            style={{
-              paddingHorizontal: 16,
-              paddingTop: 10,
-            }}>
-            <Text type="lg" style={pal.textLight}>
-              <Trans>You don't have any saved feeds!</Trans>
-            </Text>
+            style={[
+              pal.border,
+              {
+                borderBottomWidth: 1,
+              },
+            ]}>
+            <NoSavedFeeds />
           </View>
         )
       } else if (item.type === 'savedFeed') {
@@ -545,7 +551,6 @@ export function FeedsScreen(_props: Props) {
       pal.icon,
       pal.textLight,
       _,
-      preferences?.savedFeeds?.length,
       query,
       onChangeQuery,
       onPressCancelSearch,