FeedCard & ListCard cleanups (#4644)

* Extract ListCard from FeedCard

* Export FeedCard.Action and optionally include in ListCard

* Remove list dual usage from most of FeedCard

* Update usages of FeedCard and ListCard

* Add back list purpose logic

* Make Action comp easier to use, clarify list purpose

* Rename Action to SaveButton

src/components/FeedCard.tsx

@@ -18,7 +18,7 @@ import {
   useRemoveFeedMutation,
 } from '#/state/queries/preferences'
 import {sanitizeHandle} from 'lib/strings/handles'
-import {precacheFeedFromGeneratorView, precacheList} from 'state/queries/feed'
+import {precacheFeedFromGeneratorView} from 'state/queries/feed'
 import {useSession} from 'state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import * as Toast from 'view/com/util/Toast'
@@ -33,45 +33,31 @@ import * as Prompt from '#/components/Prompt'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
-type Props =
+type Props = {
-  | {
+  view: AppBskyFeedDefs.GeneratorView
-      type: 'feed'
+}
-      view: AppBskyFeedDefs.GeneratorView
-    }
-  | {
-      type: 'list'
-      view: AppBskyGraphDefs.ListView
-    }
 
 export function Default(props: Props) {
-  const {type, view} = props
+  const {view} = props
-  const displayName = type === 'feed' ? view.displayName : view.name
-  const purpose = type === 'list' ? view.purpose : undefined
   return (
-    <Link label={displayName} {...props}>
+    <Link label={view.displayName} {...props}>
       <Outer>
         <Header>
           <Avatar src={view.avatar} />
-          <TitleAndByline
+          <TitleAndByline title={view.displayName} creator={view.creator} />
-            title={displayName}
+          <SaveButton view={view} pin />
-            creator={view.creator}
-            type={type}
-            purpose={purpose}
-          />
-          <Action uri={view.uri} pin type={type} purpose={purpose} />
         </Header>
         <Description description={view.description} />
-        {type === 'feed' && <Likes count={view.likeCount || 0} />}
+        <Likes count={view.likeCount || 0} />
       </Outer>
     </Link>
   )
 }
 
 export function Link({
-  type,
   view,
-  label,
   children,
+  ...props
 }: Props & Omit<LinkProps, 'to'>) {
   const queryClient = useQueryClient()
 
@@ -79,17 +65,12 @@ export function Link({
     return createProfileFeedHref({feed: view})
   }, [view])
 
+  React.useEffect(() => {
+    precacheFeedFromGeneratorView(queryClient, view)
+  }, [view, queryClient])
+
   return (
-    <InternalLink
+    <InternalLink to={href} {...props}>
-      to={href}
-      label={label}
-      onPress={() => {
-        if (type === 'feed') {
-          precacheFeedFromGeneratorView(queryClient, view)
-        } else {
-          precacheList(queryClient, view)
-        }
-      }}>
       {children}
     </InternalLink>
   )
@@ -132,13 +113,9 @@ export function AvatarPlaceholder({size = 40}: Omit<AvatarProps, 'src'>) {
 export function TitleAndByline({
   title,
   creator,
-  type,
-  purpose,
 }: {
   title: string
   creator?: AppBskyActorDefs.ProfileViewBasic
-  type: 'feed' | 'list'
-  purpose?: AppBskyGraphDefs.ListView['purpose']
 }) {
   const t = useTheme()
 
@@ -151,15 +128,7 @@ export function TitleAndByline({
         <Text
           style={[a.leading_snug, t.atoms.text_contrast_medium]}
           numberOfLines={1}>
-          {type === 'list' && purpose === 'app.bsky.graph.defs#curatelist' ? (
+          <Trans>Feed by {sanitizeHandle(creator.handle, '@')}</Trans>
-            <Trans>List by {sanitizeHandle(creator.handle, '@')}</Trans>
-          ) : type === 'list' && purpose === 'app.bsky.graph.defs#modlist' ? (
-            <Trans>
-              Moderation list by {sanitizeHandle(creator.handle, '@')}
-            </Trans>
-          ) : (
-            <Trans>Feed by {sanitizeHandle(creator.handle, '@')}</Trans>
-          )}
         </Text>
       )}
     </View>
@@ -221,34 +190,24 @@ export function Likes({count}: {count: number}) {
   )
 }
 
-export function Action({
+export function SaveButton({
-  uri,
+  view,
   pin,
-  type,
-  purpose,
 }: {
-  uri: string
+  view: AppBskyFeedDefs.GeneratorView | AppBskyGraphDefs.ListView
   pin?: boolean
-  type: 'feed' | 'list'
-  purpose?: AppBskyGraphDefs.ListView['purpose']
 }) {
   const {hasSession} = useSession()
-  if (
+  if (!hasSession) return null
-    !hasSession ||
+  return <SaveButtonInner view={view} pin={pin} />
-    (type === 'list' && purpose !== 'app.bsky.graph.defs#curatelist')
-  )
-    return null
-  return <ActionInner uri={uri} pin={pin} type={type} />
 }
 
-function ActionInner({
+function SaveButtonInner({
-  uri,
+  view,
   pin,
-  type,
 }: {
-  uri: string
+  view: AppBskyFeedDefs.GeneratorView | AppBskyGraphDefs.ListView
   pin?: boolean
-  type: 'feed' | 'list'
 }) {
   const {_} = useLingui()
   const {data: preferences} = usePreferencesQuery()
@@ -256,6 +215,10 @@ function ActionInner({
     useAddSavedFeedsMutation()
   const {isPending: isRemovePending, mutateAsync: removeFeed} =
     useRemoveFeedMutation()
+
+  const uri = view.uri
+  const type = view.uri.includes('app.bsky.feed.generator') ? 'feed' : 'list'
+
   const savedFeedConfig = React.useMemo(() => {
     return preferences?.savedFeeds?.find(feed => feed.value === uri)
   }, [preferences?.savedFeeds, uri])
@@ -332,12 +295,9 @@ function ActionInner({
 export function createProfileFeedHref({
   feed,
 }: {
-  feed: AppBskyFeedDefs.GeneratorView | AppBskyGraphDefs.ListView
+  feed: AppBskyFeedDefs.GeneratorView
 }) {
   const urip = new AtUri(feed.uri)
-  const type = urip.collection === 'app.bsky.feed.generator' ? 'feed' : 'list'
   const handleOrDid = feed.creator.handle || feed.creator.did
-  return `/profile/${handleOrDid}/${type === 'feed' ? 'feed' : 'lists'}/${
+  return `/profile/${handleOrDid}/feed/${urip.rkey}`
-    urip.rkey
-  }`
 }

src/components/ListCard.tsx

@@ -0,0 +1,129 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyActorDefs, AppBskyGraphDefs, AtUri} from '@atproto/api'
+import {Trans} from '@lingui/macro'
+import {useQueryClient} from '@tanstack/react-query'
+
+import {sanitizeHandle} from 'lib/strings/handles'
+import {precacheList} from 'state/queries/feed'
+import {useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
+import {
+  Avatar,
+  Description,
+  Header,
+  Outer,
+  SaveButton,
+} from '#/components/FeedCard'
+import {Link as InternalLink, LinkProps} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+/*
+ * This component is based on `FeedCard` and is tightly coupled with that
+ * component. Please refer to `FeedCard` for more context.
+ */
+
+export {
+  Avatar,
+  AvatarPlaceholder,
+  Description,
+  Header,
+  Outer,
+  SaveButton,
+  TitleAndBylinePlaceholder,
+} from '#/components/FeedCard'
+
+const CURATELIST = 'app.bsky.graph.defs#curatelist'
+const MODLIST = 'app.bsky.graph.defs#modlist'
+
+type Props = {
+  view: AppBskyGraphDefs.ListView
+  showPinButton?: boolean
+}
+
+export function Default(props: Props) {
+  const {view, showPinButton} = props
+  return (
+    <Link label={view.name} {...props}>
+      <Outer>
+        <Header>
+          <Avatar src={view.avatar} />
+          <TitleAndByline
+            title={view.name}
+            creator={view.creator}
+            purpose={view.purpose}
+          />
+          {showPinButton && view.purpose === CURATELIST && (
+            <SaveButton view={view} pin />
+          )}
+        </Header>
+        <Description description={view.description} />
+      </Outer>
+    </Link>
+  )
+}
+
+export function Link({
+  view,
+  children,
+  ...props
+}: Props & Omit<LinkProps, 'to'>) {
+  const queryClient = useQueryClient()
+
+  const href = React.useMemo(() => {
+    return createProfileListHref({list: view})
+  }, [view])
+
+  React.useEffect(() => {
+    precacheList(queryClient, view)
+  }, [view, queryClient])
+
+  return (
+    <InternalLink to={href} {...props}>
+      {children}
+    </InternalLink>
+  )
+}
+
+export function TitleAndByline({
+  title,
+  creator,
+  purpose = CURATELIST,
+}: {
+  title: string
+  creator?: AppBskyActorDefs.ProfileViewBasic
+  purpose?: AppBskyGraphDefs.ListView['purpose']
+}) {
+  const t = useTheme()
+
+  return (
+    <View style={[a.flex_1]}>
+      <Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
+        {title}
+      </Text>
+      {creator && (
+        <Text
+          style={[a.leading_snug, t.atoms.text_contrast_medium]}
+          numberOfLines={1}>
+          {purpose === MODLIST ? (
+            <Trans>
+              Moderation list by {sanitizeHandle(creator.handle, '@')}
+            </Trans>
+          ) : (
+            <Trans>List by {sanitizeHandle(creator.handle, '@')}</Trans>
+          )}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export function createProfileListHref({
+  list,
+}: {
+  list: AppBskyGraphDefs.ListView
+}) {
+  const urip = new AtUri(list.uri)
+  const handleOrDid = list.creator.handle || list.creator.did
+  return `/profile/${handleOrDid}/lists/${urip.rkey}`
+}

src/components/StarterPack/Main/FeedsList.tsx

@@ -45,7 +45,7 @@ export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
             (isWeb || index !== 0) && a.border_t,
             t.atoms.border_contrast_low,
           ]}>
-          <FeedCard.Default type="feed" view={item} />
+          <FeedCard.Default view={item} />
         </View>
       )
     }

src/screens/StarterPack/StarterPackLandingScreen.tsx

@@ -316,7 +316,7 @@ function LandingScreenLoaded({
                         t.atoms.border_contrast_low,
                       ]}
                       key={feed.uri}>
-                      <FeedCard.Default type="feed" view={feed} />
+                      <FeedCard.Default view={feed} />
                     </View>
                   ))}
                 </View>

src/view/com/feeds/ProfileFeedgens.tsx

@@ -163,7 +163,7 @@ export const ProfileFeedgens = React.forwardRef<
             a.px_lg,
             a.py_lg,
           ]}>
-          <FeedCard.Default type="feed" view={item} />
+          <FeedCard.Default view={item} />
         </View>
       )
     }

src/view/com/lists/ProfileLists.tsx

@@ -18,7 +18,7 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {EmptyState} from 'view/com/util/EmptyState'
 import {atoms as a, useTheme} from '#/alf'
-import * as FeedCard from '#/components/FeedCard'
+import * as ListCard from '#/components/ListCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List, ListRef} from '../util/List'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
@@ -172,7 +172,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
               a.px_lg,
               a.py_lg,
             ]}>
-            <FeedCard.Default type="list" view={item} />
+            <ListCard.Default view={item} />
           </View>
         )
       },

src/view/screens/Feeds.tsx

@@ -41,6 +41,7 @@ import hairlineWidth = StyleSheet.hairlineWidth
 import {Divider} from '#/components/Divider'
 import * as FeedCard from '#/components/FeedCard'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
+import * as ListCard from '#/components/ListCard'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'>
 
@@ -495,7 +496,7 @@ export function FeedsScreen(_props: Props) {
       } else if (item.type === 'popularFeed') {
         return (
           <View style={[a.px_lg, a.pt_lg, a.gap_lg]}>
-            <FeedCard.Default type="feed" view={item.feed} />
+            <FeedCard.Default view={item.feed} />
             <Divider />
           </View>
         )
@@ -627,7 +628,7 @@ function FollowingFeed() {
             fill={t.palette.white}
           />
         </View>
-        <FeedCard.TitleAndByline title={_(msg`Following`)} type="feed" />
+        <FeedCard.TitleAndByline title={_(msg`Following`)} />
       </FeedCard.Header>
     </View>
   )
@@ -639,34 +640,45 @@ function SavedFeed({
   savedFeed: SavedFeedItem & {type: 'feed' | 'list'}
 }) {
   const t = useTheme()
-  const {view: feed} = savedFeed
-  const displayName =
-    savedFeed.type === 'feed' ? savedFeed.view.displayName : savedFeed.view.name
 
-  return (
+  const commonStyle = [
-    <FeedCard.Link testID={`saved-feed-${feed.displayName}`} {...savedFeed}>
+    a.flex_1,
+    a.px_lg,
+    a.py_md,
+    a.border_b,
+    t.atoms.border_contrast_low,
+  ]
+
+  return savedFeed.type === 'feed' ? (
+    <FeedCard.Link
+      testID={`saved-feed-${savedFeed.view.displayName}`}
+      {...savedFeed}>
       {({hovered, pressed}) => (
         <View
-          style={[
+          style={[commonStyle, (hovered || pressed) && t.atoms.bg_contrast_25]}>
-            a.flex_1,
-            a.px_lg,
-            a.py_md,
-            a.border_b,
-            t.atoms.border_contrast_low,
-            (hovered || pressed) && t.atoms.bg_contrast_25,
-          ]}>
           <FeedCard.Header>
-            <FeedCard.Avatar src={feed.avatar} size={28} />
+            <FeedCard.Avatar src={savedFeed.view.avatar} size={28} />
-            <FeedCard.TitleAndByline
+            <FeedCard.TitleAndByline title={savedFeed.view.displayName} />
-              title={displayName}
-              type={savedFeed.type}
-            />
 
             <ChevronRight size="sm" fill={t.atoms.text_contrast_low.color} />
           </FeedCard.Header>
         </View>
       )}
     </FeedCard.Link>
+  ) : (
+    <ListCard.Link testID={`saved-feed-${savedFeed.view.name}`} {...savedFeed}>
+      {({hovered, pressed}) => (
+        <View
+          style={[commonStyle, (hovered || pressed) && t.atoms.bg_contrast_25]}>
+          <ListCard.Header>
+            <ListCard.Avatar src={savedFeed.view.avatar} size={28} />
+            <ListCard.TitleAndByline title={savedFeed.view.name} />
+
+            <ChevronRight size="sm" fill={t.atoms.text_contrast_low.color} />
+          </ListCard.Header>
+        </View>
+      )}
+    </ListCard.Link>
   )
 }
 

src/view/screens/Search/Explore.tsx

@@ -505,7 +505,7 @@ export function Explore() {
                 a.px_lg,
                 a.py_lg,
               ]}>
-              <FeedCard.Default type="feed" view={item.feed} />
+              <FeedCard.Default view={item.feed} />
             </View>
           )
         }

src/view/screens/Search/Search.tsx

@@ -306,7 +306,7 @@ let SearchScreenFeedsResults = ({
                 a.px_lg,
                 a.py_lg,
               ]}>
-              <FeedCard.Default type="feed" view={item} />
+              <FeedCard.Default view={item} />
             </View>
           )}
           keyExtractor={item => item.uri}