From dec2f9fdf6685c283b15ae282044d31af96d2aea Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 23 Apr 2024 17:20:21 -0500
Subject: [PATCH] Handle no following feed

---
 src/screens/Feeds/NoFollowingFeed.tsx | 48 +++++++++++++++++++++++++++
 src/view/screens/Feeds.tsx            | 28 ++++++++++++++++
 src/view/screens/SavedFeeds.tsx       | 10 ++++++
 3 files changed, 86 insertions(+)
 create mode 100644 src/screens/Feeds/NoFollowingFeed.tsx

diff --git a/src/screens/Feeds/NoFollowingFeed.tsx b/src/screens/Feeds/NoFollowingFeed.tsx
new file mode 100644
index 0000000000..ec80209316
--- /dev/null
+++ b/src/screens/Feeds/NoFollowingFeed.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useAddSavedFeedMutation} from '#/state/queries/preferences'
+import {atoms as a, useTheme} from '#/alf'
+import {InlineLinkText} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+export function NoFollowingFeed() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {mutateAsync: addSavedFeed} = useAddSavedFeedMutation()
+
+  const addRecommendedFeeds = React.useCallback(
+    (e: any) => {
+      e.preventDefault()
+
+      addSavedFeed({
+        type: 'timeline',
+        value: 'home',
+        pinned: true,
+      })
+
+      // prevent navigation
+      return false
+    },
+    [addSavedFeed],
+  )
+
+  return (
+    <View style={[a.flex_row, a.flex_wrap, a.align_center, a.py_md, a.px_lg]}>
+      <Text
+        style={[a.leading_snug, t.atoms.text_contrast_medium, {maxWidth: 310}]}>
+        <Trans>Looks like you're missing a following feed.</Trans>{' '}
+      </Text>
+
+      <InlineLinkText
+        to="/"
+        label={_(msg`Add the default feed of only people you follow`)}
+        onPress={addRecommendedFeeds}
+        style={[a.leading_snug]}>
+        <Trans>Click here to add one.</Trans>
+      </InlineLinkText>
+    </View>
+  )
+}
diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
index a1e5c0229a..25b44eb183 100644
--- a/src/view/screens/Feeds.tsx
+++ b/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 {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
 import {NoSavedFeeds} from '#/screens/Feeds/NoSavedFeeds'
 import {atoms as a, useTheme} from '#/alf'
 import {IconCircle} from '#/components/IconCircle'
@@ -104,6 +105,10 @@ type FlatlistSlice =
       type: 'popularFeedsLoadingMore'
       key: string
     }
+  | {
+      type: 'noFollowingFeed'
+      key: string
+    }
 
 // HACK
 // the protocol doesn't yet tell us which feeds are personalized
@@ -241,6 +246,10 @@ export function FeedsScreen(_props: Props) {
           })
         } else {
           if (preferences.savedFeeds?.length) {
+            const noFollowingFeed = preferences.savedFeeds.every(
+              f => f.type !== 'timeline',
+            )
+
             slices = slices.concat(
               preferences.savedFeeds
                 .filter(f => {
@@ -265,6 +274,13 @@ export function FeedsScreen(_props: Props) {
                   savedFeedConfig: feed,
                 })),
             )
+
+            if (noFollowingFeed) {
+              slices.push({
+                key: 'noFollowingFeed',
+                type: 'noFollowingFeed',
+              })
+            }
           } else {
             slices.push({
               key: 'savedFeedNoResults',
@@ -540,6 +556,18 @@ export function FeedsScreen(_props: Props) {
             </Text>
           </View>
         )
+      } else if (item.type === 'noFollowingFeed') {
+        return (
+          <View
+            style={[
+              pal.border,
+              {
+                borderBottomWidth: 1,
+              },
+            ]}>
+            <NoFollowingFeed />
+          </View>
+        )
       }
       return null
     },
diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx
index 652e45cf55..f643ec570c 100644
--- a/src/view/screens/SavedFeeds.tsx
+++ b/src/view/screens/SavedFeeds.tsx
@@ -28,6 +28,7 @@ import {Text} from 'view/com/util/text/Text'
 import * as Toast from 'view/com/util/Toast'
 import {ViewHeader} from 'view/com/util/ViewHeader'
 import {CenteredView, ScrollView} from 'view/com/util/Views'
+import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
 import {NoSavedFeeds} from '#/screens/Feeds/NoSavedFeeds'
 import {atoms as a, useTheme} from '#/alf'
 import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
@@ -71,6 +72,8 @@ export function SavedFeeds({}: Props) {
   const pinnedFeeds = currentFeeds.filter(f => f.pinned)
   const unpinnedFeeds = currentFeeds.filter(f => !f.pinned)
   const noSavedFeeds = pinnedFeeds.length + unpinnedFeeds.length === 0
+  const noFollowingFeed =
+    currentFeeds.every(f => f.type !== 'timeline') && !noSavedFeeds
 
   useFocusEffect(
     React.useCallback(() => {
@@ -129,6 +132,13 @@ export function SavedFeeds({}: Props) {
         ) : (
           <ActivityIndicator style={{marginTop: 20}} />
         )}
+
+        {noFollowingFeed && (
+          <View style={[pal.border, {borderBottomWidth: 1}]}>
+            <NoFollowingFeed />
+          </View>
+        )}
+
         <View style={[pal.text, pal.border, styles.title]}>
           <Text type="title" style={pal.text}>
             <Trans>Saved Feeds</Trans>