Feeds tab fixes (#1486)

* Bold the saved feeds on mobile * Improve the saved feeds loading state * Add soft reset handler to feeds page * Show feed descriptions in profile listing * Add an 'about this feed' modal * Fix type assertion
bluesky-social · Sep 20, 2023 · 971c802 · 971c802
1 parent 753fb8b
commit 971c802
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 12 deletions.
diff --git a/src/state/models/ui/my-feeds.ts b/src/state/models/ui/my-feeds.ts
@@ -8,6 +8,11 @@ export type MyFeedsItem =
       _reactKey: string
       type: 'spinner'
     }
+  | {
+      _reactKey: string
+      type: 'saved-feeds-loading'
+      numItems: number
+    }
   | {
       _reactKey: string
       type: 'discover-feeds-loading'
@@ -91,7 +96,8 @@ export class MyFeedsUIModel {
     if (this.saved.isLoading) {
       items.push({
         _reactKey: '__saved_feeds_loading__',
-        type: 'spinner',
+        type: 'saved-feeds-loading',
+        numItems: this.rootStore.preferences.savedFeeds.length || 3,
       })
     } else if (this.saved.hasError) {
       items.push({

diff --git a/src/view/screens/CustomFeed.tsx b/src/view/screens/CustomFeed.tsx
@@ -185,6 +185,17 @@ export const CustomFeedScreenInner = observer(
       })
     }, [store, currentFeed])
 
+    const onPressAbout = React.useCallback(() => {
+      store.shell.openModal({
+        name: 'confirm',
+        title: currentFeed?.displayName || '',
+        message:
+          currentFeed?.data.description || 'This feed has no description.',
+        confirmBtnText: 'Close',
+        onPressConfirm() {},
+      })
+    }, [store, currentFeed])
+
     const onPressViewAuthor = React.useCallback(() => {
       navigation.navigate('Profile', {name: handleOrDid})
     }, [handleOrDid, navigation])
@@ -233,7 +244,21 @@ export const CustomFeedScreenInner = observer(
     }, [store, onSoftReset, isScreenFocused])
 
     const dropdownItems: DropdownItem[] = React.useMemo(() => {
-      let items: DropdownItem[] = [
+      return [
+        currentFeed
+          ? {
+              testID: 'feedHeaderDropdownAboutBtn',
+              label: 'About this feed',
+              onPress: onPressAbout,
+              icon: {
+                ios: {
+                  name: 'info.circle',
+                },
+                android: '',
+                web: 'info',
+              },
+            }
+          : undefined,
         {
           testID: 'feedHeaderDropdownViewAuthorBtn',
           label: 'View author',
@@ -292,10 +317,10 @@ export const CustomFeedScreenInner = observer(
             web: 'share',
           },
         },
-      ]
-      return items
+      ].filter(Boolean) as DropdownItem[]
     }, [
-      currentFeed?.isSaved,
+      currentFeed,
+      onPressAbout,
       onToggleSaved,
       onPressReport,
       onPressShare,

diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
@@ -16,7 +16,10 @@ import {ComposeIcon2, CogIcon} from 'lib/icons'
 import {s} from 'lib/styles'
 import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {UserAvatar} from 'view/com/util/UserAvatar'
-import {FeedFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
+import {
+  LoadingPlaceholder,
+  FeedFeedLoadingPlaceholder,
+} from 'view/com/util/LoadingPlaceholder'
 import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
 import debounce from 'lodash.debounce'
 import {Text} from 'view/com/util/text/Text'
@@ -42,7 +45,12 @@ export const FeedsScreen = withAuthRequired(
       React.useCallback(() => {
         store.shell.setMinimalShellMode(false)
         myFeeds.setup()
-      }, [store.shell, myFeeds]),
+
+        const softResetSub = store.onScreenSoftReset(() => myFeeds.refresh())
+        return () => {
+          softResetSub.remove()
+        }
+      }, [store, myFeeds]),
     )
 
     const onPressCompose = React.useCallback(() => {
@@ -119,6 +127,14 @@ export const FeedsScreen = withAuthRequired(
             )
           }
           return <View />
+        } else if (item.type === 'saved-feeds-loading') {
+          return (
+            <>
+              {Array.from(Array(item.numItems)).map((_, i) => (
+                <SavedFeedLoadingPlaceholder key={`placeholder-${i}`} />
+              ))}
+            </>
+          )
         } else if (item.type === 'saved-feed') {
           return (
             <SavedFeed
@@ -262,10 +278,7 @@ function SavedFeed({
       asAnchor
       anchorNoUnderline>
       <UserAvatar type="algo" size={28} avatar={avatar} />
-      <Text
-        type={isMobile ? 'lg' : 'lg-medium'}
-        style={[pal.text, s.flex1]}
-        numberOfLines={1}>
+      <Text type="lg-medium" style={[pal.text, s.flex1]} numberOfLines={1}>
         {displayName}
       </Text>
       {isMobile && (
@@ -279,6 +292,22 @@ function SavedFeed({
   )
 }
 
+function SavedFeedLoadingPlaceholder() {
+  const pal = usePalette('default')
+  const {isMobile} = useWebMediaQueries()
+  return (
+    <View
+      style={[
+        pal.border,
+        styles.savedFeed,
+        isMobile && styles.savedFeedMobile,
+      ]}>
+      <LoadingPlaceholder width={28} height={28} style={{borderRadius: 4}} />
+      <LoadingPlaceholder width={140} height={12} />
+    </View>
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
@@ -187,7 +187,9 @@ export const ProfileScreen = withAuthRequired(
               />
             )
           } else if (item instanceof CustomFeedModel) {
-            return <CustomFeed item={item} showSaveBtn showLikes />
+            return (
+              <CustomFeed item={item} showSaveBtn showLikes showDescription />
+            )
           }
           // if section is posts or posts & replies
         } else {