From 5cb386388389be7bd7367699dc3c063bbf474857 Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Sat, 15 Apr 2023 23:03:57 +0000
Subject: [PATCH] Fix update of unread notification counter

---
 CHANGELOG.md                     |  4 ++++
 src/components/Sidebar.vue       |  1 -
 src/composables/notifications.ts | 17 ++++++++++++++++-
 src/views/NotificationList.vue   | 19 ++++++-------------
 4 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e554d33..29e24a5 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 5cead9f..6b5a9dd 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -62,7 +62,6 @@ const { loadTheme } = useTheme()
 onMounted(async () => {
   if (isUserAuthenticated()) {
     loadTheme()
-    // TODO: reload notifications periodically
     await loadNotifications(ensureAuthToken())
   }
 })
diff --git a/src/composables/notifications.ts b/src/composables/notifications.ts
index 2d07571..6e3a519 100644
--- a/src/composables/notifications.ts
+++ b/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,
   }
 }
diff --git a/src/views/NotificationList.vue b/src/views/NotificationList.vue
index fac6678..f67d9ac 100644
--- a/src/views/NotificationList.vue
+++ b/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)