feat(web): display error when a notification mutation fails

pujitm · pujitm · commit 9f5a7f812101 · 2024-11-04T09:25:33.000-05:00
diff --git a/web/components/Notifications/Item.vue b/web/components/Notifications/Item.vue
@@ -39,12 +39,20 @@ const icon = computed<{ component: Component; color: string } | null>(() => {
   return null;
 });
 
-const archive = useMutation(archiveMutation, {
-  variables: { id: props.id },
-});
+const archive = reactive(
+  useMutation(archiveMutation, {
+    variables: { id: props.id },
+  })
+);
+
+const deleteNotification = reactive(
+  useMutation(deleteMutation, {
+    variables: { id: props.id, type: props.type },
+  })
+);
 
-const deleteNotification = useMutation(deleteMutation, {
-  variables: { id: props.id, type: props.type },
+const mutationError = computed(() => {
+  return archive.error?.message ?? deleteNotification.error?.message;
 });
 </script>
 
@@ -81,6 +89,8 @@ const deleteNotification = useMutation(deleteMutation, {
       <p class="text-secondary-foreground">{{ description }}</p>
     </div>
 
+    <p v-if="mutationError" class="text-red-600">Error: {{ mutationError }}</p>
+
     <div class="flex justify-end items-baseline gap-2">
       <a v-if="link" :href="link">
         <Button type="button" variant="outline" size="xs">
