Implement Likes dialog

src/components/Dialog/index.tsx

@@ -2,6 +2,7 @@ import React, {useImperativeHandle} from 'react'
 import {View, Dimensions} from 'react-native'
 import BottomSheet, {
   BottomSheetBackdrop,
+  BottomSheetFlatList,
   BottomSheetScrollView,
   BottomSheetTextInput,
   BottomSheetView,
@@ -23,6 +24,7 @@ export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 // @ts-ignore
 export const Input = createInput(BottomSheetTextInput)
+export const FlatList = BottomSheetFlatList
 
 export function Outer({
   children,

src/components/Dialog/index.web.tsx

@@ -16,6 +16,7 @@ import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export {Input} from '#/components/forms/TextField'
+export {FlatList} from 'react-native'
 
 const stopPropagation = (e: any) => e.stopPropagation()
 

src/components/LikesDialog.tsx

@@ -0,0 +1,140 @@
+import React, {useMemo, useCallback} from 'react'
+import {ActivityIndicator, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
+import {BottomSheetFlatList} from '@gorhom/bottom-sheet'
+
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
+import {useLikedByQuery} from '#/state/queries/post-liked-by'
+import {cleanError} from '#/lib/strings/errors'
+import {logger} from '#/logger'
+
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import * as Dialog from '#/components/Dialog'
+import {Button} from '#/components/Button'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+
+interface LikesDialogProps {
+  control: Dialog.DialogOuterProps['control']
+  uri: string
+}
+
+export function LikesDialog(props: LikesDialogProps) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+
+      <LikesDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+export function LikesDialogInner({control, uri}: LikesDialogProps) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+
+  const {
+    data: resolvedUri,
+    error: resolveError,
+    isFetching: isFetchingResolvedUri,
+  } = useResolveUriQuery(uri)
+  const {
+    data,
+    isFetching,
+    isFetched,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    isError,
+    error,
+  } = useLikedByQuery(resolvedUri?.uri)
+  const likes = useMemo(() => {
+    if (data?.pages) {
+      return data.pages.flatMap(page => page.likes)
+    }
+  }, [data])
+
+  const onEndReached = useCallback(async () => {
+    if (isFetching || !hasNextPage || isError) return
+    try {
+      await fetchNextPage()
+    } catch (err) {
+      logger.error('Failed to load more likes', {message: err})
+    }
+  }, [isFetching, hasNextPage, isError, fetchNextPage])
+
+  const renderItem = useCallback(
+    ({item}: {item: GetLikes.Like}) => {
+      return (
+        <ProfileCardWithFollowBtn
+          key={item.actor.did}
+          profile={item.actor}
+          onPress={() => control.close()}
+        />
+      )
+    },
+    [control],
+  )
+
+  return (
+    <Dialog.Inner
+      accessibilityLabelledBy="dialog-title"
+      accessibilityDescribedBy="">
+      <Text
+        nativeID="dialog-title"
+        style={[a.text_2xl, a.font_bold, a.pb_md, a.leading_tight]}>
+        <Trans>Liked by</Trans>
+      </Text>
+      {isFetchingResolvedUri || !isFetched ? (
+        <ActivityIndicator />
+      ) : resolveError || isError ? (
+        <ErrorMessage message={cleanError(resolveError || error)} />
+      ) : likes?.length === 0 ? (
+        <View style={[t.atoms.bg_contrast_50, a.px_md, a.py_xl, a.rounded_md]}>
+          <Text style={[a.text_center]}>
+            <Trans>
+              Nobody has liked this yet. Maybe you should be the first!
+            </Trans>
+          </Text>
+        </View>
+      ) : (
+        <Dialog.FlatList
+          data={likes}
+          keyExtractor={item => item.actor.did}
+          onEndReached={onEndReached}
+          renderItem={renderItem}
+          initialNumToRender={15}
+          ListFooterComponent={
+            <ListFooterComponent isFetching={isFetchingNextPage} />
+          }
+        />
+      )}
+      <View style={[gtMobile && [a.flex_row, a.justify_end], a.mt_md]}>
+        <Button
+          testID="doneBtn"
+          variant="outline"
+          color="primary"
+          size="small"
+          onPress={() => control.close()}
+          label={_(msg`Done`)}>
+          {_(msg`Done`)}
+        </Button>
+      </View>
+    </Dialog.Inner>
+  )
+}
+
+function ListFooterComponent({isFetching}: {isFetching: boolean}) {
+  if (isFetching) {
+    return (
+      <View style={a.pt_lg}>
+        <ActivityIndicator />
+      </View>
+    )
+  }
+  return null
+}

src/components/moderation/LabelsOnMeDialog.tsx

@@ -32,7 +32,6 @@ export interface LabelsOnMeDialogProps {
 }
 
 export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
-  const t = useTheme()
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {subject, labels} = props
@@ -120,6 +119,7 @@ function Label({
   control: Dialog.DialogOuterProps['control']
 }) {
   const t = useTheme()
+  const {_} = useLingui()
   const {labeler, strings} = useLabelInfo(label)
   return (
     <View
@@ -148,7 +148,11 @@ function Label({
         </InlineLink>
       </View>
       <View>
-        <Button variant="solid" color="secondary" size="small">
+        <Button
+          variant="solid"
+          color="secondary"
+          size="small"
+          label={_(msg`Appeal`)}>
           <ButtonText>
             <Trans>Appeal</Trans>
           </ButtonText>

src/screens/Moderation/index.tsx

@@ -38,7 +38,7 @@ import {InlineLink, Link} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {getModerationServiceTitle} from '#/lib/moderation'
 import * as ModerationServiceCard from '#/components/ModerationServiceCard'
-import {GlobalModerationLabelPref} from '#/components/ModerationLabelPref/SimpleModerationLabelPref'
+import {GlobalModerationLabelPref} from '#/components/moderation/GlobalModerationLabelPref'
 
 function ErrorState({error}: {error: string}) {
   const t = useTheme()

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

@@ -35,6 +35,8 @@ import {
   Heart2_Stroke2_Corner0_Rounded as Heart,
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled,
 } from '#/components/icons/Heart2'
+import {LikesDialog} from '#/components/LikesDialog'
+import * as Dialog from '#/components/Dialog'
 
 interface Props {
   profile: AppBskyActorDefs.ProfileViewDetailed
@@ -56,10 +58,11 @@ let ProfileHeaderLabeler = ({
   const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> =
     useProfileShadow(profileUnshadowed)
   const t = useTheme()
-  const {currentAccount, hasSession} = useSession()
   const {_} = useLingui()
+  const {currentAccount, hasSession} = useSession()
   const {openModal} = useModalControls()
   const {track} = useAnalytics()
+  const likesControl = Dialog.useDialogControl()
   const moderation = useMemo(
     () => moderateProfile(profile, moderationOpts),
     [profile, moderationOpts],
@@ -196,7 +199,7 @@ let ProfileHeaderLabeler = ({
                 />
               </View>
             ) : undefined}
-            <View style={[a.flex_row, a.gap_md, a.align_center, a.pt_md]}>
+            <View style={[a.flex_row, a.gap_xs, a.align_center, a.pt_md]}>
               <Button
                 testID="toggleLikeBtn"
                 size="small"
@@ -214,19 +217,34 @@ let ProfileHeaderLabeler = ({
               </Button>
 
               {typeof labeler.likeCount === 'number' && (
-                <InlineLink
+                <Button
-                  to={'#todo'}
+                  variant="ghost"
-                  style={[t.atoms.text_contrast_medium, a.font_bold]}>
+                  size="tiny"
-                  <Trans>
+                  onPress={() => likesControl.open()}
-                    Liked by {labeler.likeCount}{' '}
+                  label={_(
-                    {pluralize(labeler.likeCount, 'user')}
+                    msg`Liked by ${labeler.likeCount} ${pluralize(
-                  </Trans>
+                      labeler.likeCount,
-                </InlineLink>
+                      'user',
+                    )}`,
+                  )}>
+                  <ButtonText
+                    style={[
+                      t.atoms.text_contrast_medium,
+                      a.font_bold,
+                      a.text_sm,
+                    ]}>
+                    <Trans>
+                      Liked by {labeler.likeCount}{' '}
+                      {pluralize(labeler.likeCount, 'user')}
+                    </Trans>
+                  </ButtonText>
+                </Button>
               )}
             </View>
           </>
         )}
       </View>
+      <LikesDialog control={likesControl} uri={labeler.uri} />
     </ProfileHeaderShell>
   )
 }

src/state/queries/post-liked-by.ts

@@ -12,9 +12,9 @@ const PAGE_SIZE = 30
 type RQPageParam = string | undefined
 
 // TODO refactor invalidate on mutate?
-export const RQKEY = (resolvedUri: string) => ['post-liked-by', resolvedUri]
+export const RQKEY = (resolvedUri: string) => ['liked-by', resolvedUri]
 
-export function usePostLikedByQuery(resolvedUri: string | undefined) {
+export function useLikedByQuery(resolvedUri: string | undefined) {
   return useInfiniteQuery<
     AppBskyFeedGetLikes.OutputSchema,
     Error,

src/view/com/post-thread/PostLikedBy.tsx

@@ -8,7 +8,7 @@ import {ProfileCardWithFollowBtn} from '../profile/ProfileCard'
 import {logger} from '#/logger'
 import {LoadingScreen} from '../util/LoadingScreen'
 import {useResolveUriQuery} from '#/state/queries/resolve-uri'
-import {usePostLikedByQuery} from '#/state/queries/post-liked-by'
+import {useLikedByQuery} from '#/state/queries/post-liked-by'
 import {cleanError} from '#/lib/strings/errors'
 
 export function PostLikedBy({uri}: {uri: string}) {
@@ -28,7 +28,7 @@ export function PostLikedBy({uri}: {uri: string}) {
     isError,
     error,
     refetch,
-  } = usePostLikedByQuery(resolvedUri?.uri)
+  } = useLikedByQuery(resolvedUri?.uri)
   const likes = useMemo(() => {
     if (data?.pages) {
       return data.pages.flatMap(page => page.likes)

src/view/com/profile/ProfileCard.tsx

@@ -31,6 +31,7 @@ export function ProfileCard({
   noBorder,
   followers,
   renderButton,
+  onPress,
   style,
 }: {
   testID?: string
@@ -42,6 +43,7 @@ export function ProfileCard({
   renderButton?: (
     profile: Shadow<AppBskyActorDefs.ProfileViewBasic>,
   ) => React.ReactNode
+  onPress?: () => void
   style?: StyleProp<ViewStyle>
 }) {
   const pal = usePalette('default')
@@ -68,6 +70,7 @@ export function ProfileCard({
       ]}
       href={makeProfileLink(profile)}
       title={profile.handle}
+      onBeforePress={onPress}
       asAnchor
       anchorNoUnderline>
       <View style={styles.layout}>
@@ -233,11 +236,13 @@ export function ProfileCardWithFollowBtn({
   noBg,
   noBorder,
   followers,
+  onPress,
 }: {
   profile: AppBskyActorDefs.ProfileViewBasic
   noBg?: boolean
   noBorder?: boolean
   followers?: AppBskyActorDefs.ProfileView[] | undefined
+  onPress?: () => void
 }) {
   const {currentAccount} = useSession()
   const isMe = profile.did === currentAccount?.did
@@ -253,6 +258,7 @@ export function ProfileCardWithFollowBtn({
           ? undefined
           : profileShadow => <FollowButton profile={profileShadow} />
       }
+      onPress={onPress}
     />
   )
 }

src/view/com/util/Link.tsx

@@ -49,6 +49,7 @@ interface Props extends ComponentProps<typeof TouchableOpacity> {
   anchorNoUnderline?: boolean
   navigationAction?: 'push' | 'replace' | 'navigate'
   onPointerEnter?: () => void
+  onBeforePress?: () => void
 }
 
 export const Link = memo(function Link({
@@ -62,6 +63,7 @@ export const Link = memo(function Link({
   accessible,
   anchorNoUnderline,
   navigationAction,
+  onBeforePress,
   ...props
 }: Props) {
   const {closeModal} = useModalControls()
@@ -71,6 +73,7 @@ export const Link = memo(function Link({
 
   const onPress = React.useCallback(
     (e?: Event) => {
+      onBeforePress?.()
       if (typeof href === 'string') {
         return onPressInner(
           closeModal,
@@ -82,7 +85,7 @@ export const Link = memo(function Link({
         )
       }
     },
-    [closeModal, navigation, navigationAction, href, openLink],
+    [closeModal, navigation, navigationAction, href, openLink, onBeforePress],
   )
 
   if (noFeedback) {