Refactor notification list data

Author: kadiryazici

src/components/NotificationItem.vue renamed to src/components/NotificationList.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Thread } from '../api/notifications'
-import type { NotificationList } from '../types'
+import type { NotificationListData } from '../types'
 import { formatReason, notificationSubjectIcon } from '../utils/notification'
 
 interface Emits {
@@ -9,7 +9,7 @@ interface Emits {
 }
 
 interface Props {
-  data: NotificationList
+  data: NotificationListData
 }
 
 const props = defineProps<Props>()
@@ -43,20 +43,20 @@ function handleRepoClick() {
       </span>
     </button>
     <button
-      v-for="item of props.data.threads"
+      v-for="item of props.data.items"
       :key="item.id"
       class="notification-item"
       :class="{ 'notification-item-read': !item.unread }"
-      @click="handleNotificationClick(item)"
+      @click="handleNotificationClick(item.raw)"
     >
       <Component
-        :is="notificationSubjectIcon(item.subject.type)"
+        :is="notificationSubjectIcon(item.type)"
         class="notification-item-icon"
       />
 
       <div class="notification-item-content">
         <div class="notification-item-content-title">
-          {{ item.subject.title }}
+          {{ item.title }}
         </div>
 
         <div class="notification-item-content-subtitle">

src/pages/HomePage.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { open } from '@tauri-apps/api/shell'
 import { useStore } from '../stores/store'
-import Separator from '../components/Separator.vue'
-import NotificationItem from '../components/NotificationItem.vue'
+import NotificationList from '../components/NotificationList.vue'
 import { useInterval } from '../composables/useInterval'
 import type { Thread } from '../api/notifications'
 import { toGithubWebURL } from '../utils/github'
@@ -30,7 +29,7 @@ function handleRepoClick(repoFullName: string) {
     <NotificationSkeleton v-if="store.skeletonVisible" />
 
     <template v-else>
-      <NotificationItem
+      <NotificationList
         v-for="notification of store.notifications"
         :key="notification.repoFullName"
         :data="notification"

src/stores/store.ts

@@ -1,13 +1,13 @@
 import { defineStore } from 'pinia'
 import { readonly, ref } from 'vue'
-import type { Thread } from '../api/notifications'
 import { getNotifications } from '../api/notifications'
 import { Page } from '../constants'
 import { AppStorage } from '../storage'
-import type { NotificationList, Option } from '../types'
+import type { NotificationListData, Option } from '../types'
+import { notificationListFromThreads } from '../utils/notification'
 
 export const useStore = defineStore('store', () => {
-  const notifications = ref<NotificationList[]>([])
+  const notifications = ref<NotificationListData[]>([])
   const loadingNotifications = ref(false)
   const skeletonVisible = ref(false)
 
@@ -30,31 +30,12 @@ export const useStore = defineStore('store', () => {
         showReadNotifications: AppStorage.get('showReadNotifications'),
       })
 
-      notifications.value = []
-      const notificationsByRepo = new Map<Thread['repository']['id'], Thread[]>()
-
-      data.forEach((notification) => {
-        const { repository } = notification
-
-        if (!(notificationsByRepo.has(repository.id)))
-          notificationsByRepo.set(repository.id, [])
-
-        const thread = notificationsByRepo.get(repository.id)!
-
-        thread.push(notification)
-      })
-
-      for (const [, threads] of notificationsByRepo) {
-        notifications.value.push({
-          repoFullName: threads[0].repository.full_name,
-          threads,
-        })
-      }
-
+      notifications.value = notificationListFromThreads(data)
       skeletonVisible.value = false
     }
     catch (error) {
       console.error('NotificationError: ', error)
+      notifications.value = []
     }
   }
 

src/types.ts

@@ -1,11 +1,22 @@
+import type { Raw } from 'vue'
 import type { Thread } from './api/notifications'
 import type { User } from './api/user'
 
 export type Option<T> = T | null
 
-export interface NotificationList {
+export interface NotificationListData {
   repoFullName: string
-  threads: Thread[]
+  repoAvatarURL: string
+  items: NotificationListDataItem[]
+}
+
+export interface NotificationListDataItem {
+  id: Thread['id']
+  unread: Thread['unread']
+  title: Thread['subject']['title']
+  reason: Thread['reason']
+  type: Thread['subject']['type']
+  raw: Raw<Thread>
 }
 
 export interface AppStorageContext {
@@ -14,6 +25,5 @@ export interface AppStorageContext {
   showOnlyParticipating: boolean
   openAtStartup: boolean
   soundsEnabled: boolean
-  markAsReadOnClick: boolean
   showReadNotifications: boolean
 }

src/utils/notification.ts

@@ -1,7 +1,10 @@
 import { invoke } from '@tauri-apps/api/tauri'
+import { markRaw } from 'vue'
+import type { Thread } from '../api/notifications'
 import { Icons } from '../components/Icons'
 import type { NotificationReason, NotificationSubject } from '../constants'
 import { reasonFormatMap, subjectIconMap } from '../constants'
+import type { NotificationListData, NotificationListDataItem } from '../types'
 
 export function notificationSubjectIcon(subject: NotificationSubject) {
   return subjectIconMap[subject] || Icons.Question
@@ -14,3 +17,43 @@ export function formatReason(reason: NotificationReason) {
 export function playNotificationSound() {
   invoke('play_notification_sound')
 }
+
+function notificationListItemFromThread(thread: Thread): NotificationListDataItem {
+  return {
+    id: thread.id,
+    reason: thread.reason,
+    title: thread.subject.title,
+    type: thread.subject.type,
+    unread: thread.unread,
+    raw: markRaw(thread),
+  }
+}
+
+export function notificationListFromThreads(threads: Thread[]) {
+  const repoIdIndexMap: Record<Thread['repository']['id'], number> = Object.create(null)
+  const notifications: NotificationListData[] = []
+
+  for (const thread of threads) {
+    const { repository } = thread
+
+    if (repository.id in repoIdIndexMap) {
+      const notification = notifications[repoIdIndexMap[repository.id]]
+      notification.items.push(notificationListItemFromThread(thread))
+    }
+    else {
+      const nextIndex = notifications.length
+      const notification: NotificationListData = {
+        repoAvatarURL: `${repository.owner.avatar_url}&s=40`,
+        repoFullName: repository.full_name,
+        items: [
+          notificationListItemFromThread(thread),
+        ],
+      }
+
+      repoIdIndexMap[repository.id] = nextIndex
+      notifications.push(notification)
+    }
+  }
+
+  return notifications
+}