Add 'Show more profiles' button to follow list

src/api/relationships.ts

@@ -70,22 +70,49 @@ export async function unfollow(
   }
 }
 
+interface ProfileListPage {
+  profiles: Profile[];
+  nextPageUrl: string | null;
+}
+
+function getNextPageUrl(response: Response): string | null {
+  const linkHeader = response.headers.get("Link")
+  if (!linkHeader) {
+    return null
+  }
+  // TODO: use advanced Link header parser
+  const link = linkHeader.split(";")[0]
+  return link.slice(1, link.length - 1)
+}
+
 export async function getFollowers(
   authToken: string,
   accountId: string,
-): Promise<Profile[]> {
-  const url = `${BACKEND_URL}/api/v1/accounts/${accountId}/followers`
+  url?: string,
+): Promise<ProfileListPage> {
+  if (!url) {
+    url = `${BACKEND_URL}/api/v1/accounts/${accountId}/followers`
+  }
   const response = await http(url, { authToken })
   const data = await response.json()
-  return data
+  return {
+    profiles: data,
+    nextPageUrl: getNextPageUrl(response),
+  }
 }
 
 export async function getFollowing(
   authToken: string,
   accountId: string,
-): Promise<Profile[]> {
-  const url = `${BACKEND_URL}/api/v1/accounts/${accountId}/following`
+  url?: string,
+): Promise<ProfileListPage> {
+  if (!url) {
+    url = `${BACKEND_URL}/api/v1/accounts/${accountId}/following`
+  }
   const response = await http(url, { authToken })
   const data = await response.json()
-  return data
+  return {
+    profiles: data,
+    nextPageUrl: getNextPageUrl(response),
+  }
 }

src/views/Profile.vue

@@ -179,6 +179,13 @@
           :profile="profile"
           :key="profile.id"
         ></profile-list-item>
+        <button
+          v-if="followListNextPageUrl"
+          class="btn secondary next-btn"
+          @click="loadFollowListNextPage()"
+        >
+          Show more profiles
+        </button>
       </template>
     </template>
   </sidebar-layout>
@@ -232,6 +239,7 @@ let profileMenuVisible = $ref(false)
 let tabName = $ref("posts")
 let posts = $ref<Post[]>([])
 let followList = $ref<Profile[]>([])
+let followListNextPageUrl = $ref<string | null>(null)
 
 onMounted(async () => {
   profile = await getProfile(
@@ -258,15 +266,19 @@ onMounted(async () => {
       false,
     )
   } else if (tabName === "followers" && isCurrentUser()) {
-    followList = await getFollowers(
+    const page = await getFollowers(
       ensureAuthToken(),
       profile.id,
     )
+    followList = page.profiles
+    followListNextPageUrl = page.nextPageUrl
   } else if (tabName === "following" && isCurrentUser()) {
-    followList = await getFollowing(
+    const page = await getFollowing(
       ensureAuthToken(),
       profile.id,
     )
+    followList = page.profiles
+    followListNextPageUrl = page.nextPageUrl
   }
 })
 
@@ -457,6 +469,27 @@ async function loadNextPage(maxId: string) {
   )
   posts.push(...nextPage)
 }
+
+async function loadFollowListNextPage() {
+  if (!profile || !followListNextPageUrl) {
+    return
+  }
+  let loadFollowList
+  if (tabName === "followers") {
+    loadFollowList = getFollowers
+  } else if (tabName === "following") {
+    loadFollowList = getFollowing
+  } else {
+    throw new Error("wrong tab")
+  }
+  const page = await loadFollowList(
+    ensureAuthToken(),
+    profile.id,
+    followListNextPageUrl,
+  )
+  followList.push(...page.profiles)
+  followListNextPageUrl = page.nextPageUrl
+}
 </script>
 
 <style scoped lang="scss">