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

+13 -8

src/locale/locales/en/messages.po

··· 744 744 msgstr "" 745 745 746 746 #: src/view/screens/Feeds.tsx:367 747 - #: src/view/screens/SavedFeeds.tsx:85 747 + #: src/view/screens/SavedFeeds.tsx:84 748 748 msgid "Edit My Feeds" 749 749 msgstr "" 750 750 ··· 858 858 msgid "Feeds are created by users to curate content. Choose some feeds that you find interesting." 859 859 msgstr "" 860 860 861 - #: src/view/screens/SavedFeeds.tsx:156 861 + #: src/view/screens/SavedFeeds.tsx:164 862 862 msgid "Feeds are custom algorithms that users build with a little coding expertise. <0/> for more information." 863 863 msgstr "" 864 864 ··· 1536 1536 msgid "Pictures meant for adults." 1537 1537 msgstr "" 1538 1538 1539 - #: src/view/screens/SavedFeeds.tsx:89 1539 + #: src/view/screens/SavedFeeds.tsx:88 1540 1540 msgid "Pinned Feeds" 1541 1541 msgstr "" 1542 1542 ··· 1676 1676 msgid "Remove" 1677 1677 msgstr "" 1678 1678 1679 - #: src/view/com/feeds/FeedSourceCard.tsx:108 1679 + #: src/view/com/feeds/FeedSourceCard.tsx:106 1680 1680 msgid "Remove {0} from my feeds?" 1681 1681 msgstr "" 1682 1682 ··· 1688 1688 msgid "Remove feed" 1689 1689 msgstr "" 1690 1690 1691 - #: src/view/com/feeds/FeedSourceCard.tsx:107 1691 + #: src/view/com/feeds/FeedSourceCard.tsx:105 1692 + #: src/view/com/feeds/FeedSourceCard.tsx:172 1692 1693 #: src/view/screens/ProfileFeed.tsx:280 1693 1694 msgid "Remove from my feeds" 1694 1695 msgstr "" ··· 1701 1702 msgid "Remove image preview" 1702 1703 msgstr "" 1703 1704 1705 + #: src/view/com/feeds/FeedSourceCard.tsx:173 1706 + msgid "Remove this feed from my feeds?" 1707 + msgstr "" 1708 + 1704 1709 #: src/view/com/posts/FeedErrorMessage.tsx:131 1705 1710 msgid "Remove this feed from your saved feeds?" 1706 1711 msgstr "" ··· 1840 1845 msgid "Save image crop" 1841 1846 msgstr "" 1842 1847 1843 - #: src/view/screens/SavedFeeds.tsx:122 1848 + #: src/view/screens/SavedFeeds.tsx:130 1844 1849 msgid "Saved Feeds" 1845 1850 msgstr "" 1846 1851 ··· 2427 2432 msgid "You don't have any invite codes yet! We'll send you some when you've been on Bluesky for a little longer." 2428 2433 msgstr "" 2429 2434 2430 - #: src/view/screens/SavedFeeds.tsx:102 2435 + #: src/view/screens/SavedFeeds.tsx:110 2431 2436 msgid "You don't have any pinned feeds." 2432 2437 msgstr "" 2433 2438 ··· 2435 2440 msgid "You don't have any saved feeds!" 2436 2441 msgstr "" 2437 2442 2438 - #: src/view/screens/SavedFeeds.tsx:135 2443 + #: src/view/screens/SavedFeeds.tsx:143 2439 2444 msgid "You don't have any saved feeds." 2440 2445 msgstr "" 2441 2446

+13 -8

src/locale/locales/hi/messages.po

