From a6a189ba59b2bf71d05616bec532c28f1c09d8f6 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Tue, 15 Nov 2022 16:56:11 +0100
Subject: [PATCH] feat: following and followers routes (#4)

---
 components/account/AccountCard.vue            | 18 ++++++++
 components/account/AccountHeader.vue          | 12 ++++--
 .../account/AccountPaginator.client.vue       | 22 ++++++++++
 .../timeline/TimelinePaginator.client.vue     | 37 +----------------
 composables/paginator.ts                      | 41 +++++++++++++++++++
 pages/@[user]/followers.vue                   | 18 ++++++++
 pages/@[user]/following.vue                   | 18 ++++++++
 7 files changed, 127 insertions(+), 39 deletions(-)
 create mode 100644 components/account/AccountCard.vue
 create mode 100644 components/account/AccountPaginator.client.vue
 create mode 100644 composables/paginator.ts
 create mode 100644 pages/@[user]/followers.vue
 create mode 100644 pages/@[user]/following.vue

diff --git a/components/account/AccountCard.vue b/components/account/AccountCard.vue
new file mode 100644
index 00000000..199d587a
--- /dev/null
+++ b/components/account/AccountCard.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <div flex justify-between>
+    <AccountInfo :account="account" p3 />
+    <div h-full p5>
+      <!-- TODO is following logic and actions -->
+      <div v-if="false" color-purple hover:color-gray hover:cursor-pointer i-ri:user-unfollow-fill />
+      <div v-else color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill />
+    </div>
+  </div>
+</template>
diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 49cdf0e0..580c5fb6 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -71,9 +71,15 @@ const createdAt = $computed(() => {
         </div>
       </div>
       <div flex gap-5>
-        <div><span font-bold>{{ account.statusesCount }}</span> Posts</div>
-        <div><span font-bold>{{ account.followingCount }}</span> Following</div>
-        <div><span font-bold>{{ account.followersCount }}</span> Followers</div>
+        <NuxtLink :to="`/@${account.acct}/`">
+          <span font-bold>{{ account.statusesCount }}</span> Posts
+        </NuxtLink>
+        <NuxtLink :to="`/@${account.acct}/following`">
+          <span font-bold>{{ account.followingCount }}</span> Following
+        </NuxtLink>
+        <NuxtLink :to="`/@${account.acct}/followers`">
+          <span font-bold>{{ account.followersCount }}</span> Followers
+        </NuxtLink>
       </div>
     </div>
   </div>
diff --git a/components/account/AccountPaginator.client.vue b/components/account/AccountPaginator.client.vue
new file mode 100644
index 00000000..e82fc1ee
--- /dev/null
+++ b/components/account/AccountPaginator.client.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Account, Paginator } from 'masto'
+
+const { paginator } = defineProps<{
+  paginator: Paginator<any, Account[]>
+}>()
+
+const { items: accounts, isLoading, isDone, endAnchor } = usePaginator(paginator)
+</script>
+
+<template>
+  <template v-for="account of accounts" :key="account.id">
+    <AccountCard :account="account" border="t border" pt-4 />
+  </template>
+  <div ref="endAnchor" />
+  <div v-if="isLoading">
+    Loading...
+  </div>
+  <div v-if="isDone">
+    End of list
+  </div>
+</template>
diff --git a/components/timeline/TimelinePaginator.client.vue b/components/timeline/TimelinePaginator.client.vue
index 4e1512dc..61fdaef4 100644
--- a/components/timeline/TimelinePaginator.client.vue
+++ b/components/timeline/TimelinePaginator.client.vue
@@ -5,42 +5,7 @@ const { paginator } = defineProps<{
   paginator: Paginator<any, Status[]>
 }>()
 
-let isLoading = $ref(false)
-let isDone = $ref(false)
-const statuses = $ref<Status[]>([])
-
-const endAnchor = ref<HTMLDivElement>()
-const bound = reactive(useElementBounding(endAnchor))
-const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
-
-async function loadNext() {
-  if (isLoading || isDone)
-    return
-
-  // console.log('REQUEST')
-  isLoading = true
-  const result = await paginator.next()
-  if (result.done)
-    isDone = true
-  if (result.value?.length)
-    statuses.push(...result.value)
-  isLoading = false
-  await nextTick()
-  bound.update()
-}
-
-useIntervalFn(() => {
-  bound.update()
-}, 1000)
-
-watch(
-  () => isInScreen,
-  () => {
-    if (isInScreen && !isLoading)
-      loadNext()
-  },
-  { immediate: true },
-)
+const { items: statuses, isLoading, isDone, endAnchor } = usePaginator(paginator)
 </script>
 
 <template>
diff --git a/composables/paginator.ts b/composables/paginator.ts
new file mode 100644
index 00000000..82233b22
--- /dev/null
+++ b/composables/paginator.ts
@@ -0,0 +1,41 @@
+import type { Paginator } from 'masto'
+
+export function usePaginator<T>(paginator: Paginator<any, T[]>) {
+  let isLoading = $ref(false)
+  let isDone = $ref(false)
+  const items = $ref<T[]>([])
+
+  const endAnchor = ref<HTMLDivElement>()
+  const bound = reactive(useElementBounding(endAnchor))
+  const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
+
+  async function loadNext() {
+    if (isLoading || isDone)
+      return
+
+    isLoading = true
+    const result = await paginator.next()
+    if (result.done)
+      isDone = true
+    if (result.value?.length)
+      items.push(...result.value)
+    isLoading = false
+    await nextTick()
+    bound.update()
+  }
+
+  useIntervalFn(() => {
+    bound.update()
+  }, 1000)
+
+  watch(
+    () => isInScreen,
+    () => {
+      if (isInScreen && !isLoading)
+        loadNext()
+    },
+    { immediate: true },
+  )
+
+  return { items, isLoading, isDone, endAnchor }
+}
diff --git a/pages/@[user]/followers.vue b/pages/@[user]/followers.vue
new file mode 100644
index 00000000..0310e5b1
--- /dev/null
+++ b/pages/@[user]/followers.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+
+const params = useRoute().params
+const user = $computed(() => params.user as string)
+const masto = await useMasto()
+const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
+const paginator = masto.accounts.getFollowersIterable(account.value!.id!, {})
+</script>
+
+<template>
+  <div>
+    <AccountHeader :account="account" />
+  </div>
+  <AccountPaginator :paginator="paginator" />
+</template>
diff --git a/pages/@[user]/following.vue b/pages/@[user]/following.vue
new file mode 100644
index 00000000..309da352
--- /dev/null
+++ b/pages/@[user]/following.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const props = defineProps<{
+  modelValue?: boolean
+}>()
+
+const params = useRoute().params
+const user = $computed(() => params.user as string)
+const masto = await useMasto()
+const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
+const paginator = masto.accounts.getFollowingIterable(account.value!.id!, {})
+</script>
+
+<template>
+  <div>
+    <AccountHeader :account="account" />
+  </div>
+  <AccountPaginator :paginator="paginator" />
+</template>