Fix update of unread notification counter

CHANGELOG.md

@@ -11,6 +11,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Detect preferred color scheme.
 - Show loading indicator while attachment is being uploaded.
 
+### Fixed
+
+- Fix update of unread notification counter.
+
 ## [1.21.0] - 2023-04-12
 
 ### Changed

src/components/Sidebar.vue

@@ -62,7 +62,6 @@ const { loadTheme } = useTheme()
 onMounted(async () => {
   if (isUserAuthenticated()) {
     loadTheme()
-    // TODO: reload notifications periodically
     await loadNotifications(ensureAuthToken())
   }
 })

src/composables/notifications.ts

@@ -1,6 +1,6 @@
 import { ref } from "vue"
 
-import { getNotificationMarker } from "@/api/markers"
+import { getNotificationMarker, updateNotificationMarker } from "@/api/markers"
 import { Notification, getNotifications } from "@/api/notifications"
 
 const notifications = ref<Notification[]>([])
@@ -33,9 +33,24 @@ export function useNotifications() {
     return unreadCount
   }
 
+  async function updateUnreadNotificationCount(authToken: string) {
+    const firstNotification = notifications.value[0]
+    if (
+      firstNotification &&
+      firstNotification.id !== lastReadId.value
+    ) {
+      await updateNotificationMarker(
+        authToken,
+        firstNotification.id,
+      )
+      lastReadId.value = firstNotification.id
+    }
+  }
+
   return {
     notifications,
     loadNotifications,
     getUnreadNotificationCount,
+    updateUnreadNotificationCount,
   }
 }

src/views/NotificationList.vue

@@ -67,11 +67,10 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue"
-import { $ } from "vue/macros"
+import { watch } from "vue"
+import { $, $$ } from "vue/macros"
 
 import { PAGE_SIZE } from "@/api/common"
-import { updateNotificationMarker } from "@/api/markers"
 import { getNotifications, Notification } from "@/api/notifications"
 import { ProfileWrapper } from "@/api/users"
 import Avatar from "@/components/Avatar.vue"
@@ -85,18 +84,12 @@ import { humanizeDate } from "@/utils/dates"
 
 const { ensureAuthToken } = useCurrentUser()
 const { getActorAddress } = useInstanceInfo()
-let { notifications } = $(useNotifications())
+let { notifications, updateUnreadNotificationCount } = $(useNotifications())
 
-onMounted(async () => {
+watch($$(notifications), async () => {
   // Update notification timeline marker
-  const firstNotification = notifications[0]
-  if (firstNotification) {
-    await updateNotificationMarker(
-      ensureAuthToken(),
-      firstNotification.id,
-    )
-  }
-})
+  await updateUnreadNotificationCount(ensureAuthToken())
+}, { immediate: true })
 
 function getSender(notification: Notification): ProfileWrapper {
   return new ProfileWrapper(notification.account)