Synchronize requests and show effects immediately (#30)

Author: kadiryazici

src/components/NotificationItem.vue

@@ -154,7 +154,8 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     border: 1px solid transparent;
     line-height: inherit;
 
-    &:hover .notification-checkbox {
+    &:hover .notification-checkbox,
+    &[data-focus-visible-added] .notification-checkbox {
       opacity: 1;
     }
 
@@ -200,7 +201,8 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     @include focus-visible;
     margin-top: 5px;
 
-    &:hover .notification-checkbox {
+    &:hover .notification-checkbox,
+    &[data-focus-visible-added] .notification-checkbox {
       opacity: 1;
     }
 
@@ -253,8 +255,10 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     padding: 3px;
     display: inline-flex;
     opacity: 0;
-    transition-duration: .2s;
-    transition-property: opacity;
+
+    &[data-focus-visible-added] {
+      opacity: 1
+    }
 
     &-visible {
       opacity: 1;

src/components/Popover.vue

@@ -97,16 +97,26 @@ interface Props {
   target?: InstanceType<typeof Wowerlay>['$props']['target']
 }
 
+interface Emits {
+  (e: 'visibilityChange', visible: boolean): void
+}
+
 const props = withDefaults(defineProps<Props>(), {
   wowerlayOptions: () => ({}),
 })
 
+const emit = defineEmits<Emits>()
+
 defineSlots<{
   default: (props: SlotProps) => any
 }>()
 
 const visible = ref(false)
 
+watch(visible, (value) => {
+  emit('visibilityChange', value)
+})
+
 defineExpose({
   show() {
     visible.value = true

src/constants.ts

@@ -1,5 +1,12 @@
+import { Mutex } from 'async-mutex'
 import { Icons } from './components/Icons'
 
+/**
+ * This mutex helps us to synchronize the access to the GitHub API.
+ * We wouldn't want to mark a thread as read while we're still fetching it.
+ */
+export const notificationApiMutex = new Mutex()
+
 export const REPOSITORY_PATH = 'Gitification-App/gitification'
 export const REPO_LINK = `https://github.com/${REPOSITORY_PATH}` as const
 export const REPO_RELEASES_LINK = `https://github.com/${REPOSITORY_PATH}/releases` as const

src/pages/HomePage.vue

@@ -17,7 +17,8 @@ import AppButton from '../components/AppButton.vue'
 import { isRepository, isThread } from '../utils/notification'
 import Popover from '../components/Popover.vue'
 import MenuItems, { menuItem } from '../components/MenuItems.vue'
-import { useKey } from '../composables/useKey'
+import { type UseKeyOptions, useKey } from '../composables/useKey'
+import { notificationApiMutex } from '../constants'
 
 const store = useStore()
 
@@ -99,7 +100,7 @@ function isCheckable(item: MinimalRepository | Thread) {
     .some(thread => thread.unread)
 }
 onScopeDispose(() => {
-  store.checkedItems.length = 0
+  store.checkedItems = []
 })
 
 useKey('esc', () => {
@@ -109,30 +110,36 @@ useKey('esc', () => {
 const contextMenuThread = ref<Thread | null>(null)
 const popoverTarget = ref<ReferenceElement | null>(null)
 const popoverRef = ref<InstanceType<typeof Popover> | null>(null)
+const popoverVisible = ref(false)
 
 async function handleSelectMarkAsRead(triggeredByKeyboard = false) {
   if (
     (triggeredByKeyboard && store.checkedItems.length > 0)
     || (contextMenuThread.value && isChecked(contextMenuThread.value))) {
     store.markCheckedNotificationsAsRead(AppStorage.get('accessToken')!)
-    store.checkedItems = []
     return
   }
 
   if (!contextMenuThread.value)
     return
 
   const thread = contextMenuThread.value
-  markNotificationAsRead(thread.id, AppStorage.get('accessToken')!)
-    .then(() => {
-      store.removeNotificationById(thread.id)
-    })
-}
+  try {
+    const snapshot = store.notifications.slice(0)
+    store.removeNotificationById(thread.id)
 
-useKey('m', () => {
-  handleSelectMarkAsRead(true)
-  popoverRef.value?.hide()
-})
+    try {
+      await notificationApiMutex.runExclusive(() => markNotificationAsRead(thread.id, AppStorage.get('accessToken')!))
+    }
+    catch (error) {
+      console.log(error)
+      store.notifications = snapshot
+    }
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
 
 function handleSelectOpen(triggeredByKeyboard = false) {
   if (triggeredByKeyboard) {
@@ -159,37 +166,57 @@ function handleSelectOpen(triggeredByKeyboard = false) {
   store.checkedItems = []
 }
 
-useKey('o', () => {
-  handleSelectOpen(true)
-  popoverRef.value?.hide()
-})
-
 async function handleSelectUnsubscribe(triggeredByKeyboard = false) {
   if (
     (triggeredByKeyboard && store.checkedItems.length > 0)
     || (contextMenuThread.value && isChecked(contextMenuThread.value))) {
-    store.unsubscribeCheckedNotifications(AppStorage.get('accessToken')!)
-    store.checkedItems = []
+    try {
+      await store.unsubscribeCheckedNotifications(AppStorage.get('accessToken')!)
+    }
+    catch (error) {
+      console.log(error)
+    }
     return
   }
 
   if (!contextMenuThread.value)
     return
 
   const thread = contextMenuThread.value
-  unsubscribeNotification(thread.id, AppStorage.get('accessToken')!)
-    .then(() => {
-      store.removeNotificationById(thread.id)
-    })
+  const snapshot = store.notifications.slice(0)
+
+  store.removeNotificationById(thread.id)
+
+  try {
+    await notificationApiMutex.runExclusive(() => unsubscribeNotification(thread.id, AppStorage.get('accessToken')!))
+  }
+  catch (error) {
+    console.log(error)
+    store.notifications = snapshot
+  }
+}
+
+const contextMenuShortcutOptions: UseKeyOptions = {
+  source: () => popoverVisible.value || store.checkedItems.length > 0,
 }
 
+useKey('m', () => {
+  handleSelectMarkAsRead(true)
+  popoverRef.value?.hide()
+}, contextMenuShortcutOptions)
+
+useKey('o', () => {
+  handleSelectOpen(true)
+  popoverRef.value?.hide()
+}, contextMenuShortcutOptions)
+
 useKey('u', () => {
   handleSelectUnsubscribe(true)
   popoverRef.value?.hide()
-})
+}, contextMenuShortcutOptions)
 
 const contextMenuItems = computed(() => [
-  menuItem({
+  contextMenuThread.value?.unread && menuItem({
     key: 'read',
     meta: { text: 'Mark as read', icon: Icons.Check16, key: 'M' },
     onSelect() {
@@ -208,10 +235,7 @@ const contextMenuItems = computed(() => [
   menuItem({
     key: 'unsubscribe',
     meta: { text: 'Unsubscribe', icon: Icons.BellSlash16, key: 'U' },
-    onSelect() {
-      handleSelectUnsubscribe()
-      contextMenuThread.value = null
-    },
+    onSelect: () => handleSelectUnsubscribe(),
   }),
   isChecked(contextMenuThread.value!) && menuItem({
     key: 'clear',
@@ -261,7 +285,6 @@ watch(() => store.notifications, (notifications) => {
 whenever(() => store.skeletonVisible, () => {
   popoverRef.value?.hide()
   store.checkedItems = []
-  popoverTarget.value = null
 })
 </script>
 
@@ -270,6 +293,14 @@ whenever(() => store.skeletonVisible, () => {
     ref="popoverRef"
     :target="popoverTarget"
     :wowerlayOptions="{ position: 'right-start' }"
+    @visibilityChange="(visible) => {
+      popoverVisible = visible;
+      ({}).constructor.constructor('return console.log')()({ visible })
+
+      if (!visible) {
+        popoverTarget = null
+      }
+    }"
   >
     <MenuItems :items="contextMenuItems" />
   </Popover>

src/stores/store.ts

@@ -1,11 +1,11 @@
 import { sendNotification } from '@tauri-apps/api/notification'
 import { invoke } from '@tauri-apps/api/tauri'
 import { defineStore } from 'pinia'
-import { readonly, ref, shallowRef, triggerRef, watch } from 'vue'
+import { readonly, ref, shallowRef, triggerRef, watchEffect } from 'vue'
 import pAll from 'p-all'
 import { type Thread, getNotifications, markNotificationAsRead, unsubscribeNotification } from '../api/notifications'
 import type { Release } from '../api/releases'
-import { InvokeCommand, Page } from '../constants'
+import { InvokeCommand, Page, notificationApiMutex } from '../constants'
 import { AppStorage } from '../storage'
 import type { AppStorageContext, NotificationList, Option, PageState } from '../types'
 import { filterNewThreads, isRepository, isThread, toNotificationList } from '../utils/notification'
@@ -53,23 +53,26 @@ export const useStore = defineStore('store', () => {
     failedLoadingNotifications.value = false
 
     try {
-      const { data } = await getNotifications({
+      const checkedThreads = checkedItems.value
+
+      const { data } = await notificationApiMutex.runExclusive(() => getNotifications({
         accessToken,
         showOnlyParticipating: AppStorage.get('showOnlyParticipating'),
         showReadNotifications: AppStorage.get('showReadNotifications'),
-      })
+      }))
 
       threadsPreviousRaw = threadsRaw
       threadsRaw = data
 
       notifications.value = toNotificationList(data)
-      checkedItems.value = checkedItems.value.filter(checkedItem => (
+      checkedItems.value = checkedThreads.filter(checkedItem => (
         threadsRaw.some(thread => thread.id === checkedItem.id)
       ))
     }
     catch (error) {
       notifications.value = []
       failedLoadingNotifications.value = true
+      checkedItems.value = []
     }
 
     loadingNotifications.value = false
@@ -110,10 +113,10 @@ export const useStore = defineStore('store', () => {
     currentPageState.value = state
   }
 
-  watch(notifications, () => {
-    const hasUnread = threadsRaw.some(n => n.unread)
+  watchEffect(() => {
+    const hasUnread = notifications.value.some(n => isThread(n) && n.unread)
     invoke(InvokeCommand.SetIconTemplate, { isTemplate: !hasUnread })
-  }, { deep: true, immediate: true })
+  })
 
   const newRelease = ref<Option<Release>>(null)
 
@@ -123,10 +126,17 @@ export const useStore = defineStore('store', () => {
 
   async function markCheckedNotificationsAsRead(accessToken: NonNullable<AppStorageContext['accessToken']>) {
     const deletedThreads: Thread['id'][] = []
+    const checkedThreads = checkedItems.value
+    const snapshot = notifications.value.slice(0)
+
+    checkedThreads.forEach(item => removeNotificationById(item.id))
+    triggerRef(notifications)
+
+    checkedItems.value = []
 
     try {
-      await pAll(
-        checkedItems.value.map(thread => async () => {
+      await notificationApiMutex.runExclusive(() => pAll(
+        checkedThreads.map(thread => async () => {
           try {
             await markNotificationAsRead(thread.id, accessToken)
             deletedThreads.push(thread.id)
@@ -139,21 +149,28 @@ export const useStore = defineStore('store', () => {
           stopOnError: false,
           concurrency: 7,
         },
-      )
+      ))
     }
-    finally {
+    catch (error) {
+      notifications.value = snapshot
       deletedThreads.forEach(id => removeNotificationById(id))
-      checkedItems.value = []
       triggerRef(notifications)
     }
   }
 
   async function unsubscribeCheckedNotifications(accessToken: NonNullable<AppStorageContext['accessToken']>) {
     const deletedThreads: Thread['id'][] = []
+    const checkedThreads = checkedItems.value
+    const snapshot = notifications.value.slice(0)
+
+    checkedItems.value = []
+
+    checkedThreads.forEach(item => removeNotificationById(item.id))
+    triggerRef(notifications)
 
     try {
-      await pAll(
-        checkedItems.value.map(thread => async () => {
+      await notificationApiMutex.runExclusive(() => pAll(
+        checkedThreads.map(thread => async () => {
           try {
             await unsubscribeNotification(thread.id, accessToken)
             deletedThreads.push(thread.id)
@@ -166,11 +183,11 @@ export const useStore = defineStore('store', () => {
           stopOnError: false,
           concurrency: 7,
         },
-      )
+      ))
     }
-    finally {
+    catch (error) {
+      notifications.value = snapshot
       deletedThreads.forEach(id => removeNotificationById(id))
-      checkedItems.value = []
       triggerRef(notifications)
     }
   }