fix: Trigger animation on success of delete

Author: cizil-keyvalue

src/components/NotificationCard.vue

@@ -37,16 +37,18 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue';
 import { defineProps, watch, ref } from 'vue';
+import PubSub from 'pubsub-js';
 
 import type { NotificationCardProps } from '../types';
 import { generateElapsedTimeText } from '../utils/commonUtils';
+import { eventTypes, events } from '../utils/constants';
 import CloseIcon from './CloseIcon.vue';
 import TimerIcon from './TimerIcon.vue';
+import useSiren from '../composables/useSiren';
 import defaultAvatarDark from '../assets/dark/defaultAvatarDark.png';
 import defaultAvatarLight from '../assets/light/defaultAvatarLight.png';
 
 import '../styles/card.css';
-import useSiren from '../composables/useSiren';
 
 const props = defineProps<NotificationCardProps>();
 
@@ -60,14 +62,19 @@ let cardContainerStyle: CSSProperties;
 
 const defaultAvatar: string = props?.darkMode ? defaultAvatarDark : defaultAvatarLight;
 
-const handleDelete = (event: MouseEvent | KeyboardEvent) => {
-  deleteAnimation.value = 'siren-sdk-delete-animation';
+const handleDelete = async (event: MouseEvent | KeyboardEvent): Promise<void> => {
+  event.stopPropagation();
+  const isSuccess = await props.deleteById(props.notification.id, false);
+
+  if (isSuccess) {
+    deleteAnimation.value = 'siren-sdk-delete-animation';
 
   setTimeout(() => {
-    props.deleteById(props.notification.id);
-  }, 200);
+    const payload = { id: props.notification.id, action: eventTypes.DELETE_ITEM };
 
-  event.stopPropagation();
+    PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+  }, 200);
+  }
 };
 
 const handleNotificationCardClick = () => {

src/components/SirenPanel.vue

@@ -141,15 +141,13 @@ const triggerOnError = computed(
     }
 );
 
-const deleteNotificationById = computed(() => async (id: string) => {
-  try {
-    const response = await deleteById(id);
+const deleteNotificationById = async (id: string, shouldUpdateList: boolean): Promise<boolean> => {
+    const response = await deleteById(id, shouldUpdateList);
 
     if (response) triggerOnError.value(response);
-  } catch (err) {
-    // TODO: handle error
-  }
-});
+
+  return !!response?.data;
+};
 
 const notificationSubscriber = async (_type: string, dataString: string) => {
   const data = await JSON.parse(dataString);

src/composables/useSiren.ts

@@ -46,12 +46,12 @@ const useSiren = () => {
     return { error: errorMap.SIREN_OBJECT_NOT_FOUND };
   };
 
-  const deleteById = async (id: string) => {
+  const deleteById = async (id: string, shouldUpdateList: boolean = true) => {
     if (siren.value)
       if (id?.length > 0) {
         const response = await siren.value?.deleteById(id);
 
-        if (response && response.data) {
+        if (response?.data && shouldUpdateList) {
           const payload = { id, action: eventTypes.DELETE_ITEM };
 
           PubSub.publish(

src/types.ts

@@ -233,7 +233,7 @@ export type NotificationCardProps = {
   cardProps: SirenInboxProps['cardProps'];
   onCardClick?: SirenInboxProps['onCardClick'];
   styles: SirenStyleProps;
-  deleteById: (id: string) => void;
+  deleteById: (id: string, shouldUpdateList: boolean) => Promise<boolean>
   darkMode: boolean;
 };
 

tests/components/__snapshots__/sirenPanel.spec.ts.snap

@@ -874,27 +874,7 @@ VueWrapper {
             "containerClassNames": "siren-sdk-content-container",
             "deleteByDate": [Function],
             "deleteById": [Function],
-            "deleteNotificationById": ComputedRefImpl {
-              "__v_isReadonly": true,
-              "__v_isRef": true,
-              "_cacheable": true,
-              "_setter": [Function],
-              "dep": undefined,
-              "effect": ReactiveEffect {
-                "_depsLength": 0,
-                "_dirtyLevel": 4,
-                "_runnings": 0,
-                "_shouldSchedule": false,
-                "_trackId": 0,
-                "active": true,
-                "computed": [Circular],
-                "deps": [],
-                "fn": [Function],
-                "scheduler": undefined,
-                "trigger": [Function],
-              },
-              "getter": [Function],
-            },
+            "deleteNotificationById": [Function],
             "error": RefImpl {
               "__v_isRef": true,
               "__v_isShallow": false,
@@ -1923,27 +1903,6 @@ VueWrapper {
             "cleanups": [],
             "detached": true,
             "effects": [
-              ReactiveEffect {
-                "_depsLength": 0,
-                "_dirtyLevel": 4,
-                "_runnings": 0,
-                "_shouldSchedule": false,
-                "_trackId": 0,
-                "active": true,
-                "computed": ComputedRefImpl {
-                  "__v_isReadonly": true,
-                  "__v_isRef": true,
-                  "_cacheable": true,
-                  "_setter": [Function],
-                  "dep": undefined,
-                  "effect": [Circular],
-                  "getter": [Function],
-                },
-                "deps": [],
-                "fn": [Function],
-                "scheduler": undefined,
-                "trigger": [Function],
-              },
               ReactiveEffect {
                 "_depsLength": 0,
                 "_dirtyLevel": 4,