From 193d1cf5c53926cb9c744073be1992e1a4ea0c65 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 21 Nov 2022 14:55:31 +0800
Subject: [PATCH] feat: cache for publish widget

---
 components/account/AccountInfo.vue          |  2 +-
 components/account/AccountMe.client.vue     |  2 +-
 components/publish/PublishWidget.client.vue | 68 +++++++++++++++++++++
 components/publish/PublishWidget.vue        | 33 ----------
 composables/content.ts                      |  2 +-
 composables/useCacheStorage.ts              | 28 +++++++++
 pages/@[user]/[post].vue                    | 16 +++--
 plugins/store.client.ts                     | 33 +++++++++-
 types/index.ts                              |  8 ++-
 9 files changed, 149 insertions(+), 43 deletions(-)
 create mode 100644 components/publish/PublishWidget.client.vue
 delete mode 100644 components/publish/PublishWidget.vue
 create mode 100644 composables/useCacheStorage.ts

diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 46ab87a2..703f42ce 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -17,7 +17,7 @@ defineProps<{
       <h4 font-bold>
         {{ account.displayName }}
       </h4>
-      <p op50>
+      <p op35 text-sm>
         @{{ account.acct }}
       </p>
     </NuxtLink>
diff --git a/components/account/AccountMe.client.vue b/components/account/AccountMe.client.vue
index dafd8733..68cb7640 100644
--- a/components/account/AccountMe.client.vue
+++ b/components/account/AccountMe.client.vue
@@ -9,7 +9,7 @@ const account = $computed(() => currentUser?.account)
     <!-- TODO: multiple account switcher -->
     <template v-if="account">
       <AccountInfo :account="account" />
-      <PublishWidget />
+      <PublishWidget draft-key="home" />
     </template>
     <!-- TODO: dialog for select server -->
     <a v-else href="/api/mas.to/login" px2 py1 bg-teal6 text-white m2 rounded>Login</a>
diff --git a/components/publish/PublishWidget.client.vue b/components/publish/PublishWidget.client.vue
new file mode 100644
index 00000000..d3410787
--- /dev/null
+++ b/components/publish/PublishWidget.client.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { CreateStatusParamsWithStatus } from 'masto'
+
+const {
+  draftKey,
+  placeholder = 'What is on your mind?',
+  inReplyToId,
+} = defineProps<{
+  draftKey: string
+  placeholder?: string
+  inReplyToId?: string
+}>()
+
+const masto = await useMasto()
+
+let isSending = $ref(false)
+const storageKey = `nuxtodon-draft-${draftKey}`
+function getDefaultStatus(): CreateStatusParamsWithStatus {
+  return {
+    status: '',
+    inReplyToId,
+  }
+}
+const draft = useLocalStorage<CreateStatusParamsWithStatus>(storageKey, getDefaultStatus())
+
+async function publish() {
+  try {
+    isSending = true
+    await masto.statuses.create(draft.value)
+    draft.value = getDefaultStatus()
+  }
+  finally {
+    isSending = false
+  }
+}
+
+onUnmounted(() => {
+  if (!draft.value.status) {
+    draft.value = undefined
+    nextTick(() => {
+      localStorage.removeItem(storageKey)
+    })
+  }
+})
+</script>
+
+<template>
+  <div
+    flex flex-col gap-4
+    :class="isSending ? 'pointer-events-none' : ''"
+  >
+    <textarea
+      v-model="draft.status"
+      :placeholder="placeholder"
+      p2 border-rounded w-full h-40
+      bg-gray:10 outline-none border="~ border"
+    />
+    <div flex justify-end>
+      <button
+        h-9 w-22 bg-primary border-rounded
+        :disabled="draft.status === ''"
+        @click="publish"
+      >
+        Publish!
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
deleted file mode 100644
index e3105332..00000000
--- a/components/publish/PublishWidget.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-const masto = await useMasto()
-
-let draftPost = $ref('')
-let isSending = $ref(false)
-
-async function publish() {
-  try {
-    isSending = true
-    await masto.statuses.create({ status: draftPost })
-    draftPost = ''
-  }
-  finally {
-    isSending = false
-  }
-}
-</script>
-
-<template>
-  <div xl:w-70 flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
-    <textarea
-      v-model="draftPost"
-      placeholder="What's on your mind?"
-      p2 border-rounded w-full h-40
-      bg-gray:10 outline-none border="~ border"
-    />
-    <div flex justify-end>
-      <button h-9 w-22 bg-primary border-rounded :disabled="draftPost === ''" @click="publish">
-        Publish!
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/composables/content.ts b/composables/content.ts
index f40c1946..efe7d07b 100644
--- a/composables/content.ts
+++ b/composables/content.ts
@@ -59,7 +59,7 @@ export function treeToVNode(
       return h(
         RouterLink as any,
         attrs,
-        node.childNodes.map(n => treeToVNode(n, handle)),
+        () => node.childNodes.map(n => treeToVNode(n, handle)),
       )
     }
     return h(
diff --git a/composables/useCacheStorage.ts b/composables/useCacheStorage.ts
new file mode 100644
index 00000000..2ec46bf0
--- /dev/null
+++ b/composables/useCacheStorage.ts
@@ -0,0 +1,28 @@
+export function useCacheStorage<T>(
+  key: string,
+  getter: () => T | Promise<T>,
+  TTL = 1000 * 60 * 60 * 12, // 12 hours
+) {
+  const storage = useLocalStorage(key, {
+    time: 0,
+    value: null as T | null,
+  })
+
+  if (storage.value.time + TTL < Date.now()) {
+    Promise.resolve(getter()).then((v) => {
+      storage.value = {
+        time: Date.now(),
+        value: v,
+      }
+    })
+  }
+
+  return computed({
+    get() {
+      return storage.value.value
+    },
+    set(v) {
+      storage.value.value = v
+    },
+  })
+}
diff --git a/pages/@[user]/[post].vue b/pages/@[user]/[post].vue
index cdd7b556..debf39e9 100644
--- a/pages/@[user]/[post].vue
+++ b/pages/@[user]/[post].vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-const props = defineProps<{
-  modelValue?: boolean
-}>()
-
 const params = useRoute().params
 const id = computed(() => params.post as string)
 
@@ -16,7 +12,17 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
     <StatusCard :status="comment" border="t border" pt-4 />
   </template>
   <StatusDetails :status="status" border="t border" pt-4 />
+  <div border="t border" p6 flex gap-4>
+    <img :src="status?.account.avatar" rounded w-10 h-10 bg-gray:10>
+    <PublishWidget
+      w-full
+      :draft-key="`reply-${id}`"
+      :placeholder="`Reply to ${status?.account?.displayName || status?.account?.acct || 'this thread'}`"
+      :in-reply-to-id="id"
+    />
+  </div>
+
   <template v-for="comment of context?.descendants" :key="comment.id">
-    <StatusCard :status="comment" pt-4 />
+    <StatusCard :status="comment" border="t border" pt-4 />
   </template>
 </template>
diff --git a/plugins/store.client.ts b/plugins/store.client.ts
index 208c67ae..fa4a13ac 100644
--- a/plugins/store.client.ts
+++ b/plugins/store.client.ts
@@ -1,5 +1,7 @@
 import { login as loginMasto } from 'masto'
-import type { UserLogin } from '~/types'
+import type { ServerInfo, UserLogin } from '~/types'
+
+const ServerInfoTTL = 60 * 60 * 1000 * 12 // 12 hour
 
 function createClientState() {
   const { server, token } = useAppCookies()
@@ -43,10 +45,39 @@ function createClientState() {
     return true
   }
 
+  const serverInfos = useLocalStorage<Record<string, ServerInfo>>('nuxtodon-server-info', {})
+
+  async function fetchServerInfo(server: string) {
+    if (!serverInfos.value[server]) {
+      // @ts-expect-error init
+      serverInfos.value[server] = {
+        timeUpdated: 0,
+        server,
+      }
+    }
+    if (serverInfos.value[server].timeUpdated + ServerInfoTTL < Date.now()) {
+      const masto = await useMasto()
+      await Promise.allSettled([
+        masto.instances.fetch().then((r) => {
+          Object.assign(serverInfos.value[server], r)
+        }),
+        masto.customEmojis.fetchAll().then((r) => {
+          serverInfos.value[server].customEmojis = Object.fromEntries(r.map(i => [i.shortcode, i]))
+        }),
+      ])
+    }
+    return serverInfos.value[server]
+  }
+
+  if (server.value)
+    fetchServerInfo(server.value)
+
   return {
     currentUser,
     accounts,
     login,
+    serverInfos,
+    fetchServerInfo,
   }
 }
 
diff --git a/types/index.ts b/types/index.ts
index f4d1d8af..0890fc3b 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -1,4 +1,4 @@
-import type { AccountCredentials } from 'masto'
+import type { AccountCredentials, Emoji, Instance } from 'masto'
 
 export interface AppInfo {
   id: string
@@ -17,3 +17,9 @@ export interface UserLogin {
 }
 
 export type PaginatorState = 'idle' | 'loading' | 'done' | 'error'
+
+export interface ServerInfo extends Instance {
+  server: string
+  timeUpdated: number
+  customEmojis?: Record<string, Emoji>
+}