From a473cc2de5190a48f147b2c5de6ef6d7771b8a89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Thu, 24 Nov 2022 01:16:10 +0800
Subject: [PATCH] feat: add not found for user pages

---
 components/common/CommonNotFound.vue |  8 ++++++++
 pages/@[user]/[post].vue             |  8 +++-----
 pages/@[user]/followers.vue          | 18 ++++++++++++------
 pages/@[user]/following.vue          | 18 ++++++++++++------
 pages/@[user]/index.vue              | 16 +++++++++++-----
 5 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 components/common/CommonNotFound.vue

diff --git a/components/common/CommonNotFound.vue b/components/common/CommonNotFound.vue
new file mode 100644
index 00000000..d0f0b696
--- /dev/null
+++ b/components/common/CommonNotFound.vue
@@ -0,0 +1,8 @@
+<template>
+  <div flex="~ col" items-center>
+    <div i-ri:forbid-line text-10 mt10 mb2 />
+    <div text-lg>
+      <slot>Not found</slot>
+    </div>
+  </div>
+</template>
diff --git a/pages/@[user]/[post].vue b/pages/@[user]/[post].vue
index 534e97d9..06cd06e5 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/@[user]/[post].vue
@@ -29,9 +29,7 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
     </template>
   </template>
 
-  <template>
-    <div>
-      Status not found
-    </div>
-  </template>
+  <CommonNotFound v-else>
+    Status not found
+  </CommonNotFound>
 </template>
diff --git a/pages/@[user]/followers.vue b/pages/@[user]/followers.vue
index 0cb70199..380cf810 100644
--- a/pages/@[user]/followers.vue
+++ b/pages/@[user]/followers.vue
@@ -2,13 +2,19 @@
 const params = useRoute().params
 const user = $computed(() => params.user as string)
 
-const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
-const paginator = masto.accounts.getFollowersIterable(account.value!.id!, {})
+const { data: account } = $(await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })))
+const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}) : null
 </script>
 
 <template>
-  <div>
-    <AccountHeader :account="account" />
-  </div>
-  <AccountPaginator :paginator="paginator" />
+  <template v-if="account">
+    <div>
+      <AccountHeader :account="account" />
+    </div>
+    <AccountPaginator :paginator="paginator" />
+  </template>
+
+  <CommonNotFound v-else>
+    Account @{{ params.user }} not found
+  </CommonNotFound>
 </template>
diff --git a/pages/@[user]/following.vue b/pages/@[user]/following.vue
index c6a17063..d472829a 100644
--- a/pages/@[user]/following.vue
+++ b/pages/@[user]/following.vue
@@ -2,13 +2,19 @@
 const params = useRoute().params
 const user = $computed(() => params.user as string)
 
-const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
-const paginator = masto.accounts.getFollowingIterable(account.value!.id!, {})
+const { data: account } = $(await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })))
+const paginator = account ? masto.accounts.getFollowingIterable(account!.id!, {}) : null
 </script>
 
 <template>
-  <div>
-    <AccountHeader :account="account" />
-  </div>
-  <AccountPaginator :paginator="paginator" />
+  <template v-if="account">
+    <div>
+      <AccountHeader :account="account" />
+    </div>
+    <AccountPaginator :paginator="paginator" />
+  </template>
+
+  <CommonNotFound v-else>
+    Account @{{ params.user }} not found
+  </CommonNotFound>
 </template>
diff --git a/pages/@[user]/index.vue b/pages/@[user]/index.vue
index 036a90d4..cc429c96 100644
--- a/pages/@[user]/index.vue
+++ b/pages/@[user]/index.vue
@@ -19,9 +19,15 @@ const paginator = $computed(() => {
 </script>
 
 <template>
-  <div>
-    <AccountHeader :account="account" />
-  </div>
-  <CommonTabs v-model="tab" :options="tabNames" />
-  <TimelinePaginator :key="tab" :paginator="paginator" />
+  <template v-if="account">
+    <div>
+      <AccountHeader :account="account" />
+    </div>
+    <CommonTabs v-model="tab" :options="tabNames" />
+    <TimelinePaginator :key="tab" :paginator="paginator" />
+  </template>
+
+  <CommonNotFound v-else>
+    Account @{{ params.user }} not found
+  </CommonNotFound>
 </template>