Revise FeedSourceCard load state to allow deletion for failures (#2172)

* Revise FeedSourceCard load state to allow deletion for failures

* Translate

* Remove test error feed

* Fix missing uri param

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

src/locale/locales/en/messages.po

@@ -744,7 +744,7 @@ msgid "Edit list details"
 msgstr ""
 
 #: src/view/screens/Feeds.tsx:367
-#: src/view/screens/SavedFeeds.tsx:85
+#: src/view/screens/SavedFeeds.tsx:84
 msgid "Edit My Feeds"
 msgstr ""
 
@@ -858,7 +858,7 @@ msgstr ""
 msgid "Feeds are created by users to curate content. Choose some feeds that you find interesting."
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:156
+#: src/view/screens/SavedFeeds.tsx:164
 msgid "Feeds are custom algorithms that users build with a little coding expertise. <0/> for more information."
 msgstr ""
 
@@ -1536,7 +1536,7 @@ msgstr ""
 msgid "Pictures meant for adults."
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:89
+#: src/view/screens/SavedFeeds.tsx:88
 msgid "Pinned Feeds"
 msgstr ""
 
@@ -1676,7 +1676,7 @@ msgstr ""
 msgid "Remove"
 msgstr ""
 
-#: src/view/com/feeds/FeedSourceCard.tsx:108
+#: src/view/com/feeds/FeedSourceCard.tsx:106
 msgid "Remove {0} from my feeds?"
 msgstr ""
 
@@ -1688,7 +1688,8 @@ msgstr ""
 msgid "Remove feed"
 msgstr ""
 
-#: src/view/com/feeds/FeedSourceCard.tsx:107
+#: src/view/com/feeds/FeedSourceCard.tsx:105
+#: src/view/com/feeds/FeedSourceCard.tsx:172
 #: src/view/screens/ProfileFeed.tsx:280
 msgid "Remove from my feeds"
 msgstr ""
@@ -1701,6 +1702,10 @@ msgstr ""
 msgid "Remove image preview"
 msgstr ""
 
+#: src/view/com/feeds/FeedSourceCard.tsx:173
+msgid "Remove this feed from my feeds?"
+msgstr ""
+
 #: src/view/com/posts/FeedErrorMessage.tsx:131
 msgid "Remove this feed from your saved feeds?"
 msgstr ""
@@ -1840,7 +1845,7 @@ msgstr ""
 msgid "Save image crop"
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:122
+#: src/view/screens/SavedFeeds.tsx:130
 msgid "Saved Feeds"
 msgstr ""
 
@@ -2427,7 +2432,7 @@ msgstr ""
 msgid "You don't have any invite codes yet! We'll send you some when you've been on Bluesky for a little longer."
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:102
+#: src/view/screens/SavedFeeds.tsx:110
 msgid "You don't have any pinned feeds."
 msgstr ""
 
@@ -2435,7 +2440,7 @@ msgstr ""
 msgid "You don't have any saved feeds!"
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:135
+#: src/view/screens/SavedFeeds.tsx:143
 msgid "You don't have any saved feeds."
 msgstr ""
 

src/locale/locales/hi/messages.po

@@ -740,7 +740,7 @@ msgid "Edit list details"
 msgstr "सूची विवरण संपादित करें"
 
 #: src/view/screens/Feeds.tsx:367
-#: src/view/screens/SavedFeeds.tsx:85
+#: src/view/screens/SavedFeeds.tsx:84
 msgid "Edit My Feeds"
 msgstr "मेरी फ़ीड संपादित करें"
 
@@ -854,7 +854,7 @@ msgstr "सभी फ़ीड"
 msgid "Feeds are created by users to curate content. Choose some feeds that you find interesting."
 msgstr "सामग्री को व्यवस्थित करने के लिए उपयोगकर्ताओं द्वारा फ़ीड बनाए जाते हैं। कुछ फ़ीड चुनें जो आपको दिलचस्प लगें।"
 
-#: src/view/screens/SavedFeeds.tsx:156
+#: src/view/screens/SavedFeeds.tsx:164
 msgid "Feeds are custom algorithms that users build with a little coding expertise. <0/> for more information."
 msgstr "फ़ीड कस्टम एल्गोरिदम हैं जिन्हें उपयोगकर्ता थोड़ी कोडिंग विशेषज्ञता के साथ बनाते हैं। <0/> अधिक जानकारी के लिए."
 
@@ -1528,7 +1528,7 @@ msgstr "पासवर्ड अद्यतन!"
 msgid "Pictures meant for adults."
 msgstr "चित्र वयस्कों के लिए थे।।"
 
-#: src/view/screens/SavedFeeds.tsx:89
+#: src/view/screens/SavedFeeds.tsx:88
 msgid "Pinned Feeds"
 msgstr "पिन किया गया फ़ीड"
 
@@ -1668,7 +1668,7 @@ msgstr "अनुशंसित लोग"
 msgid "Remove"
 msgstr "निकालें"
 
-#: src/view/com/feeds/FeedSourceCard.tsx:108
+#: src/view/com/feeds/FeedSourceCard.tsx:106
 msgid "Remove {0} from my feeds?"
 msgstr "मेरे फ़ीड से {0} हटाएं?"
 
@@ -1680,7 +1680,8 @@ msgstr "खाता हटाएं"
 msgid "Remove feed"
 msgstr "फ़ीड हटाएँ"
 
-#: src/view/com/feeds/FeedSourceCard.tsx:107
+#: src/view/com/feeds/FeedSourceCard.tsx:105
+#: src/view/com/feeds/FeedSourceCard.tsx:172
 #: src/view/screens/ProfileFeed.tsx:280
 msgid "Remove from my feeds"
 msgstr "मेरे फ़ीड से हटाएँ"
@@ -1693,6 +1694,10 @@ msgstr "छवि निकालें"
 msgid "Remove image preview"
 msgstr "छवि पूर्वावलोकन निकालें"
 
+#: src/view/com/feeds/FeedSourceCard.tsx:173
+msgid "Remove this feed from my feeds?"
+msgstr ""
+
 #: src/view/com/posts/FeedErrorMessage.tsx:131
 msgid "Remove this feed from your saved feeds?"
 msgstr "इस फ़ीड को सहेजे गए फ़ीड से हटा दें?"
@@ -1832,7 +1837,7 @@ msgstr "बदलाव सेव करो"
 msgid "Save image crop"
 msgstr "फोटो बदलाव सेव करो"
 
-#: src/view/screens/SavedFeeds.tsx:122
+#: src/view/screens/SavedFeeds.tsx:130
 msgid "Saved Feeds"
 msgstr "सहेजे गए फ़ीड"
 
@@ -2419,7 +2424,7 @@ msgstr "अब आप अपने नए पासवर्ड के साथ
 msgid "You don't have any invite codes yet! We'll send you some when you've been on Bluesky for a little longer."
 msgstr "आपके पास अभी तक कोई आमंत्रण कोड नहीं है! जब आप कुछ अधिक समय के लिए Bluesky पर रहेंगे तो हम आपको कुछ भेजेंगे।"
 
-#: src/view/screens/SavedFeeds.tsx:102
+#: src/view/screens/SavedFeeds.tsx:110
 msgid "You don't have any pinned feeds."
 msgstr "आपके पास कोई पिन किया हुआ फ़ीड नहीं है."
 
@@ -2427,7 +2432,7 @@ msgstr "आपके पास कोई पिन किया हुआ फ़
 msgid "You don't have any saved feeds!"
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:135
+#: src/view/screens/SavedFeeds.tsx:143
 msgid "You don't have any saved feeds."
 msgstr "आपके पास कोई सहेजी गई फ़ीड नहीं है."
 

src/view/com/feeds/FeedSourceCard.tsx

@@ -32,30 +32,23 @@ export function FeedSourceCard({
   showSaveBtn = false,
   showDescription = false,
   showLikes = false,
-  LoadingComponent,
   pinOnSave = false,
+  showMinimalPlaceholder,
 }: {
   feedUri: string
   style?: StyleProp<ViewStyle>
   showSaveBtn?: boolean
   showDescription?: boolean
   showLikes?: boolean
-  LoadingComponent?: JSX.Element
   pinOnSave?: boolean
+  showMinimalPlaceholder?: boolean
 }) {
   const {data: preferences} = usePreferencesQuery()
   const {data: feed} = useFeedSourceInfoQuery({uri: feedUri})
 
-  if (!feed || !preferences) {
-    return LoadingComponent ? (
-      LoadingComponent
-    ) : (
-      <FeedLoadingPlaceholder style={{flex: 1}} />
-    )
-  }
-
   return (
     <FeedSourceCardLoaded
+      feedUri={feedUri}
       feed={feed}
       preferences={preferences}
       style={style}
@@ -63,11 +56,13 @@ export function FeedSourceCard({
       showDescription={showDescription}
       showLikes={showLikes}
       pinOnSave={pinOnSave}
+      showMinimalPlaceholder={showMinimalPlaceholder}
     />
   )
 }
 
 export function FeedSourceCardLoaded({
+  feedUri,
   feed,
   preferences,
   style,
@@ -75,14 +70,17 @@ export function FeedSourceCardLoaded({
   showDescription = false,
   showLikes = false,
   pinOnSave = false,
+  showMinimalPlaceholder,
 }: {
-  feed: FeedSourceInfo
+  feedUri: string
-  preferences: UsePreferencesQueryResponse
+  feed?: FeedSourceInfo
+  preferences?: UsePreferencesQueryResponse
   style?: StyleProp<ViewStyle>
   showSaveBtn?: boolean
   showDescription?: boolean
   showLikes?: boolean
   pinOnSave?: boolean
+  showMinimalPlaceholder?: boolean
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
@@ -95,7 +93,7 @@ export function FeedSourceCardLoaded({
     useRemoveFeedMutation()
   const {isPending: isPinPending, mutateAsync: pinFeed} = usePinFeedMutation()
 
-  const isSaved = Boolean(preferences?.feeds?.saved?.includes(feed.uri))
+  const isSaved = Boolean(preferences?.feeds?.saved?.includes(feed?.uri || ''))
 
   const onToggleSaved = React.useCallback(async () => {
     // Only feeds can be un/saved, lists are handled elsewhere
@@ -105,7 +103,7 @@ export function FeedSourceCardLoaded({
       openModal({
         name: 'confirm',
         title: _(msg`Remove from my feeds`),
-        message: _(msg`Remove ${feed.displayName} from my feeds?`),
+        message: _(msg`Remove ${feed?.displayName} from my feeds?`),
         onPressConfirm: async () => {
           try {
             await removeFeed({uri: feed.uri})
@@ -132,7 +130,70 @@ export function FeedSourceCardLoaded({
     }
   }, [isSaved, openModal, feed, removeFeed, saveFeed, _, pinOnSave, pinFeed])
 
-  if (!feed || !preferences) return null
+  /*
+   * LOAD STATE
+   *
+   * This state also captures the scenario where a feed can't load for whatever
+   * reason.
+   */
+  if (!feed || !preferences)
+    return (
+      <View
+        style={[
+          pal.border,
+          {
+            borderTopWidth: showMinimalPlaceholder ? 0 : 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            flex: 1,
+            paddingRight: 18,
+          },
+        ]}>
+        {showMinimalPlaceholder ? (
+          <FeedLoadingPlaceholder
+            style={{flex: 1}}
+            showTopBorder={false}
+            showLowerPlaceholder={false}
+          />
+        ) : (
+          <FeedLoadingPlaceholder style={{flex: 1}} showTopBorder={false} />
+        )}
+
+        {showSaveBtn && (
+          <Pressable
+            testID={`feed-${feedUri}-toggleSave`}
+            disabled={isRemovePending}
+            accessibilityRole="button"
+            accessibilityLabel={'Remove from my feeds'}
+            accessibilityHint=""
+            onPress={() => {
+              openModal({
+                name: 'confirm',
+                title: _(msg`Remove from my feeds`),
+                message: _(msg`Remove this feed from my feeds?`),
+                onPressConfirm: async () => {
+                  try {
+                    await removeFeed({uri: feedUri})
+                    // await item.unsave()
+                    Toast.show('Removed from my feeds')
+                  } catch (e) {
+                    Toast.show('There was an issue contacting your server')
+                    logger.error('Failed to unsave feed', {error: e})
+                  }
+                },
+              })
+            }}
+            hitSlop={15}
+            style={styles.btn}>
+            <FontAwesomeIcon
+              icon={['far', 'trash-can']}
+              size={19}
+              color={pal.colors.icon}
+            />
+          </Pressable>
+        )}
+      </View>
+    )
 
   return (
     <Pressable

src/view/com/feeds/ProfileFeedgens.tsx

@@ -172,6 +172,7 @@ export const ProfileFeedgens = React.forwardRef<
       if (preferences) {
         return (
           <FeedSourceCardLoaded
+            feedUri={item.uri}
             feed={item}
             preferences={preferences}
             style={styles.item}

src/view/com/util/LoadingPlaceholder.tsx

@@ -214,7 +214,7 @@ export function FeedLoadingPlaceholder({
         pal.border,
         style,
       ]}>
-      <View style={[pal.view, {flexDirection: 'row', marginBottom: 10}]}>
+      <View style={[pal.view, {flexDirection: 'row'}]}>
         <LoadingPlaceholder
           width={36}
           height={36}
@@ -226,7 +226,7 @@ export function FeedLoadingPlaceholder({
         </View>
       </View>
       {showLowerPlaceholder && (
-        <View style={{paddingHorizontal: 5}}>
+        <View style={{paddingHorizontal: 5, marginTop: 10}}>
           <LoadingPlaceholder
             width={260}
             height={8}

src/view/screens/SavedFeeds.tsx

@@ -26,7 +26,6 @@ import {
   useUnpinFeedMutation,
   useSetSaveFeedsMutation,
 } from '#/state/queries/preferences'
-import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 
 const HITSLOP_TOP = {
   top: 20,
@@ -89,6 +88,7 @@ export function SavedFeeds({}: Props) {
             <Trans>Pinned Feeds</Trans>
           </Text>
         </View>
+
         {preferences?.feeds ? (
           !currentFeeds.pinned.length ? (
             <View
@@ -290,13 +290,7 @@ function ListItem({
         feedUri={feedUri}
         style={styles.noBorder}
         showSaveBtn
-        LoadingComponent={
+        showMinimalPlaceholder
-          <FeedLoadingPlaceholder
-            style={{flex: 1}}
-            showLowerPlaceholder={false}
-            showTopBorder={false}
-          />
-        }
       />
       <Pressable
         disabled={isPending}