feat: useInfiniteQuery for followings and followers

src/components/common/CharacterList.tsx

@@ -13,10 +13,10 @@ export const CharacterList: React.FC<{
   open: boolean
   setOpen: (open: boolean) => void
   hasMore: boolean
-  loadMore: () => Promise<void>
-  list: {
+  loadMore: () => any
+  list?: ({
     list: any[]
-  }[]
+  } | null)[]
   title: string
 }> = ({ open, setOpen, hasMore, loadMore, list, title }) => {
   const { t } = useTranslation("common")
@@ -36,7 +36,7 @@ export const CharacterList: React.FC<{
         >
           {list?.length ? (
             list.map((page) =>
-              page.list?.map((sub: any, index) => {
+              page?.list?.map((sub: any, index) => {
                 const character = sub?.character || sub?.fromCharacter
                 return (
                   <div

src/components/common/FollowingCount.tsx

@@ -1,10 +1,4 @@
-import { Profile } from "~/lib/types"
-import { useEffect, useState } from "react"
-import type { Link } from "unidata.js"
-import {
-  getSiteSubscriptions,
-  getSiteToSubscriptions,
-} from "~/models/site.model"
+import { useState } from "react"
 import { CharacterList } from "~/components/common/CharacterList"
 import {
   useGetSiteSubscriptions,
@@ -28,66 +22,6 @@ export const FollowingCount: React.FC<{
     siteId: siteId || "",
   })
 
-  const [siteSubscriptionList, setSiteSubscriptionList] = useState<Link[]>([])
-  const [cursor, setCursor] = useState<string>()
-  useEffect(() => {
-    if (
-      subscriptions.isSuccess &&
-      subscriptions.data?.list &&
-      !siteSubscriptionList.length
-    ) {
-      setSiteSubscriptionList(subscriptions.data.list || [])
-      setCursor(subscriptions.data.cursor)
-    }
-  }, [
-    subscriptions.isSuccess,
-    subscriptions.data?.list,
-    subscriptions.data?.cursor,
-    siteSubscriptionList.length,
-  ])
-
-  const [siteToSubscriptionList, setSiteToSubscriptionList] = useState<Link[]>(
-    [],
-  )
-  const [toCursor, setToCursor] = useState<string>()
-  useEffect(() => {
-    if (
-      toSubscriptions.isSuccess &&
-      toSubscriptions.data?.list &&
-      !siteToSubscriptionList.length
-    ) {
-      setSiteToSubscriptionList(toSubscriptions.data.list || [])
-      setToCursor(toSubscriptions.data.cursor)
-    }
-  }, [
-    toSubscriptions.isSuccess,
-    toSubscriptions.data?.list,
-    toSubscriptions.data?.cursor,
-    siteToSubscriptionList.length,
-  ])
-
-  const loadMoreSubscriptions = async () => {
-    if (cursor) {
-      const subs = await getSiteSubscriptions({
-        siteId: siteId || "",
-        cursor,
-      })
-      setSiteSubscriptionList((prev) => [...prev, ...(subs?.list || [])])
-      setCursor(subs?.cursor)
-    }
-  }
-
-  const loadMoreToSubscriptions = async () => {
-    if (cursor) {
-      const subs = await getSiteToSubscriptions({
-        siteId: siteId || "",
-        cursor: toCursor,
-      })
-      setSiteToSubscriptionList((prev) => [...prev, ...(subs?.list || [])])
-      setToCursor(subs?.cursor)
-    }
-  }
-
   return (
     <>
       <Button
@@ -99,7 +33,7 @@ export const FollowingCount: React.FC<{
         onClick={() => setIsFollowListOpen(true)}
       >
         <span className="font-medium text-zinc-700 pr-[2px]">
-          {subscriptions.data?.total || 0}
+          {subscriptions.data?.pages?.[0]?.total || 0}
         </span>{" "}
         {t("Followers")}
       </Button>
@@ -112,7 +46,7 @@ export const FollowingCount: React.FC<{
         onClick={() => setIsToFollowListOpen(true)}
       >
         <span className="font-medium text-zinc-700 pr-[2px]">
-          {toSubscriptions.data?.total || 0}
+          {toSubscriptions.data?.pages?.[0]?.total || 0}
         </span>{" "}
         {t("Followings")}
       </Button>
@@ -121,9 +55,9 @@ export const FollowingCount: React.FC<{
           open={isFollowListOpen}
           setOpen={setIsFollowListOpen}
           title="Follow List"
-          loadMore={loadMoreSubscriptions}
-          hasMore={!!cursor}
-          list={siteSubscriptionList}
+          loadMore={subscriptions.fetchNextPage}
+          hasMore={!!subscriptions.hasNextPage}
+          list={subscriptions.data?.pages}
         ></CharacterList>
       )}
       {!disableList && (
@@ -131,9 +65,9 @@ export const FollowingCount: React.FC<{
           open={isToFollowListOpen}
           setOpen={setIsToFollowListOpen}
           title="Follow List"
-          loadMore={loadMoreToSubscriptions}
-          hasMore={!!toCursor}
-          list={siteToSubscriptionList}
+          loadMore={toSubscriptions.fetchNextPage}
+          hasMore={!!toSubscriptions.hasNextPage}
+          list={toSubscriptions.data?.pages}
         ></CharacterList>
       )}
     </>

src/components/common/Reactions.tsx

@@ -49,12 +49,6 @@ export const Reactions: React.FC<{
   })
   const { data: likeCount = 0 } = useGetLikeCounts({ pageId })
 
-  const loadMoreLikes = async () => {
-    if (likesMutation.hasNextPage && !likesMutation.isFetchingNextPage) {
-      await likesMutation.fetchNextPage()
-    }
-  }
-
   const like = () => {
     if (pageId) {
       if (likeStatus.isLiked) {
@@ -96,12 +90,6 @@ export const Reactions: React.FC<{
   })
   const isMint = useCheckMint(pageId)
 
-  const loadMoreMints = async () => {
-    if (mints.hasNextPage && !mints.isFetchingNextPage) {
-      await mints.fetchNextPage()
-    }
-  }
-
   const mint = () => {
     if (pageId) {
       if (isMint.data?.count) {
@@ -398,7 +386,7 @@ export const Reactions: React.FC<{
           open={isLikeListOpen}
           setOpen={setIsLikeListOpen}
           title={t("Like List")}
-          loadMore={loadMoreLikes}
+          loadMore={likesMutation.fetchNextPage}
           hasMore={!!likesMutation.hasNextPage}
           list={likesMutation.data?.pages || []}
         ></CharacterList>
@@ -406,7 +394,7 @@ export const Reactions: React.FC<{
           open={isMintListOpen}
           setOpen={setIsMintListOpen}
           title={t("Mint List")}
-          loadMore={loadMoreMints}
+          loadMore={mints.fetchNextPage}
           hasMore={!!mints.hasNextPage}
           list={mints.data?.pages || []}
         ></CharacterList>

src/queries/site.ts

@@ -66,21 +66,49 @@ export const useGetSubscription = (siteId: string | undefined) => {
 
 export const useGetSiteSubscriptions = (data: { siteId: string }) => {
   const unidata = useUnidata()
-  return useQuery(["getSiteSubscriptions", data], async () => {
-    if (!data.siteId) {
-      return null
-    }
-    return siteModel.getSiteSubscriptions(data, unidata)
+  return useInfiniteQuery({
+    queryKey: ["getSiteSubscriptions", data],
+    queryFn: async ({ pageParam }) => {
+      if (!data.siteId) {
+        return {
+          total: 0,
+          list: [],
+          cursor: undefined,
+        }
+      }
+      return siteModel.getSiteSubscriptions(
+        {
+          ...data,
+          cursor: pageParam,
+        },
+        unidata,
+      )
+    },
+    getNextPageParam: (lastPage) => lastPage?.cursor || undefined,
   })
 }
 
 export const useGetSiteToSubscriptions = (data: { siteId: string }) => {
   const unidata = useUnidata()
-  return useQuery(["getSiteToSubscriptions", data], async () => {
-    if (!data.siteId) {
-      return null
-    }
-    return siteModel.getSiteToSubscriptions(data, unidata)
+  return useInfiniteQuery({
+    queryKey: ["getSiteToSubscriptions", data],
+    queryFn: async ({ pageParam }) => {
+      if (!data.siteId) {
+        return {
+          total: 0,
+          list: [],
+          cursor: undefined,
+        }
+      }
+      return siteModel.getSiteToSubscriptions(
+        {
+          ...data,
+          cursor: pageParam,
+        },
+        unidata,
+      )
+    },
+    getNextPageParam: (lastPage) => lastPage?.cursor || undefined,
   })
 }