Update notification renderer code

Author: kadiryazici

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
-import type { Thread } from '../api/notifications'
-import type { NotificationListData } from '../types'
-import { formatReason, notificationSubjectIcon } from '../utils/notification'
+import { MinimalRepository, Thread } from '../api/notifications'
+import type { NotificationList } from '../types'
+import { formatReason, isRepository, notificationSubjectIcon } from '../utils/notification'
 import Separator from './Separator.vue'
 
 interface Emits {
@@ -11,74 +11,74 @@ interface Emits {
 }
 
 interface Props {
-  data: NotificationListData
+  value: NotificationList[number]
 }
 
 const props = defineProps<Props>()
 const emit = defineEmits<Emits>()
 
-function handleNotificationClick(notification: Thread) {
-  emit('click:notification', notification)
+function handleThreadClick(thread: Thread) {
+  emit('click:notification', thread)
 }
 
-function handleRepoClick() {
-  emit('click:repo', props.data.repoFullName)
+function handleRepoClick(repo: MinimalRepository) {
+  emit('click:repo', repo.full_name)
 }
 </script>
 
 <template>
   <div
-    draggable="false"
-    class="notification"
+    v-if="isRepository(value)"
+    class="notification-title-wrapper"
   >
     <button
       class="notification-title"
-      @click="handleRepoClick"
+      @click="handleRepoClick(value as MinimalRepository)"
     >
       <img
         class="notification-title-icon"
-        :src="props.data.repoAvatarURL"
+        :src="(value as MinimalRepository).owner.avatar_url"
         alt="repo logo"
       >
       <span class="notification-title-text">
-        {{ props.data.repoFullName }}
+        {{ (value as MinimalRepository).full_name }}
       </span>
     </button>
 
     <Separator />
+  </div>
 
-    <button
-      v-for="item of props.data.items"
-      :key="item.id"
-      class="notification-item"
-      :class="{ 'notification-item-read': !item.unread }"
-      @click="handleNotificationClick(item.raw)"
-    >
-      <Component
-        :is="notificationSubjectIcon(item.type)"
-        class="notification-item-icon"
-      />
-
-      <div class="notification-item-content">
-        <div class="notification-item-content-title">
-          {{ item.title }}
-        </div>
-
-        <div class="notification-item-content-subtitle">
-          {{ formatReason(item.reason) }}
-          -
-          {{ dayjs(item.updatedAt).fromNow() }}
-        </div>
+  <button
+    v-else
+    class="notification-item"
+    :class="{ 'notification-item-read': !(value as Thread).unread }"
+    @click="handleThreadClick(value as Thread)"
+  >
+    <Component
+      :is="notificationSubjectIcon((value as Thread).subject.type)"
+      class="notification-item-icon"
+    />
+
+    <div class="notification-item-content">
+      <div class="notification-item-content-title">
+        {{ (value as Thread).subject.title }}
       </div>
-    </button>
-  </div>
+
+      <div class="notification-item-content-subtitle">
+        {{ formatReason((value as Thread).reason) }}
+        -
+        {{ dayjs((value as Thread).updated_at).fromNow() }}
+      </div>
+    </div>
+  </button>
 </template>
 
 <style lang="scss" scoped>
+ * + .notification-title-wrapper {
+  margin-top: 10px
+}
+
 .notification {
-  + .notification {
-    margin-top: 10px;
-  }
 
   &-title {
     @include focus-visible;
@@ -132,6 +132,7 @@ function handleRepoClick() {
     line-height: 20px;
     @include focus-visible;
     @include text-outline($size: 1px);
+    margin-top: 5px;
 
     &-read {
       color: var(--white-faded) !important;

src/constants.ts

@@ -30,6 +30,11 @@ export enum NotificationSubject {
   Release = 'Release',
 }
 
+export enum NotificationItemType {
+  Repository = 'repository',
+  Thread = 'thread',
+}
+
 export enum NotificationReason {
   Assign = 'assign',
   Author = 'author',

src/pages/HomePage.vue

@@ -5,8 +5,7 @@
 import { open } from '@tauri-apps/api/shell'
 import { ref } from 'vue'
 import { useStore } from '../stores/store'
-import NotificationList from '../components/NotificationList.vue'
-import { useInterval } from '../composables/useInterval'
+import NotificationItem from '../components/NotificationItem.vue'
 import type { Thread } from '../api/notifications'
 import { toGithubWebURL } from '../utils/github'
 import { AppStorage } from '../storage'
@@ -20,7 +19,7 @@ import AppButton from '../components/AppButton.vue'
 const store = useStore()
 
 if (store.currentPageState.fetchOnEnter)
-  store.fetchNotifications()
+  store.fetchNotifications(true)
 
 function handleNotificationClick(notification: Thread) {
   const url = toGithubWebURL({ notification, userId: AppStorage.get('user')!.id })
@@ -55,7 +54,7 @@ useElementNavigation({
       description="Oopsie! Couldn't load notifications."
     >
       <template #footer>
-        <AppButton @click="store.fetchNotifications(true)">
+        <AppButton @click="store.fetchNotifications()">
           Refresh
         </AppButton>
       </template>
@@ -68,15 +67,13 @@ useElementNavigation({
       description="It's all clear sir!"
     />
 
-    <template v-else>
-      <NotificationList
-        v-for="notification of store.notifications"
-        :key="notification.repoFullName"
-        :data="notification"
-        @click:notification="handleNotificationClick"
-        @click:repo="handleRepoClick"
-      />
-    </template>
+    <NotificationItem
+      v-for="item of store.notifications"
+      :key="item.id"
+      :value="item"
+      @click:notification="handleNotificationClick"
+      @click:repo="handleRepoClick"
+    />
   </div>
 </template>
 

src/pages/SettingsPage.vue

@@ -41,7 +41,7 @@ watchDebounced(openAtStartup, (enabled) => {
 }, { debounce: 350 })
 
 useTauriEvent('window:hidden', () => {
-  store.setPage(Page.Home)
+  setTimeout(() => store.setPage(Page.Home), 50)
 })
 
 function handleBack() {

src/stores/store.ts

@@ -1,13 +1,13 @@
 import { invoke } from '@tauri-apps/api/tauri'
 import { defineStore } from 'pinia'
 import { readonly, ref, shallowRef, watch } from 'vue'
-import type { Thread } from '../api/notifications'
+import type { MinimalRepository, Thread } from '../api/notifications'
 import { getNotifications } from '../api/notifications'
 import type { Release } from '../api/releases'
 import { InvokeCommand, Page } from '../constants'
 import { AppStorage } from '../storage'
-import type { NotificationListData, Option, PageState } from '../types'
-import { notificationListFromThreads } from '../utils/notification'
+import type { Option, PageState } from '../types'
+import { toNotificationList } from '../utils/notification'
 
 function hasNewNotification(newThreads: Thread[], previousThreads: Thread[]) {
   const newThreadsFiltered = newThreads.filter(t => t.unread)
@@ -16,7 +16,7 @@ function hasNewNotification(newThreads: Thread[], previousThreads: Thread[]) {
 }
 
 export const useStore = defineStore('store', () => {
-  const notifications = ref<NotificationListData[]>([])
+  const notifications = shallowRef<(Thread | MinimalRepository)[]>([])
   const loadingNotifications = ref(false)
   const failedLoadingNotifications = ref(false)
   const skeletonVisible = ref(false)
@@ -33,8 +33,10 @@ export const useStore = defineStore('store', () => {
     if (accessToken == null)
       return
 
-    if (withSkeletons)
+    if (withSkeletons) {
       skeletonVisible.value = true
+      notifications.value = []
+    }
 
     loadingNotifications.value = true
     failedLoadingNotifications.value = false
@@ -48,7 +50,7 @@ export const useStore = defineStore('store', () => {
 
       notificationsRawPrevious = notificationsRaw
       notificationsRaw = data
-      notifications.value = notificationListFromThreads(data)
+      notifications.value = toNotificationList(data)
     }
     catch (error) {
       console.error('NotificationError: ', error)

src/types.ts

@@ -1,25 +1,11 @@
-import type { Raw, Ref } from 'vue'
-import type { Thread } from './api/notifications'
+import type { Ref } from 'vue'
+import type { MinimalRepository, Thread } from './api/notifications'
 import type { User } from './api/user'
 
 export type Option<T> = T | null
 export type MaybeRef<T> = T | Ref<T>
 
-export interface NotificationListData {
-  repoFullName: string
-  repoAvatarURL: string
-  items: NotificationListDataItem[]
-}
-
-export interface NotificationListDataItem {
-  id: Thread['id']
-  unread: Thread['unread']
-  title: Thread['subject']['title']
-  reason: Thread['reason']
-  type: Thread['subject']['type']
-  updatedAt: Thread['updated_at']
-  raw: Raw<Thread>
-}
+export type NotificationList = (Thread | MinimalRepository)[]
 
 export interface AppStorageContext {
   user: Option<User>

src/utils/api.ts

@@ -1,4 +1,4 @@
-import type { AppStorageContext, Option } from '../types'
+import type { AppStorageContext } from '../types'
 
 export function createBaseGithubApiHeaders(accessToken: AppStorageContext['accessToken']) {
   const headers: Record<string, string> = {

src/utils/is.ts

@@ -0,0 +1,5 @@
+const typeOf = (value: any) => Object.prototype.toString.call(value).slice(8, -1)
+
+export function isObject<T = Record<PropertyKey, any>>(value: T): value is T {
+  return typeOf(value) === 'Object'
+}

src/utils/notification.ts

@@ -1,9 +1,9 @@
-import { markRaw } from 'vue'
-import type { Thread } from '../api/notifications'
+import type { MinimalRepository, 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'
+import type { NotificationList } from '../types'
+import { isObject } from './is'
 
 export function notificationSubjectIcon(subject: NotificationSubject) {
   return subjectIconMap[subject] || Icons.Question
@@ -13,43 +13,34 @@ export function formatReason(reason: NotificationReason) {
   return reasonFormatMap[reason] || 'Unknown reason'
 }
 
-function notificationListItemFromThread(thread: Thread): NotificationListDataItem {
-  return {
-    id: thread.id,
-    reason: thread.reason,
-    title: thread.subject.title,
-    type: thread.subject.type,
-    unread: thread.unread,
-    updatedAt: thread.updated_at,
-    raw: markRaw(thread),
-  }
-}
-
-export function notificationListFromThreads(threads: Thread[]) {
-  const repoIdIndexMap: Record<Thread['repository']['id'], number> = Object.create(null)
-  const notifications: NotificationListData[] = []
+export function toNotificationList(threads: Thread[]) {
+  const notifications: NotificationList = []
 
-  for (const thread of threads) {
-    const { repository } = thread
+  for (let index = 0; index < threads.length; index++) {
+    const thread = threads[index]
 
-    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)
+    if (index === 0) {
+      notifications.push(
+        thread.repository,
+        thread,
+      )
+      continue
     }
+
+    const previousThread = threads[index - 1]
+
+    if (thread.repository.id === previousThread.repository.id)
+      notifications.push(thread)
+    else
+      notifications.push(thread.repository, thread)
   }
 
   return notifications
 }
+
+export function isThread(value: any): value is Thread {
+  return isObject<Thread>(value) && 'reason' in value
+}
+export function isRepository(value: any): value is MinimalRepository {
+  return isObject<MinimalRepository>(value) && 'teams_url' in value
+}