From f3dd3fe8a53585b1d193c700f0582f4fa7e1ad47 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 15 Nov 2022 20:08:49 +0800
Subject: [PATCH] feat: user timeline

---
 components/status/StatusActions.vue | 27 +++++++++++++++++++++++----
 pages/@[user]/index.vue             |  5 ++++-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index bdfde9ce..1e29d27d 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -1,13 +1,28 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
 
-defineProps<{
+const { status } = defineProps<{
   status: Status
 }>()
+
+const masto = await useMasto()
+const isLoading = ref(false)
+async function toggleFavourite() {
+  try {
+    isLoading.value = true
+    if (status.favourited)
+      Object.assign(status, await masto.statuses.unfavourite(status.id))
+    else
+      Object.assign(status, await masto.statuses.favourite(status.id))
+  }
+  finally {
+    isLoading.value = false
+  }
+}
 </script>
 
 <template>
-  <div flex gap-8>
+  <div flex gap-8 :class="isLoading ? 'pointer-events-none' : ''">
     <RouterLink flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
       <div rounded-full p2 group-hover="bg-blue/10">
         <div i-ri:chat-3-line />
@@ -20,9 +35,13 @@ defineProps<{
       </div>
       <span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
     </button>
-    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-rose" group>
+    <button
+      flex gap-1 items-center w-full rounded hover="op100 text-rose" group
+      :class="status.favourited ? 'text-rose op100' : 'op75'"
+      @click="toggleFavourite()"
+    >
       <div rounded-full p2 group-hover="bg-rose/10">
-        <div i-ri:heart-3-line />
+        <div :class="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'" />
       </div>
       <span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
     </button>
diff --git a/pages/@[user]/index.vue b/pages/@[user]/index.vue
index 9d7f707c..67a1d4dd 100644
--- a/pages/@[user]/index.vue
+++ b/pages/@[user]/index.vue
@@ -4,12 +4,15 @@ const props = defineProps<{
 }>()
 
 const params = useRoute().params
+const user = $computed(() => params.user as string)
 const masto = await useMasto()
-const { data: account } = await useAsyncData('account', () => masto.accounts.lookup({ acct: params.user as string }))
+const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
+const { data: status } = await useAsyncData(`${user}:status`, () => masto.accounts.fetchStatuses(account.value!.id!))
 </script>
 
 <template>
   <div>
     <AccountHeader :account="account" />
   </div>
+  <TimelineList :timelines="status?.value" />
 </template>