Introduce new utils for profiles, migrate old ProfileCard

src/types/profile.ts

@@ -0,0 +1,65 @@
+import {AppBskyActorDefs} from '@atproto/api'
+
+export {
+  /**
+   * Renamed to clarify source of this util, but directly aliases the original.
+   * {@link AppBskyActorDefs.isProfileViewBasic}
+   */
+  isProfileViewBasic as isBasicView,
+  /**
+   * Renamed to clarify source of this util, but directly aliases the original.
+   * {@link AppBskyActorDefs.isProfileViewDetailed}
+   */
+  isProfileViewDetailed as isDetailedView,
+  /**
+   * Renamed to clarify source of this util, but directly aliases the original.
+   * {@link AppBskyActorDefs.isProfileView}
+   */
+  isProfileView as isView,
+} from '@atproto/api/dist/client/types/app/bsky/actor/defs'
+
+/**
+ * Matches any profile view exported by our SDK
+ */
+export type AnyView =
+  | AppBskyActorDefs.ProfileViewBasic
+  | AppBskyActorDefs.ProfileView
+  | AppBskyActorDefs.ProfileViewDetailed
+
+/**
+ * Downgrades any profile view to the most basic form.
+ */
+export function anyToBasic(view: AnyView): AppBskyActorDefs.ProfileViewBasic {
+  return {
+    $type: 'app.bsky.actor.defs#profileViewBasic',
+    did: view.did,
+    handle: view.handle,
+    displayName: view.displayName,
+    avatar: view.avatar,
+    associated: view.associated,
+    viewer: view.viewer,
+    labels: view.labels,
+    createdAt: view.createdAt,
+  }
+}
+
+/**
+ * Downgrades a detailed profile view to the `ProfileView` form.
+ */
+export function detailedToView(
+  view: AppBskyActorDefs.ProfileViewDetailed,
+): AppBskyActorDefs.ProfileView {
+  return {
+    $type: 'app.bsky.actor.defs#profileView',
+    did: view.did,
+    handle: view.handle,
+    displayName: view.displayName,
+    avatar: view.avatar,
+    associated: view.associated,
+    viewer: view.viewer,
+    labels: view.labels,
+    createdAt: view.createdAt,
+    description: view.description,
+    indexedAt: view.indexedAt,
+  }
+}

src/view/com/lists/ListMembers.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react'
 import {Dimensions, StyleProp, View, ViewStyle} from 'react-native'
-import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api'
+import {AppBskyGraphDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -11,6 +11,7 @@ import {useModalControls} from '#/state/modals'
 import {useListMembersQuery} from '#/state/queries/list-members'
 import {useSession} from '#/state/session'
 import {ListFooter} from '#/components/Lists'
+import * as Profile from '#/types/profile'
 import {ProfileCard} from '../profile/ProfileCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Button} from '../util/forms/Button'
@@ -116,7 +117,7 @@ export function ListMembers({
   }, [fetchNextPage])
 
   const onPressEditMembership = React.useCallback(
-    (profile: AppBskyActorDefs.ProfileViewBasic) => {
+    (profile: Profile.AnyView) => {
       openModal({
         name: 'user-add-remove-lists',
         subject: profile.did,
@@ -131,7 +132,7 @@ export function ListMembers({
   // =
 
   const renderMemberButton = React.useCallback(
-    (profile: AppBskyActorDefs.ProfileViewBasic) => {
+    (profile: Profile.AnyView) => {
       if (!isOwner) {
         return null
       }

src/view/com/profile/FollowButton.tsx

@@ -1,10 +1,10 @@
 import {StyleProp, TextStyle, View} from 'react-native'
-import {AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {Shadow} from '#/state/cache/types'
 import {useProfileFollowMutationQueue} from '#/state/queries/profile'
+import * as Profile from '#/types/profile'
 import {Button, ButtonType} from '../util/forms/Button'
 import * as Toast from '../util/Toast'
 
@@ -17,7 +17,7 @@ export function FollowButton({
 }: {
   unfollowedType?: ButtonType
   followedType?: ButtonType
-  profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
+  profile: Shadow<Profile.AnyView>
   labelStyle?: StyleProp<TextStyle>
   logContext: 'ProfileCard' | 'StarterPackProfilesList'
 }) {

src/view/com/profile/ProfileCard.tsx

@@ -24,6 +24,7 @@ import {
   shouldShowKnownFollowers,
 } from '#/components/KnownFollowers'
 import * as Pills from '#/components/Pills'
+import * as Profile from '#/types/profile'
 import {Link} from '../util/Link'
 import {Text} from '../util/text/Text'
 import {PreviewableUserAvatar} from '../util/UserAvatar'
@@ -41,13 +42,11 @@ export function ProfileCard({
   showKnownFollowers,
 }: {
   testID?: string
-  profile: Omit<AppBskyActorDefs.ProfileViewBasic, '$type'>
+  profile: Profile.AnyView
   noModFilter?: boolean
   noBg?: boolean
   noBorder?: boolean
-  renderButton?: (
+  renderButton?: (profile: Shadow<Profile.AnyView>) => React.ReactNode
-    profile: Shadow<AppBskyActorDefs.ProfileViewBasic>,
-  ) => React.ReactNode
   onPress?: () => void
   style?: StyleProp<ViewStyle>
   showKnownFollowers?: boolean
@@ -60,7 +59,7 @@ export function ProfileCard({
 
   const onBeforePress = React.useCallback(() => {
     onPress?.()
-    precacheProfile(queryClient, profile)
+    precacheProfile(queryClient, Profile.anyToBasic(profile))
   }, [onPress, profile, queryClient])
 
   if (!moderationOpts) {
@@ -126,6 +125,8 @@ export function ProfileCard({
           <View style={styles.layoutButton}>{renderButton(profile)}</View>
         ) : undefined}
       </View>
+      {Profile.isView(profile) || Profile.isDetailedView(profile) ? (
+        <>
           {profile.description || knownFollowersVisible ? (
             <View style={styles.details}>
               {profile.description ? (
@@ -141,15 +142,19 @@ export function ProfileCard({
                     a.gap_sm,
                     !!profile.description && a.mt_md,
                   ]}>
+                  {Profile.isDetailedView(profile) && (
                     <KnownFollowers
                       minimal
                       profile={profile}
                       moderationOpts={moderationOpts}
                     />
+                  )}
                 </View>
               ) : null}
             </View>
           ) : null}
+        </>
+      ) : null}
     </Link>
   )
 }