From a94781df8340e5a89978b93d57217056f6c2a469 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 13:47:14 +0800
Subject: [PATCH] feat: introduce lru cache for requests

---
 components/account/AccountPaginator.vue       |  4 +-
 .../conversation/ConversationPaginator.vue    |  4 +-
 .../notification/NotificationPaginator.vue    |  4 +-
 components/status/StatusCard.vue              |  5 +-
 components/status/StatusDetails.vue           |  4 +-
 components/status/StatusReplyingTo.vue        | 12 ++--
 components/timeline/TimelinePaginator.vue     |  4 +-
 composables/cache.ts                          | 65 +++++++++++++++++++
 composables/masto.ts                          |  2 +-
 pages/{@[user] => @[account]}/followers.vue   |  4 +-
 pages/{@[user] => @[account]}/following.vue   |  4 +-
 pages/{@[user] => @[account]}/index.vue       |  5 +-
 .../[post].vue => status/[status].vue}        | 12 ++--
 13 files changed, 90 insertions(+), 39 deletions(-)
 create mode 100644 composables/cache.ts
 rename pages/{@[user] => @[account]}/followers.vue (72%)
 rename pages/{@[user] => @[account]}/following.vue (72%)
 rename pages/{@[user] => @[account]}/index.vue (83%)
 rename pages/{@[user]/[post].vue => status/[status].vue} (65%)

diff --git a/components/account/AccountPaginator.vue b/components/account/AccountPaginator.vue
index 1d5837ea..d0b135d0 100644
--- a/components/account/AccountPaginator.vue
+++ b/components/account/AccountPaginator.vue
@@ -7,9 +7,7 @@ const { paginator } = defineProps<{
 </script>
 
 <template>
-  <CommonPaginator
-    :paginator="paginator"
-  >
+  <CommonPaginator :paginator="paginator">
     <template #default="{ item }">
       <AccountCard
         :account="item"
diff --git a/components/conversation/ConversationPaginator.vue b/components/conversation/ConversationPaginator.vue
index 5a0a3e70..f392b055 100644
--- a/components/conversation/ConversationPaginator.vue
+++ b/components/conversation/ConversationPaginator.vue
@@ -7,9 +7,7 @@ const { paginator } = defineProps<{
 </script>
 
 <template>
-  <CommonPaginator
-    :paginator="paginator"
-  >
+  <CommonPaginator :paginator="paginator">
     <template #default="{ item }">
       <ConversationCard
         :conversation="item"
diff --git a/components/notification/NotificationPaginator.vue b/components/notification/NotificationPaginator.vue
index f67ec8db..cc123906 100644
--- a/components/notification/NotificationPaginator.vue
+++ b/components/notification/NotificationPaginator.vue
@@ -7,9 +7,7 @@ const { paginator } = defineProps<{
 </script>
 
 <template>
-  <CommonPaginator
-    :paginator="paginator"
-  >
+  <CommonPaginator :paginator="paginator">
     <template #default="{ item }">
       <NotificationCard
         :notification="item"
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index c28ef865..4414280d 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -30,8 +30,7 @@ function onclick(e: MouseEvent) {
 }
 
 function go() {
-  // cache data
-  useNuxtApp().payload.data[`status-${status.id}`] = status
+  cacheStatus(status)
   router.push(getStatusPath(status))
 }
 
@@ -85,7 +84,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
         </div>
       </template>
     </AccountInfo>
-    <StatusReplyingTo :status="status" ml5 mt--1 />
+    <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" ml5 mt--1 />
     <div pl15>
       <StatusBody :status="status" />
       <StatusMedia
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index f9b1074a..ad200c68 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -16,9 +16,9 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
 </script>
 
 <template>
-  <div flex flex-col gap-2 my-4 px-4>
+  <div flex flex-col gap-2 py3 px-4>
     <AccountInfo :account="status.account" />
-    <StatusReplyingTo :status="status" />
+    <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
     <StatusBody :status="status" text-2xl />
     <StatusMedia
       v-if="status.mediaAttachments?.length"
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
index 0a75f671..7488070e 100644
--- a/components/status/StatusReplyingTo.vue
+++ b/components/status/StatusReplyingTo.vue
@@ -5,21 +5,17 @@ const { status } = defineProps<{
   status: Status
 }>()
 
-const replyingTo = asyncComputed(async () => {
-  if (status.inReplyToAccountId)
-    return await masto.accounts.fetch(status.inReplyToAccountId)
-  return null
-})
+const account = await fetchAccount(status.inReplyToAccountId!)
 </script>
 
 <template>
-  <template v-if="replyingTo">
+  <template v-if="account">
     <div
       flex="~ gap-1.5" items-center text-sm text-gray:85
-      :title="`Replying to ${getDisplayName(replyingTo)}`"
+      :title="`Replying to ${getDisplayName(account)}`"
     >
       <div i-ri:reply-fill rotate-180 op50 />
-      <AccountInlineInfo :account="replyingTo" />
+      <AccountInlineInfo :account="account" />
     </div>
   </template>
 </template>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index ff308602..5d23a542 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -7,9 +7,7 @@ const { paginator } = defineProps<{
 </script>
 
 <template>
-  <CommonPaginator
-    :paginator="paginator"
-  >
+  <CommonPaginator :paginator="paginator">
     <template #default="{ item }">
       <StatusCard
         :status="item"
diff --git a/composables/cache.ts b/composables/cache.ts
new file mode 100644
index 00000000..71361c52
--- /dev/null
+++ b/composables/cache.ts
@@ -0,0 +1,65 @@
+import LRU from 'lru-cache'
+import type { Account, Status } from 'masto'
+
+const cache = new LRU<string, any>({
+  max: 1000,
+})
+
+if (process.dev)
+  // eslint-disable-next-line no-console
+  console.log({ cache })
+
+export function setCached(key: string, value: any) {
+  cache.set(key, value)
+}
+
+export function fetchStatus(id: string) {
+  const key = `status:${id}`
+  const cached = cache.get(key)
+  if (cached)
+    return cached
+  const promise = masto.statuses.fetch(id)
+    .then((status) => {
+      cacheStatus(status)
+      return status
+    })
+  cache.set(key, promise)
+  return promise
+}
+
+export function fetchAccount(id: string) {
+  const key = `account:${id}`
+  const cached = cache.get(key)
+  if (cached)
+    return cached
+  const promise = masto.accounts.fetch(id)
+    .then((account) => {
+      cacheAccount(account)
+      return account
+    })
+  cache.set(key, promise)
+  return promise
+}
+
+export function fetchAccountByName(acct: string) {
+  const key = `account:${acct}`
+  const cached = cache.get(key)
+  if (cached)
+    return cached
+  const account = masto.accounts.fetch(acct)
+    .then((r) => {
+      cacheAccount(r)
+      return r
+    })
+  cache.set(key, account)
+  return account
+}
+
+export function cacheStatus(status: Status) {
+  setCached(`status:${status.id}`, status)
+}
+
+export function cacheAccount(account: Account) {
+  setCached(`account:${account.id}`, account)
+  setCached(`account:${account.acct}`, account)
+}
diff --git a/composables/masto.ts b/composables/masto.ts
index 2cb72d4a..2cedb6a2 100644
--- a/composables/masto.ts
+++ b/composables/masto.ts
@@ -14,7 +14,7 @@ export function getAccountPath(account: Account) {
 }
 
 export function getStatusPath(status: Status) {
-  return `${getAccountPath(status.account)}/${status.id}`
+  return `/status/${status.id}`
 }
 
 // Batch requests for relationships when used in the UI
diff --git a/pages/@[user]/followers.vue b/pages/@[account]/followers.vue
similarity index 72%
rename from pages/@[user]/followers.vue
rename to pages/@[account]/followers.vue
index 380cf810..034e742d 100644
--- a/pages/@[user]/followers.vue
+++ b/pages/@[account]/followers.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const params = useRoute().params
-const user = $computed(() => params.user as string)
+const accountName = $computed(() => params.account as string)
 
-const { data: account } = $(await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })))
+const account = await fetchAccountByName(accountName)
 const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}) : null
 </script>
 
