feat: Implement animation on notification delete

* feat: Implement animation on notification delete using LayoutAnimation react-native

* refactor: updated delete animation logic

* fix: updated test case

* fix: update delete animation logic

* fix: updated test cases

Author: abhay-keyvalue

src/components/card.tsx

@@ -1,8 +1,9 @@
-import React, { useState, type ReactElement, useMemo, useEffect } from 'react';
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { useState, type ReactElement, useMemo, useEffect, useRef } from 'react';
+import { Animated, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { NotificationCardProps } from '../types';
 import { CommonUtils, useSiren } from '../utils';
+import { eventTypes, events } from '../utils/constants';
 import CloseIcon from './closeIcon';
 import TimerIcon from './timerIcon';
 
@@ -44,6 +45,8 @@ const Card = (props: NotificationCardProps): ReactElement => {
   const { hideAvatar, disableAutoMarkAsRead, hideDelete = false } = cardProps;
   const { markAsRead } = useSiren();
 
+  const opacity = useRef(new Animated.Value(1)).current;
+
   const emptyState = () => {
     return darkMode ? require('../assets/emptyDark.png') : require('../assets/emptyLight.png');
   };
@@ -86,6 +89,22 @@ const Card = (props: NotificationCardProps): ReactElement => {
     );
   }, [styles, darkMode, imageSource]);
 
+  const onDeleteItem = async (): Promise<void> => {
+    
+    const isSuccess = await onDelete(notification.id, false);
+
+    if (isSuccess) 
+      Animated.timing(opacity, {
+        toValue: 0.1,
+        duration: 300,
+        useNativeDriver: true
+      }).start(() => {
+        const payload = { id: notification.id, action: eventTypes.DELETE_ITEM };
+
+        PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+      });
+  };
+
   return (
     <TouchableOpacity
       onPress={cardClick}
@@ -100,15 +119,15 @@ const Card = (props: NotificationCardProps): ReactElement => {
           notification?.isRead && style.transparent
         ]}
       />
-      <View style={[style.cardContainer, styles.cardContainer]}>
+      <Animated.View style={[style.cardContainer, styles.cardContainer, { opacity }]}>
         {!hideAvatar && renderAvatar}
         <View style={style.cardContentContainer}>
           <View style={style.cardFooterRow}>
             <Text numberOfLines={2} style={[styles.cardTitle, style.cardTitle]}>
               {notification.message?.header}
             </Text>
             {!hideDelete && (
-              <CloseIcon onDelete={onDelete} notification={notification} styles={styles} />
+              <CloseIcon onDelete={onDeleteItem} notification={notification} styles={styles} />
             )}
           </View>
           {Boolean(notification.message?.subHeader) && (
@@ -126,7 +145,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
             </Text>
           </View>
         </View>
-      </View>
+      </Animated.View>
     </TouchableOpacity>
   );
 };
@@ -139,7 +158,7 @@ const style = StyleSheet.create({
   },
   cardContainer: {
     width: '100%',
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   cardIconContainer: {
     paddingLeft: 6,

src/components/sirenInbox.tsx

@@ -305,14 +305,20 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
     );
   };
 
-  const onDelete = async (id: string): Promise<void> => {
+  const onDelete = async (id: string, shouldUpdateList: boolean): Promise<boolean> => {
+    let isSuccess = false;
+
     if (!disableCardDelete.current) {
       disableCardDelete.current = true;
-      const response = await deleteNotification(id);
 
+      const response = await deleteNotification(id, shouldUpdateList);
+      
+      if (response?.data) isSuccess = true;
       processError(response?.error);
       disableCardDelete.current = false;
     }
+
+    return isSuccess;
   };
 
   const onPressClearAll = async (): Promise<void> => {

src/types.ts

@@ -202,7 +202,7 @@ export type NotificationCardProps = {
   cardProps: CardProps;
   darkMode: boolean;
   styles: Partial<SirenStyleProps>;
-  onDelete: (id: string) => void;
+  onDelete: (id: string, shouldUpdateList: boolean) => Promise<boolean>;
 };
 
 /**

src/utils/sirenHook.ts

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

tests/components/card.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, render } from '@testing-library/react-native';
+import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
 import Card from '../../src/components/card';
 import type { SirenStyleProps } from '../../src/types';
 import type { NotificationDataType } from '@sirenapp/js-sdk/dist/esm/types';
@@ -39,7 +39,8 @@ describe('Card Component', () => {
         onCardClick={onCardClickMock}
         onDelete={onDeleteMock}
         notification={notification}
-        cardProps={{ hideAvatar: false, showMedia: true }}
+        darkMode
+        cardProps={{ hideAvatar: false }}
         styles={customStyles}
       />
     );
@@ -66,7 +67,7 @@ describe('Card Component', () => {
     expect(onCardClickMock).toHaveBeenCalledWith(notification);
   });
 
-  it('should invoke onDelete callback with correct notification id when delete button is pressed', () => {
+  it('should invoke onDelete callback with correct notification id when delete button is pressed', async () => {
     const onCardClickMock = jest.fn();
     const onDeleteMock = jest.fn();
 
@@ -75,12 +76,16 @@ describe('Card Component', () => {
         onCardClick={onCardClickMock}
         onDelete={onDeleteMock}
         notification={notification}
-        cardProps={{ hideAvatar: false, showMedia: true }}
+        darkMode
+        cardProps={{ hideAvatar: false}}
         styles={customStyles}
       />
     );
-
-    fireEvent.press(getByTestId('delete-button'));
-    expect(onDeleteMock).toHaveBeenCalledWith(notification.id);
+    await act(async () => {
+      fireEvent.press(getByTestId('delete-button'));
+      await waitFor(() => {
+        expect(onDeleteMock).toHaveBeenCalledWith(notification.id, false);
+      });
+    });
   });
 });