··· 740 740 msgstr "सूची विवरण संपादित करें" 741 741 742 742 #: src/view/screens/Feeds.tsx:367 743 - #: src/view/screens/SavedFeeds.tsx:85 743 + #: src/view/screens/SavedFeeds.tsx:84 744 744 msgid "Edit My Feeds" 745 745 msgstr "मेरी फ़ीड संपादित करें" 746 746 ··· 854 854 msgid "Feeds are created by users to curate content. Choose some feeds that you find interesting." 855 855 msgstr "सामग्री को व्यवस्थित करने के लिए उपयोगकर्ताओं द्वारा फ़ीड बनाए जाते हैं। कुछ फ़ीड चुनें जो आपको दिलचस्प लगें।" 856 856 857 - #: src/view/screens/SavedFeeds.tsx:156 857 + #: src/view/screens/SavedFeeds.tsx:164 858 858 msgid "Feeds are custom algorithms that users build with a little coding expertise. <0/> for more information." 859 859 msgstr "फ़ीड कस्टम एल्गोरिदम हैं जिन्हें उपयोगकर्ता थोड़ी कोडिंग विशेषज्ञता के साथ बनाते हैं। <0/> अधिक जानकारी के लिए." 860 860 ··· 1528 1528 msgid "Pictures meant for adults." 1529 1529 msgstr "चित्र वयस्कों के लिए थे।।" 1530 1530 1531 - #: src/view/screens/SavedFeeds.tsx:89 1531 + #: src/view/screens/SavedFeeds.tsx:88 1532 1532 msgid "Pinned Feeds" 1533 1533 msgstr "पिन किया गया फ़ीड" 1534 1534 ··· 1668 1668 msgid "Remove" 1669 1669 msgstr "निकालें" 1670 1670 1671 - #: src/view/com/feeds/FeedSourceCard.tsx:108 1671 + #: src/view/com/feeds/FeedSourceCard.tsx:106 1672 1672 msgid "Remove {0} from my feeds?" 1673 1673 msgstr "मेरे फ़ीड से {0} हटाएं?" 1674 1674 ··· 1680 1680 msgid "Remove feed" 1681 1681 msgstr "फ़ीड हटाएँ" 1682 1682 1683 - #: src/view/com/feeds/FeedSourceCard.tsx:107 1683 + #: src/view/com/feeds/FeedSourceCard.tsx:105 1684 + #: src/view/com/feeds/FeedSourceCard.tsx:172 1684 1685 #: src/view/screens/ProfileFeed.tsx:280 1685 1686 msgid "Remove from my feeds" 1686 1687 msgstr "मेरे फ़ीड से हटाएँ" ··· 1693 1694 msgid "Remove image preview" 1694 1695 msgstr "छवि पूर्वावलोकन निकालें" 1695 1696 1697 + #: src/view/com/feeds/FeedSourceCard.tsx:173 1698 + msgid "Remove this feed from my feeds?" 1699 + msgstr "" 1700 + 1696 1701 #: src/view/com/posts/FeedErrorMessage.tsx:131 1697 1702 msgid "Remove this feed from your saved feeds?" 1698 1703 msgstr "इस फ़ीड को सहेजे गए फ़ीड से हटा दें?" ··· 1832 1837 msgid "Save image crop" 1833 1838 msgstr "फोटो बदलाव सेव करो" 1834 1839 1835 - #: src/view/screens/SavedFeeds.tsx:122 1840 + #: src/view/screens/SavedFeeds.tsx:130 1836 1841 msgid "Saved Feeds" 1837 1842 msgstr "सहेजे गए फ़ीड" 1838 1843 ··· 2419 2424 msgid "You don't have any invite codes yet! We'll send you some when you've been on Bluesky for a little longer." 2420 2425 msgstr "आपके पास अभी तक कोई आमंत्रण कोड नहीं है! जब आप कुछ अधिक समय के लिए Bluesky पर रहेंगे तो हम आपको कुछ भेजेंगे।" 2421 2426 2422 - #: src/view/screens/SavedFeeds.tsx:102 2427 + #: src/view/screens/SavedFeeds.tsx:110 2423 2428 msgid "You don't have any pinned feeds." 2424 2429 msgstr "आपके पास कोई पिन किया हुआ फ़ीड नहीं है." 2425 2430 ··· 2427 2432 msgid "You don't have any saved feeds!" 2428 2433 msgstr "" 2429 2434 2430 - #: src/view/screens/SavedFeeds.tsx:135 2435 + #: src/view/screens/SavedFeeds.tsx:143 2431 2436 msgid "You don't have any saved feeds." 2432 2437 msgstr "आपके पास कोई सहेजी गई फ़ीड नहीं है." 2433 2438