diff --git a/pages/@[user]/following.vue b/pages/@[account]/following.vue
similarity index 72%
rename from pages/@[user]/following.vue
rename to pages/@[account]/following.vue
index d472829a..e29042e9 100644
--- a/pages/@[user]/following.vue
+++ b/pages/@[account]/following.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const params = useRoute().params
-const user = $computed(() => params.user as string)
+const accountName = $computed(() => params.account as string)
 
-const { data: account } = $(await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user })))
+const account = await fetchAccountByName(accountName)
 const paginator = account ? masto.accounts.getFollowingIterable(account!.id!, {}) : null
 </script>
 
diff --git a/pages/@[user]/index.vue b/pages/@[account]/index.vue
similarity index 83%
rename from pages/@[user]/index.vue
rename to pages/@[account]/index.vue
index cc429c96..37f5dce5 100644
--- a/pages/@[user]/index.vue
+++ b/pages/@[account]/index.vue
@@ -4,10 +4,9 @@ const props = defineProps<{
 }>()
 
 const params = useRoute().params
-const user = $computed(() => params.user as string)
-
-const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
+const accountName = $computed(() => params.account as string)
 
+const account = await fetchAccountByName(accountName)
 const tabNames = ['Posts', 'Posts and replies'] as const
 
 // Don't use local storage because it is better to default to Posts every time you visit a user's profile.
diff --git a/pages/@[user]/[post].vue b/pages/status/[status].vue
similarity index 65%
rename from pages/@[user]/[post].vue
rename to pages/status/[status].vue
index 4ee00d44..bd2792ee 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/status/[status].vue
@@ -2,22 +2,22 @@
 import type { Component } from 'vue'
 
 const params = useRoute().params
-const id = computed(() => params.post as string)
+const id = $computed(() => params.status as string)
 const main = ref<Component | null>(null)
 
-const { data: status } = await useAsyncData(`status-${id}`, () => masto.statuses.fetch(params.post as string))
-const { data: context } = useAsyncData(`context-${id}`, () => masto.statuses.fetchContext(params.post as string))
+const status = await fetchStatus(id)
+const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fetchContext(id))
 </script>
 
 <template>
   <template v-if="status">
     <template v-if="context">
       <template v-for="comment of context?.ancestors" :key="comment.id">
-        <StatusCard :status="comment" border="t base" pt-4 />
+        <StatusCard :status="comment" border="t base" py3 />
       </template>
     </template>
 
-    <StatusDetails ref="main" :status="status" border="t base" pt-4 />
+    <StatusDetails ref="main" :status="status" border="t base" />
     <div v-if="currentUser" border="t base" p6 flex gap-4>
       <AccountAvatar :account="currentUser.account" w-10 h-10 />
       <PublishWidget
@@ -30,7 +30,7 @@ const { data: context } = useAsyncData(`context-${id}`, () => masto.statuses.fet
 
     <template v-if="context">
       <template v-for="comment of context?.descendants" :key="comment.id">
-        <StatusCard :status="comment" border="t base" pt-4 />
+        <StatusCard :status="comment" border="t base" py3 />
       </template>
     </template>
   </template>