disable cyclop lint

server/rpc/v1/user.go

@@ -158,7 +158,7 @@ func (h *userHandler) ListFollowees(ctx context.Context, req *connect.Request[v1
 	}, nil
 }
 
-func (h *userHandler) ListNotifications(ctx context.Context, req *connect.Request[v1.ListNotificationsRequest]) (*connect.Response[v1.ListNotificationsResponse], error) {
+func (h *userHandler) ListNotifications(ctx context.Context, req *connect.Request[v1.ListNotificationsRequest]) (*connect.Response[v1.ListNotificationsResponse], error) { //nolint:cyclop // TODO: Simplify this method.
 	log := xcontext.MustExtractLogger(ctx)
 	userID := xcontext.MustExtractUserID(ctx)
 

web/src/main.ts

@@ -3,6 +3,7 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { useAuthStore } from '@/stores/auth'
+import { useNotificationStore } from '@/stores/notifications.ts'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { RefreshAccessTokenOrLogout, ScheduleTokenRefresh } from '@/jwt/jwt'
 
@@ -18,9 +19,13 @@ app.use(pinia)
 
 const init = async () => {
   const authStore = useAuthStore()
+  const notificationStore = useNotificationStore()
   if (authStore.accessToken) {
     await RefreshAccessTokenOrLogout()
     authStore.setAccessTokenRefreshInterval(ScheduleTokenRefresh())
+
+    await notificationStore.fetchUnreadNotifications()
+    notificationStore.setRefreshInterval()
   }
 
   app.mount('#app')

web/src/stores/notifications.ts

@@ -0,0 +1,34 @@
+import type { PaginationRequest } from '@/proto/api/v1/shared_pb.ts'
+
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { create } from '@bufbuild/protobuf'
+import { UserClient } from '@/clients/clients.ts'
+import { ListNotificationsRequestSchema } from '@/proto/api/v1/users_pb.ts'
+
+export const useNotificationStore = defineStore(
+  'notifications',
+  () => {
+    const unreadCount = ref(0)
+    const refreshInterval = ref(0)
+
+    const fetchUnreadNotifications = async () => {
+      const req = create(ListNotificationsRequestSchema, {
+        markAsRead: false,
+        pagination: {
+          pageLimit: 1,
+        } as PaginationRequest,
+        unreadOnly: true,
+      })
+      const res = await UserClient.listNotifications(req)
+      unreadCount.value = Number(res.pagination?.totalResults)
+    }
+
+    const setRefreshInterval = () => {
+      // TODO: Implement Server-Sent Events for real-time updates.
+      refreshInterval.value = window.setInterval(fetchUnreadNotifications, 60000)
+    }
+
+    return { fetchUnreadNotifications, setRefreshInterval, unreadCount }
+  }
+)

web/src/ui/components/NavigationMobile.vue

@@ -1,11 +1,6 @@
 <script setup lang="ts">
-import type { PaginationRequest } from '@/proto/api/v1/shared_pb.ts'
-
-import { onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { create } from '@bufbuild/protobuf'
-import { UserClient } from '@/clients/clients.ts'
-import { ListNotificationsRequestSchema } from '@/proto/api/v1/users_pb.ts'
+import { useNotificationStore } from '@/stores/notifications.ts'
 import {
   BellIcon,
   BookOpenIcon,
@@ -22,7 +17,7 @@ import {
 } from '@heroicons/vue/24/solid'
 
 const route = useRoute()
-const unreadCount = ref(0)
+const notificationStore = useNotificationStore()
 
 const isActive = (basePath: string) => {
   return route.path.startsWith(basePath)
@@ -40,24 +35,6 @@ const navigation = [
   { href: '/notifications', icon: BellIcon, iconActive: BellSolidIcon, name: 'Notifications' },
   { href: '/profile', icon: UserIcon, iconActive: UserSolidIcon, name: 'Profile' },
 ]
-
-const fetchUnreadNotifications = async () => {
-  const req = create(ListNotificationsRequestSchema, {
-    markAsRead: false,
-    pagination: {
-      pageLimit: 1,
-    } as PaginationRequest,
-    unreadOnly: true,
-  })
-  const res = await UserClient.listNotifications(req)
-  unreadCount.value = Number(res.pagination?.totalResults)
-}
-
-onMounted(() => {
-  fetchUnreadNotifications()
-  // TODO: Implement Server-Sent Events for real-time updates.
-  setInterval(fetchUnreadNotifications, 60000)
-})
 </script>
 
 <template>
@@ -73,9 +50,11 @@ onMounted(() => {
         class="h-6 w-6"
       />
       <span
-        v-if="item.href === '/notifications' && unreadCount > 0"
+        v-if="item.href === '/notifications' && notificationStore.unreadCount > 0"
         class="badge"
-      >{{ unreadCount }}</span>
+      >
+        {{ notificationStore.unreadCount }}
+      </span>
     </RouterLink>
   </nav>
 </template>

web/src/ui/notifications/ListNotifications.vue

@@ -4,11 +4,13 @@ import type { PaginationRequest } from '@/proto/api/v1/shared_pb.ts'
 import { onMounted, ref } from 'vue'
 import { create } from '@bufbuild/protobuf'
 import { UserClient } from '@/clients/clients.ts'
+import { useNotificationStore } from '@/stores/notifications.ts'
 import NotificationWorkoutComment from '@/ui/components/NotificationWorkoutComment.vue'
 import { ListNotificationsRequestSchema, type Notification } from '@/proto/api/v1/users_pb.ts'
 
 const notifications = ref([] as Notification[])
 const pageToken = ref(new Uint8Array(0))
+const notificationStore = useNotificationStore()
 
 const fetchUnreadNotifications = async () => {
   const req = create(ListNotificationsRequestSchema, {
@@ -29,8 +31,9 @@ const fetchUnreadNotifications = async () => {
   }
 }
 
-onMounted(() => {
-  fetchUnreadNotifications()
+onMounted(async () => {
+  await fetchUnreadNotifications()
+  await notificationStore.fetchUnreadNotifications()
 })
 </script>