fix: update cache + timeline when items are updated/deleted (#556)

components/status/StatusActionsMore.vue

@@ -36,6 +36,7 @@ const toggleTranslation = async () => {
   isLoading.translation = false
 }
 
+const masto = useMasto()
 const copyLink = async (status: Status) => {
   const url = getStatusPermalinkRoute(status)
   if (url)
@@ -50,9 +51,10 @@ const deleteStatus = async () => {
       return
   }
 
-  await useMasto().statuses.remove(status.id)
+  removeCachedStatus(status.id)
+  await masto.statuses.remove(status.id)
 
-  if (route.name === '@account-status')
+  if (route.name === 'status')
     router.back()
 
   // TODO when timeline, remove this item
@@ -67,7 +69,8 @@ const deleteAndRedraft = async () => {
       return
   }
 
-  const { text } = await useMasto().statuses.remove(status.id)
+  removeCachedStatus(status.id)
+  const { text } = await masto.statuses.remove(status.id)
   openPublishDialog('dialog', await getDraftFromStatus(status, text), true)
 }
 

composables/cache.ts

@@ -13,6 +13,9 @@ export function setCached(key: string, value: any, override = false) {
   if (override || !cache.has(key))
     cache.set(key, value)
 }
+function removeCached(key: string) {
+  cache.delete(key)
+}
 
 export function fetchStatus(id: string, force = false): Promise<Status> {
   const server = currentServer.value
@@ -82,6 +85,10 @@ export function cacheStatus(status: Status, server = currentServer.value, overri
   setCached(`${server}:status:${status.id}`, status, override)
 }
 
+export function removeCachedStatus(id: string, server = currentServer.value) {
+  removeCached(`${server}:status:${id}`)
+}
+
 export function cacheAccount(account: Account, server = currentServer.value, override?: boolean) {
   setCached(`${server}:account:${account.id}`, account, override)
   setCached(`${server}:account:${account.acct}`, account, override)

composables/masto.ts

@@ -79,9 +79,6 @@ export function getAccountRoute(account: Account) {
       server: currentServer.value,
       account: extractAccountHandle(account),
     },
-    state: {
-      account: account as any,
-    },
   })
 }
 export function getAccountFollowingRoute(account: Account) {
@@ -91,9 +88,6 @@ export function getAccountFollowingRoute(account: Account) {
       server: currentServer.value,
       account: extractAccountHandle(account),
     },
-    state: {
-      account: account as any,
-    },
   })
 }
 export function getAccountFollowersRoute(account: Account) {
@@ -103,9 +97,6 @@ export function getAccountFollowersRoute(account: Account) {
       server: currentServer.value,
       account: extractAccountHandle(account),
     },
-    state: {
-      account: account as any,
-    },
   })
 }
 
@@ -117,9 +108,6 @@ export function getStatusRoute(status: Status) {
       account: extractAccountHandle(status.account),
       status: status.id,
     },
-    state: {
-      status: status as any,
-    },
   })
 }
 

composables/paginator.ts

@@ -20,16 +20,29 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>, stream?: WsEvent
   }
 
   stream?.on(eventType, (status) => {
+    if ('uri' in status)
+      cacheStatus(status, undefined, true)
+
     prevItems.value.unshift(status as any)
   })
 
   // TODO: update statuses
   stream?.on('status.update', (status) => {
+    cacheStatus(status, undefined, true)
+
     const index = items.value.findIndex((s: any) => s.id === status.id)
     if (index >= 0)
       items.value[index] = status as any
   })
 
+  stream?.on('delete', (id) => {
+    removeCachedStatus(id)
+
+    const index = items.value.findIndex((s: any) => s.id === id)
+    if (index >= 0)
+      items.value.splice(index, 1)
+  })
+
   async function loadNext() {
     if (state.value !== 'idle')
       return

composables/status.ts

@@ -33,11 +33,13 @@ export function useStatusActions(props: StatusActionsProps) {
     isLoading[action] = true
     fetchNewStatus().then((newStatus) => {
       Object.assign(status, newStatus)
+      cacheStatus(newStatus, undefined, true)
     }).finally(() => {
       isLoading[action] = false
     })
     // Optimistic update
     status[action] = !status[action]
+    cacheStatus(status, undefined, true)
     if (countField)
       status[countField] += status[action] ? 1 : -1
   }