✨ Add Likes and Repost viewer in post thread view (#145)

components/common/feeds/Likes.tsx

@@ -0,0 +1,35 @@
+import client from '@/lib/client'
+import { AccountsGrid } from '@/repositories/AccountView'
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { LoadMoreButton } from '../LoadMoreButton'
+
+const useLikes = (uri: string, cid?: string) => {
+  return useInfiniteQuery({
+    queryKey: ['likes', { uri, cid }],
+    queryFn: async ({ pageParam }) => {
+      const { data } = await client.api.app.bsky.feed.getLikes({
+        uri,
+        cid,
+        limit: 50,
+        cursor: pageParam,
+      })
+      return data
+    },
+    getNextPageParam: (lastPage) => lastPage.cursor,
+  })
+}
+
+export const Likes = ({ uri, cid }: { uri: string; cid?: string }) => {
+  const { data, fetchNextPage, hasNextPage } = useLikes(uri, cid)
+  const likes = data?.pages.flatMap((page) => page.likes) || []
+  return (
+    <>
+      <AccountsGrid error="" accounts={likes.map((l) => l.actor)} />
+      {hasNextPage && (
+        <div className="flex justify-center">
+          <LoadMoreButton onClick={() => fetchNextPage()} />
+        </div>
+      )}
+    </>
+  )
+}

components/common/feeds/Reposts.tsx

@@ -0,0 +1,35 @@
+import client from '@/lib/client'
+import { AccountsGrid } from '@/repositories/AccountView'
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { LoadMoreButton } from '../LoadMoreButton'
+
+const useReposts = (uri: string, cid?: string) => {
+  return useInfiniteQuery({
+    queryKey: ['reposts', { uri, cid }],
+    queryFn: async ({ pageParam }) => {
+      const { data } = await client.api.app.bsky.feed.getRepostedBy({
+        uri,
+        cid,
+        limit: 50,
+        cursor: pageParam,
+      })
+      return data
+    },
+    getNextPageParam: (lastPage) => lastPage.cursor,
+  })
+}
+
+export const Reposts = ({ uri, cid }: { uri: string; cid?: string }) => {
+  const { data, fetchNextPage, hasNextPage } = useReposts(uri, cid)
+  const accounts = data?.pages.flatMap((page) => page.repostedBy) || []
+  return (
+    <>
+      <AccountsGrid error="" accounts={accounts} />
+      {hasNextPage && (
+        <div className="flex justify-center">
+          <LoadMoreButton onClick={() => fetchNextPage()} />
+        </div>
+      )}
+    </>
+  )
+}

components/repositories/RecordView.tsx

@@ -12,32 +12,33 @@ import {
   ChevronLeftIcon,
   ExclamationCircleIcon,
 } from '@heroicons/react/20/solid'
-import { Json } from '../common/Json'
+import { Json } from '@/common/Json'
 import { classNames, parseAtUri } from '@/lib/util'
-import { PostAsCard } from '../common/posts/PostsFeed'
+import { PostAsCard } from '@/common/posts/PostsFeed'
 import { BlobsTable } from './BlobsTable'
 import {
-  LabelChip,
   LabelList,
   LabelListEmpty,
-  displayLabel,
-  toLabelVal,
   getLabelsForSubject,
   ModerationLabel,
-} from '../common/labels'
+} from '@/common/labels'
 import { DataField } from '@/common/DataField'
 import { AccountsGrid } from './AccountView'
 import { ModEventList } from '@/mod-event/EventList'
 import { ReviewStateIconLink } from '@/subject/ReviewStateMarker'
 import { Dropdown } from '@/common/Dropdown'
 import { Tabs, TabView } from '@/common/Tabs'
+import { Likes } from '@/common/feeds/Likes'
+import { Reposts } from '@/common/feeds/Reposts'
 
 enum Views {
   Details,
   Profiles,
   Thread,
   Blobs,
   ModEvents,
+  Likes,
+  Reposts,
 }
 
 export function RecordView({
@@ -69,6 +70,21 @@ export function RecordView({
         view: Views.Thread,
         label: 'Post Thread',
       })
+
+      if (AppBskyFeedDefs.isThreadViewPost(thread.thread)) {
+        views.push(
+          {
+            view: Views.Likes,
+            label: 'Likes',
+            sublabel: String(thread.thread.post.likeCount),
+          },
+          {
+            view: Views.Reposts,
+            label: 'Reposts',
+            sublabel: String(thread.thread.post.repostCount),
+          },
+        )
+      }
     }
     views.push(
       {
@@ -120,6 +136,22 @@ export function RecordView({
                   {currentView === Views.Profiles && !!profiles?.length && (
                     <AccountsGrid error="" accounts={profiles} />
                   )}
+                  {currentView === Views.Likes &&
+                    !!thread &&
+                    AppBskyFeedDefs.isThreadViewPost(thread?.thread) && (
+                      <Likes
+                        uri={thread.thread.post.uri}
+                        cid={thread.thread.post.cid}
+                      />
+                    )}
+                  {currentView === Views.Reposts &&
+                    !!thread &&
+                    AppBskyFeedDefs.isThreadViewPost(thread?.thread) && (
+                      <Reposts
+                        uri={thread.thread.post.uri}
+                        cid={thread.thread.post.cid}
+                      />
+                    )}
                   {currentView === Views.Thread && thread && (
                     <Thread thread={thread.thread} />
                   )}