+76 -15

src/view/com/feeds/FeedSourceCard.tsx

··· 32 32 showSaveBtn = false, 33 33 showDescription = false, 34 34 showLikes = false, 35 - LoadingComponent, 36 35 pinOnSave = false, 36 + showMinimalPlaceholder, 37 37 }: { 38 38 feedUri: string 39 39 style?: StyleProp<ViewStyle> 40 40 showSaveBtn?: boolean 41 41 showDescription?: boolean 42 42 showLikes?: boolean 43 - LoadingComponent?: JSX.Element 44 43 pinOnSave?: boolean 44 + showMinimalPlaceholder?: boolean 45 45 }) { 46 46 const {data: preferences} = usePreferencesQuery() 47 47 const {data: feed} = useFeedSourceInfoQuery({uri: feedUri}) 48 - 49 - if (!feed || !preferences) { 50 - return LoadingComponent ? ( 51 - LoadingComponent 52 - ) : ( 53 - <FeedLoadingPlaceholder style={{flex: 1}} /> 54 - ) 55 - } 56 48 57 49 return ( 58 50 <FeedSourceCardLoaded 51 + feedUri={feedUri} 59 52 feed={feed} 60 53 preferences={preferences} 61 54 style={style} ··· 63 56 showDescription={showDescription} 64 57 showLikes={showLikes} 65 58 pinOnSave={pinOnSave} 59 + showMinimalPlaceholder={showMinimalPlaceholder} 66 60 /> 67 61 ) 68 62 } 69 63 70 64 export function FeedSourceCardLoaded({ 65 + feedUri, 71 66 feed, 72 67 preferences, 73 68 style, ··· 75 70 showDescription = false, 76 71 showLikes = false, 77 72 pinOnSave = false, 73 + showMinimalPlaceholder, 78 74 }: { 79 - feed: FeedSourceInfo 80 - preferences: UsePreferencesQueryResponse 75 + feedUri: string 76 + feed?: FeedSourceInfo 77 + preferences?: UsePreferencesQueryResponse 81 78 style?: StyleProp<ViewStyle> 82 79 showSaveBtn?: boolean 83 80 showDescription?: boolean 84 81 showLikes?: boolean 85 82 pinOnSave?: boolean 83 + showMinimalPlaceholder?: boolean 86 84 }) { 87 85 const pal = usePalette('default') 88 86 const {_} = useLingui() ··· 95 93 useRemoveFeedMutation() 96 94 const {isPending: isPinPending, mutateAsync: pinFeed} = usePinFeedMutation() 97 95 98 - const isSaved = Boolean(preferences?.feeds?.saved?.includes(feed.uri)) 96 + const isSaved = Boolean(preferences?.feeds?.saved?.includes(feed?.uri || '')) 99 97 100 98 const onToggleSaved = React.useCallback(async () => { 101 99 // Only feeds can be un/saved, lists are handled elsewhere ··· 105 103 openModal({ 106 104 name: 'confirm', 107 105 title: _(msg`Remove from my feeds`), 108 - message: _(msg`Remove ${feed.displayName} from my feeds?`), 106 + message: _(msg`Remove ${feed?.displayName} from my feeds?`), 109 107 onPressConfirm: async () => { 110 108 try { 111 109 await removeFeed({uri: feed.uri}) ··· 132 130 } 133 131 }, [isSaved, openModal, feed, removeFeed, saveFeed, _, pinOnSave, pinFeed]) 134 132 135 - if (!feed || !preferences) return null 133 + /* 134 + * LOAD STATE 135 + * 136 + * This state also captures the scenario where a feed can't load for whatever 137 + * reason. 138 + */ 139 + if (!feed || !preferences) 140 + return ( 141 + <View 142 + style={[ 143 + pal.border, 144 + { 145 + borderTopWidth: showMinimalPlaceholder ? 0 : 1, 146 + flexDirection: 'row', 147 + alignItems: 'center', 148 + flex: 1, 149 + paddingRight: 18, 150 + }, 151 + ]}> 152 + {showMinimalPlaceholder ? ( 153 + <FeedLoadingPlaceholder 154 + style={{flex: 1}} 155 + showTopBorder={false} 156 + showLowerPlaceholder={false} 157 + /> 158 + ) : ( 159 + <FeedLoadingPlaceholder style={{flex: 1}} showTopBorder={false} /> 160 + )} 161 + 162 + {showSaveBtn && ( 163 + <Pressable 164 + testID={`feed-${feedUri}-toggleSave`} 165 + disabled={isRemovePending} 166 + accessibilityRole="button" 167 + accessibilityLabel={'Remove from my feeds'} 168 + accessibilityHint="" 169 + onPress={() => { 170 + openModal({ 171 + name: 'confirm', 172 + title: _(msg`Remove from my feeds`), 173 + message: _(msg`Remove this feed from my feeds?`), 174 + onPressConfirm: async () => { 175 + try { 176 + await removeFeed({uri: feedUri}) 177 + // await item.unsave() 178 + Toast.show('Removed from my feeds') 179 + } catch (e) { 180 + Toast.show('There was an issue contacting your server') 181 + logger.error('Failed to unsave feed', {error: e}) 182 + } 183 + }, 184 + }) 185 + }} 186 + hitSlop={15} 187 + style={styles.btn}> 188 + <FontAwesomeIcon 189 + icon={['far', 'trash-can']} 190 + size={19} 191 + color={pal.colors.icon} 192 + /> 193 + </Pressable> 194 + )} 195 + </View> 196 + ) 136 197 137 198 return ( 138 199 <Pressable

+1

src/view/com/feeds/ProfileFeedgens.tsx

··· 172 172 if (preferences) { 173 173 return ( 174 174 <FeedSourceCardLoaded 175 + feedUri={item.uri} 175 176 feed={item} 176 177 preferences={preferences} 177 178 style={styles.item}

+2 -2

src/view/com/util/LoadingPlaceholder.tsx

··· 214 214 pal.border, 215 215 style, 216 216 ]}> 217 - <View style={[pal.view, {flexDirection: 'row', marginBottom: 10}]}> 217 + <View style={[pal.view, {flexDirection: 'row'}]}> 218 218 <LoadingPlaceholder 219 219 width={36} 220 220 height={36} ··· 226 226 </View> 227 227 </View> 228 228 {showLowerPlaceholder && ( 229 - <View style={{paddingHorizontal: 5}}> 229 + <View style={{paddingHorizontal: 5, marginTop: 10}}> 230 230 <LoadingPlaceholder 231 231 width={260} 232 232 height={8}

+2 -8

src/view/screens/SavedFeeds.tsx

··· 26 26 useUnpinFeedMutation, 27 27 useSetSaveFeedsMutation, 28 28 } from '#/state/queries/preferences' 29 - import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 30 29 31 30 const HITSLOP_TOP = { 32 31 top: 20, ··· 89 88 <Trans>Pinned Feeds</Trans> 90 89 </Text> 91 90 </View> 91 + 92 92 {preferences?.feeds ? ( 93 93 !currentFeeds.pinned.length ? ( 94 94 <View ··· 290 290 feedUri={feedUri} 291 291 style={styles.noBorder} 292 292 showSaveBtn 293 - LoadingComponent={ 294 - <FeedLoadingPlaceholder 295 - style={{flex: 1}} 296 - showLowerPlaceholder={false} 297 - showTopBorder={false} 298 - /> 299 - } 293 + showMinimalPlaceholder 300 294 /> 301 295 <Pressable 302 296 disabled={isPending}

Configure Feed

Configure Feed