Add fan club text post reactions

packages/common/src/api/tan-query/comments/useReactToComment.ts

@@ -16,6 +16,7 @@ export type ReactToCommentArgs = {
   currentSort: any
   trackId: ID
   isEntityOwner?: boolean
+  entityType?: 'Track' | 'FanClub'
 }
 
 export const useReactToComment = () => {
@@ -27,20 +28,21 @@ export const useReactToComment = () => {
       userId,
       commentId,
       isLiked,
-      trackId
+      trackId,
+      entityType = 'Track'
     }: ReactToCommentArgs) => {
       const sdk = await audiusSdk()
       if (isLiked) {
         await sdk.comments.reactToComment({
           userId: Id.parse(userId)!,
           commentId: Id.parse(commentId)!,
-          metadata: { entityId: trackId, entityType: 'Track' }
+          metadata: { entityId: trackId, entityType }
         })
       } else {
         await sdk.comments.unreactToComment({
           userId: Id.parse(userId)!,
           commentId: Id.parse(commentId)!,
-          metadata: { entityId: trackId, entityType: 'Track' }
+          metadata: { entityId: trackId, entityType }
         })
       }
     },

packages/mobile/src/screens/coin-details-screen/components/TextPostCard.tsx

@@ -1,6 +1,11 @@
 import { useCallback } from 'react'
 
-import { useComment } from '@audius/common/api'
+import {
+  useComment,
+  useCurrentUserId,
+  useReactToComment,
+  useArtistCoin
+} from '@audius/common/api'
 import type { ID } from '@audius/common/models'
 import { getLargestTimeUnitText } from '@audius/common/utils'
 
@@ -13,6 +18,7 @@ import {
   Text
 } from '@audius/harmony-native'
 import { ProfilePicture } from 'app/components/core'
+import { FavoriteButton } from 'app/components/favorite-button'
 import { UserLink } from 'app/components/user-link'
 import { useDrawer } from 'app/hooks/useDrawer'
 
@@ -28,8 +34,26 @@ type TextPostCardProps = {
 
 export const TextPostCard = ({ commentId, mint }: TextPostCardProps) => {
   const { data: comment, isPending } = useComment(commentId)
+  const { data: currentUserId } = useCurrentUserId()
+  const { data: coin } = useArtistCoin(mint)
+  const { mutate: reactToComment } = useReactToComment()
   const { onOpen: openLockedTextPostDrawer } = useDrawer('LockedTextPost')
 
+  const isCoinOwner = currentUserId != null && coin?.ownerId === currentUserId
+
+  const handleReact = useCallback(() => {
+    if (!currentUserId || !comment) return
+    reactToComment({
+      commentId,
+      userId: currentUserId,
+      isLiked: !comment.isCurrentUserReacted,
+      currentSort: 'newest',
+      trackId: comment.entityId,
+      isEntityOwner: isCoinOwner,
+      entityType: 'FanClub'
+    })
+  }, [currentUserId, comment, commentId, reactToComment, isCoinOwner])
+
   const handleUnlock = useCallback(() => {
     openLockedTextPostDrawer({ mint })
   }, [openLockedTextPostDrawer, mint])
@@ -103,9 +127,23 @@ export const TextPostCard = ({ commentId, mint }: TextPostCardProps) => {
           </Flex>
         </Flex>
       ) : (
-        <Text variant='body' size='m'>
-          {comment.message}
-        </Text>
+        <>
+          <Text variant='body' size='m'>
+            {comment.message}
+          </Text>
+          <Flex direction='row' alignItems='center' gap='xs'>
+            <FavoriteButton
+              onPress={handleReact}
+              isActive={comment.isCurrentUserReacted}
+              wrapperStyle={{ height: 20, width: 20 }}
+            />
+            {comment.reactCount > 0 ? (
+              <Text variant='body' size='s'>
+                {comment.reactCount}
+              </Text>
+            ) : null}
+          </Flex>
+        </>
       )}
     </Paper>
   )

packages/web/src/pages/fan-club-detail-page/components/TextPostCard.tsx

@@ -5,6 +5,7 @@ import {
   useCurrentUserId,
   useEditComment,
   useDeleteTextPost,
+  useReactToComment,
   useArtistCoin
 } from '@audius/common/api'
 import { ID } from '@audius/common/models'
@@ -72,6 +73,7 @@ export const TextPostCard = ({ commentId, mint }: TextPostCardProps) => {
   const { data: coin } = useArtistCoin(mint)
   const { mutate: editComment } = useEditComment()
   const { mutate: deleteTextPost } = useDeleteTextPost()
+  const { mutate: reactToComment } = useReactToComment()
 
   const [isEditing, setIsEditing] = useState(false)
   const [editMessageId, setEditMessageId] = useState(0)
@@ -82,6 +84,19 @@ export const TextPostCard = ({ commentId, mint }: TextPostCardProps) => {
   const isCoinOwner = currentUserId != null && coin?.ownerId === currentUserId
   const canModify = isOwner || isCoinOwner
 
+  const handleReact = useCallback(() => {
+    if (!currentUserId || !comment) return
+    reactToComment({
+      commentId,
+      userId: currentUserId,
+      isLiked: !comment.isCurrentUserReacted,
+      currentSort: 'newest',
+      trackId: comment.entityId,
+      isEntityOwner: isCoinOwner,
+      entityType: 'FanClub'
+    })
+  }, [currentUserId, comment, commentId, reactToComment, isCoinOwner])
+
   const handleEdit = useCallback(() => {
     setEditMessageId((prev) => prev + 1)
     setIsEditing(true)
@@ -254,6 +269,7 @@ export const TextPostCard = ({ commentId, mint }: TextPostCardProps) => {
                   color={comment.isCurrentUserReacted ? 'active' : 'subdued'}
                   aria-label='Heart post'
                   size='s'
+                  onClick={handleReact}
                 />
                 {comment.reactCount > 0 ? (
                   <Text variant='body' size='s'>