feat: show followings

src/components/common/FollowingCount.tsx

@@ -1,20 +1,29 @@
 import { Profile } from "~/lib/types"
 import { useEffect, useState } from "react"
 import type { Link } from "unidata.js"
-import { getSiteSubscriptions } from "~/models/site.model"
-import type { Links } from "unidata.js"
+import {
+  getSiteSubscriptions,
+  getSiteToSubscriptions,
+} from "~/models/site.model"
 import { CharacterList } from "~/components/common/CharacterList"
-import { useGetSiteSubscriptions } from "~/queries/site"
+import {
+  useGetSiteSubscriptions,
+  useGetSiteToSubscriptions,
+} from "~/queries/site"
 
 export const FollowingCount: React.FC<{
   siteId?: string
   disableList?: boolean
 }> = ({ siteId, disableList }) => {
   let [isFollowListOpen, setIsFollowListOpen] = useState(false)
+  let [isToFollowListOpen, setIsToFollowListOpen] = useState(false)
 
   const subscriptions = useGetSiteSubscriptions({
     siteId: siteId || "",
   })
+  const toSubscriptions = useGetSiteToSubscriptions({
+    siteId: siteId || "",
+  })
 
   const [siteSubscriptionList, setSiteSubscriptionList] = useState<Link[]>([])
   const [cursor, setCursor] = useState<string>()
@@ -34,6 +43,26 @@ export const FollowingCount: React.FC<{
     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({
@@ -45,24 +74,43 @@ export const FollowingCount: React.FC<{
     }
   }
 
+  const loadMoreToSubscriptions = async () => {
+    if (cursor) {
+      const subs = await getSiteToSubscriptions({
+        siteId: siteId || "",
+        cursor: toCursor,
+      })
+      setSiteToSubscriptionList((prev) => [...prev, ...(subs?.list || [])])
+      setToCursor(subs?.cursor)
+    }
+  }
+
   return (
     <>
-      {subscriptions ? (
-        <span
-          className={
-            "xlog-site-followers align-middle text-zinc-500 text-sm" +
-            (disableList ? "" : " cursor-pointer")
-          }
-          onClick={() => setIsFollowListOpen(true)}
-        >
-          <span className="font-bold text-zinc-700">
-            {subscriptions.data?.total || 0}
-          </span>{" "}
-          Followers
-        </span>
-      ) : (
-        ""
-      )}
+      <span
+        className={
+          "xlog-site-followers align-middle text-zinc-500 text-sm" +
+          (disableList ? "" : " cursor-pointer")
+        }
+        onClick={() => setIsFollowListOpen(true)}
+      >
+        <span className="font-bold text-zinc-700">
+          {subscriptions.data?.total || 0}
+        </span>{" "}
+        Followers
+      </span>
+      <span
+        className={
+          "xlog-site-followings align-middle text-zinc-500 text-sm ml-5" +
+          (disableList ? "" : " cursor-pointer")
+        }
+        onClick={() => setIsToFollowListOpen(true)}
+      >
+        <span className="font-bold text-zinc-700">
+          {toSubscriptions.data?.total || 0}
+        </span>{" "}
+        Followings
+      </span>
       {!disableList && (
         <CharacterList
           open={isFollowListOpen}
@@ -73,6 +121,16 @@ export const FollowingCount: React.FC<{
           list={siteSubscriptionList}
         ></CharacterList>
       )}
+      {!disableList && (
+        <CharacterList
+          open={isToFollowListOpen}
+          setOpen={setIsToFollowListOpen}
+          title="Follow List"
+          loadMore={loadMoreToSubscriptions}
+          hasMore={!!toCursor}
+          list={siteToSubscriptionList}
+        ></CharacterList>
+      )}
     </>
   )
 }

src/components/site/SiteLayout.server.tsx

@@ -1,6 +1,7 @@
 import {
   prefetchGetSite,
   prefetchGetSiteSubscriptions,
+  prefetchGetSiteToSubscriptions,
 } from "~/queries/site.server"
 import { prefetchGetPagesBySite } from "~/queries/page.server"
 import { PageVisibilityEnum } from "~/lib/types"
@@ -24,6 +25,12 @@ export const getServerSideProps = async (
       },
       queryClient,
     ),
+    prefetchGetSiteToSubscriptions(
+      {
+        siteId: domainOrSubdomain,
+      },
+      queryClient,
+    ),
     new Promise(async (resolve, reject) => {
       if (pageSlug) {
         try {

src/models/site.model.ts

@@ -204,6 +204,27 @@ export const getSiteSubscriptions = async (
   return links
 }
 
+export const getSiteToSubscriptions = async (
+  data: {
+    siteId: string
+    cursor?: string
+  },
+  customUnidata?: Unidata,
+) => {
+  const links = await (customUnidata || unidata).links.get({
+    source: "Crossbell Link",
+    identity: data.siteId,
+    platform: "Crossbell",
+    cursor: data.cursor,
+  })
+
+  links?.list.map(async (item: any) => {
+    item.character = item.metadata.to_raw
+  }) || []
+
+  return links
+}
+
 export async function updateSite(
   payload: {
     site: string

src/queries/site.server.ts

@@ -29,6 +29,16 @@ export const prefetchGetSiteSubscriptions = async (
   })
 }
 
+export const prefetchGetSiteToSubscriptions = async (
+  input: Parameters<typeof siteModel.getSiteToSubscriptions>[0],
+  queryClient: QueryClient,
+) => {
+  const key = ["getSiteToSubscriptions", input]
+  await queryClient.prefetchQuery(key, async () => {
+    return cacheGet(key, () => siteModel.getSiteToSubscriptions(input))
+  })
+}
+
 export const prefetchGetSites = async (
   input: string[],
   queryClient: QueryClient,

src/queries/site.ts

@@ -54,6 +54,16 @@ export const useGetSiteSubscriptions = (data: { siteId: string }) => {
   })
 }
 
+export const useGetSiteToSubscriptions = (data: { siteId: string }) => {
+  const unidata = useUnidata()
+  return useQuery(["getSiteToSubscriptions", data], async () => {
+    if (!data.siteId) {
+      return null
+    }
+    return siteModel.getSiteToSubscriptions(data, unidata)
+  })
+}
+
 export function useUpdateSite() {
   const unidata = useUnidata()
   const queryClient = useQueryClient()