From e388b37aa6f1cf8039d0fb72aaa60e7709315cd3 Mon Sep 17 00:00:00 2001
From: Pujit Mehrotra <pujitm2009@gmail.com>
Date: Fri, 1 Nov 2024 12:15:59 -0400
Subject: [PATCH] refactor(web): simplify naming of notification mutations

---
 web/components/Notifications/Item.vue | 28 +++++++++++----------------
 web/helpers/apollo-cache/prefixes.ts  |  2 +-
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/web/components/Notifications/Item.vue b/web/components/Notifications/Item.vue
index 7a487e2ef..2e3cf34f4 100644
--- a/web/components/Notifications/Item.vue
+++ b/web/components/Notifications/Item.vue
@@ -13,7 +13,7 @@ import type { NotificationFragmentFragment } from "~/composables/gql/graphql";
 import { NotificationType } from "~/composables/gql/graphql";
 import {
   archiveNotification as archiveMutation,
-  deleteNotification,
+  deleteNotification as deleteMutation,
 } from "./graphql/notification.query";
 
 const props = defineProps<NotificationFragmentFragment>();
@@ -39,19 +39,13 @@ const icon = computed<{ component: Component; color: string } | null>(() => {
   return null;
 });
 
-const { mutate: archive, loading: archiveInProgress } = useMutation(
-  archiveMutation,
-  {
-    variables: { id: props.id },
-  }
-);
+const archive = useMutation(archiveMutation, {
+  variables: { id: props.id },
+});
 
-const { mutate: deleteFromServer, loading: deleting } = useMutation(
-  deleteNotification,
-  {
-    variables: { id: props.id, type: props.type },
-  }
-);
+const deleteNotification = useMutation(deleteMutation, {
+  variables: { id: props.id, type: props.type },
+});
 </script>
 
 <template>
@@ -96,20 +90,20 @@ const { mutate: deleteFromServer, loading: deleting } = useMutation(
       </a>
       <Button
         v-if="type === NotificationType.Unread"
-        :disabled="archiveInProgress"
+        :disabled="archive.loading"
         class="relative z-20 rounded"
         size="xs"
-        @click="archive"
+        @click="archive.mutate"
       >
         <ArchiveBoxIcon class="size-3 mr-1" />
         <span class="text-sm mt-0.5">Archive</span>
       </Button>
       <Button
         v-if="type === NotificationType.Archive"
-        :disabled="deleting"
+        :disabled="deleteNotification.loading"
         class="relative z-20 rounded"
         size="xs"
-        @click="deleteFromServer"
+        @click="deleteNotification.mutate"
       >
         <TrashIcon class="size-3 mr-1" />
         <span class="text-sm mt-0.5">Delete</span>
diff --git a/web/helpers/apollo-cache/prefixes.ts b/web/helpers/apollo-cache/prefixes.ts
index a5964dce1..593863101 100644
--- a/web/helpers/apollo-cache/prefixes.ts
+++ b/web/helpers/apollo-cache/prefixes.ts
@@ -1,5 +1,5 @@
 /**
- * The magic 'Notification' prefix comes from inspecting the apollo cachel.
+ * The magic 'Notification' prefix comes from inspecting the apollo cache.
  * I think it comes from the __typename when apollo caches an object (by default)
  */
 export const NOTIFICATION_CACHE_PREFIX = "Notification";