fix: Trigger delete animation after delete API success

Author: reshmarevi17

README.md

@@ -89,9 +89,6 @@ type Theme = {
 };
 
 type ThemeProps = {
-  notificationIcon?: {
-    size?: number,
-  },
   colors?: {
     primaryColor?: string,
     textColor?: string,
@@ -113,7 +110,6 @@ type ThemeProps = {
     background?: string,
     titleColor?: string,
     headerActionColor?: string,
-    borderColor?: string,
   },
   windowContainer?: {
     background?: string,
@@ -152,7 +148,7 @@ Please note that the badgeStyle, window shadow and border props are only applica
     titleFontWeight?:TextStyle["fontWeight"],
     titleSize?: number,
     titlePadding?: number,
-    borderWidth?: string;
+    borderWidth?: string,
   },
   windowContainer?: {
     padding?: number,
@@ -177,29 +173,29 @@ Please note that the badgeStyle, window shadow and border props are only applica
   badgeStyle?: {
     size?: number,
     textSize?: number,
-    top?: number;
+    top?: number,
     right?: number
   },
   deleteIcon?:{
     size?: number
-  }
-  dateIcon?:{
+  },
+  timerIcon?:{
     size?: number
-  }
+  },
   clearAllIcon?:{
     size?: number
-  }
+  },
 }
 ```
 
 #### CardProps
 
 ```js
     type CardProps = {
-      hideDelete?: boolean;
+      hideDelete?: boolean,
       hideAvatar?: boolean,
       disableAutoMarkAsRead?: boolean,
-      deleteIcon?: JSX.Element;
+      deleteIcon?: JSX.Element,
       onAvatarClick?: () => void,
     };
 ```
@@ -208,7 +204,7 @@ Please note that the badgeStyle, window shadow and border props are only applica
 
 ```js
     type InboxHeaderProps = {
-      title?: string;
+      title?: string,
       hideHeader?: boolean,
       hideClearAll?: boolean,
       customHeader?: JSX.Element | null,

src/components/Card.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import React, { type FC } from "react";
+import React, { type FC, useState } from "react";
 
 import CloseIcon from "./CloseIcon";
 import TimerIcon from "./TimerIcon";
@@ -8,6 +8,7 @@ import defaultAvatarLight from "../assets/light/defaultAvatarLight.png";
 import type { NotificationCardProps } from "../types";
 import { generateElapsedTimeText } from "../utils/commonUtils";
 import "../styles/card.css";
+import { events, eventTypes } from "../utils/constants";
 import useSiren from "../utils/sirenHook";
 
 /**
@@ -48,28 +49,37 @@ const Card: FC<NotificationCardProps> = ({
   styles,
   darkMode,
   onCardClick,
-  deleteById,
+  deleteNotificationById,
 }) => {
-  const { id, createdAt, message, isRead } = notification;
+  const { createdAt, message, isRead } = notification;
   const { avatar, header, subHeader, body } = message;
   const { hideAvatar, hideDelete, disableAutoMarkAsRead, deleteIcon = null, onAvatarClick } =  cardProps ?? {};
   const {
     markAsReadById
   } = useSiren();
 
-  const onDelete = (event: React.MouseEvent) => {
-    const cardElement = event.currentTarget.closest(
-      ".siren-sdk-card-common-container"
-    );
+  const [deleteAnimationStyle, setDeleteAnimationStyle] = useState('');
 
-    cardElement?.classList.add("siren-sdk-delete-animation");
-    setTimeout(() => {
-      deleteById(id);
-    }, 200); 
+  const onDelete = async (event: React.MouseEvent): Promise<void> => {
 
     event.stopPropagation();
+    
+    const isSuccess = await deleteNotificationById(notification.id, false);
+
+    if (isSuccess) {
+
+      setDeleteAnimationStyle("siren-sdk-delete-animation");
+
+      const payload = { id: notification.id, action: eventTypes.DELETE_ITEM };
+
+      setTimeout(() => {
+        PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+      }, 200)
+
+    }
   };
 
+ 
   const defaultAvatar = darkMode ? defaultAvatarDark : defaultAvatarLight;
   const cardContainerStyle: CSSProperties = isRead
     ? {
@@ -99,7 +109,7 @@ const Card: FC<NotificationCardProps> = ({
         hideAvatar
           ? "siren-sdk-hide-avatar-card-container"
           : "siren-sdk-card-container"
-      } siren-sdk-card-common-container`}
+      } siren-sdk-card-common-container ${deleteAnimationStyle}`}
       onClick={handleNotificationCardClick}
       aria-label={`siren-notification-card-${notification.id}`}
       data-testid={`card-${notification.id}`}

src/components/SirenNotificationIcon.tsx

@@ -5,7 +5,7 @@ import { useSirenContext } from "./SirenProvider";
 import "../styles/sirenNotificationIcon.css";
 import type { SirenNotificationButtonProps } from "../types";
 import { Constants } from "../utils";
-import { BadgeType, EventType } from "../utils/constants";
+import { BadgeType, EventType, MAX_UNVIEWED_COUNT_SHOWN } from "../utils/constants";
 
 const { eventTypes, events } = Constants;
 
@@ -92,7 +92,7 @@ const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
   };
 
   const renderCount = useCallback(
-    () => (unviewedCount > 99 ? "99+" : unviewedCount),
+    () => (unviewedCount > MAX_UNVIEWED_COUNT_SHOWN ? `${MAX_UNVIEWED_COUNT_SHOWN}+` : unviewedCount),
     [unviewedCount]
   );
 

src/components/SirenPanel.tsx

@@ -117,11 +117,16 @@ const SirenPanel: FC<SirenPanelProps> = ({
     return () => {
       cleanUp();
       setNotifications([]);
-      !hideBadge && restartNotificationCountFetch();
       handleMarkNotificationsAsViewed(new Date().toISOString());
     };
   }, [hideBadge, siren]);
 
+  useEffect(() => {
+    return(() => {
+      !hideBadge && restartNotificationCountFetch();
+    })
+  }, [hideBadge])
+
   useEffect(() => {
     if (eventListenerData) {
       const updatedNotifications: NotificationDataType[] = updateNotifications(
@@ -270,14 +275,20 @@ const SirenPanel: FC<SirenPanelProps> = ({
   };
 
   const deleteNotificationById = useCallback(
-    async (id: string) => {
+    async (id: string, shouldUpdateList: boolean) => {
+      let isSuccess = false;
+
       try {
-        const response = await deleteById(id);
+        const response = await deleteById(id, shouldUpdateList);
 
+        if (response?.data) isSuccess = true;
         response && triggerOnError(response);
       } catch (er) {
+        isSuccess = false;
         //  handle error if needed
       }
+
+      return isSuccess;
     },
     [deleteById, triggerOnError]
   );
@@ -328,7 +339,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
         notification={item}
         cardProps={cardProps}
         onCardClick={onCardClick}
-        deleteById={deleteNotificationById}
+        deleteNotificationById={deleteNotificationById}
         styles={styles}
         key={item.id}
         darkMode={darkMode}

src/types.ts

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

src/utils/constants.ts

@@ -105,6 +105,7 @@ export const AUTHENTICATION_FAILED = 'AUTHENTICATION_FAILED';
 export const TOKEN_VERIFICATION_PENDING ='TOKEN_VERIFICATION_PENDING';
 export const MAXIMUM_RETRY_COUNT = 3;
 export const MAXIMUM_ITEMS_PER_FETCH = 50;
+export const MAX_UNVIEWED_COUNT_SHOWN = 99;
 
 export const errorMap = {
   SIREN_OBJECT_NOT_FOUND: {

src/utils/sirenHook.ts

@@ -43,12 +43,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)
       if (id?.length > 0) {
         const response = await siren?.deleteById(id);
 
-        if (response && response.data) {
+        if (response?.data && shouldUpdateList) {
           const payload = { id, action: eventTypes.DELETE_ITEM };
 
           PubSub.publish(

tests/components/__snapshots__/card.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`matches snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="siren-notification-card-1"
-    class="siren-sdk-card-container siren-sdk-card-common-container"
+    class="siren-sdk-card-container siren-sdk-card-common-container "
     data-testid="card-1"
     style="background-color: rgb(46, 45, 48); padding: 12px; border-bottom: 0.5px solid; border-color: #344054; border-left: 4px solid #FA9874;"
   >

tests/components/card.spec.tsx

@@ -36,7 +36,7 @@ test("matches snapshot", () => {
   const { asFragment } = render(
     <Card
       notification={mockNotification}
-      deleteById={mockDeleteNotificationById}
+      deleteNotificationById={mockDeleteNotificationById}
       onCardClick={mockOnNotificationCardClick}
       cardProps={{}}
       styles={style}
@@ -50,7 +50,7 @@ test("renders notification card with basic content", () => {
   const screen = render(
     <Card
       notification={mockNotification}
-      deleteById={mockDeleteNotificationById}
+      deleteNotificationById={mockDeleteNotificationById}
       onCardClick={mockOnNotificationCardClick}
       cardProps={{}}
       styles={style}
@@ -68,7 +68,7 @@ test("triggers delete notification callback on delete button click", () => {
   const screen = render(
     <Card
       notification={mockNotification}
-      deleteById={mockDeleteNotificationById}
+      deleteNotificationById={mockDeleteNotificationById}
       onCardClick={mockOnNotificationCardClick}
       cardProps={{}}
       styles={style}
@@ -84,7 +84,7 @@ test("triggers delete notification callback on delete button click", () => {
     jest.advanceTimersByTime(200);
   });
 
-  expect(mockDeleteNotificationById).toHaveBeenCalledWith("1");
+  expect(mockDeleteNotificationById).toHaveBeenCalledWith("1", false);
 
   jest.useRealTimers();
 });
@@ -93,7 +93,7 @@ test("triggers notification card click callback on card click", () => {
   const screen = render(
     <Card
       notification={mockNotification}
-      deleteById={mockDeleteNotificationById}
+      deleteNotificationById={mockDeleteNotificationById}
       onCardClick={mockOnNotificationCardClick}
       cardProps={{ hideAvatar: true }}
       styles={style}
@@ -111,7 +111,7 @@ test("renders header, subheader, and body", () => {
   const screen = render(
     <Card
       notification={mockNotification}
-      deleteById={mockDeleteNotificationById}
+      deleteNotificationById={mockDeleteNotificationById}
       onCardClick={mockOnNotificationCardClick}
       cardProps={{}}
       styles={style}
@@ -132,7 +132,7 @@ test("does not render avatar if hideAvatar is true", () => {
   const screen = render(
     <Card
       notification={mockNotification}
-      deleteById={mockDeleteNotificationById}
+      deleteNotificationById={mockDeleteNotificationById}
       onCardClick={mockOnNotificationCardClick}
       cardProps={{ hideAvatar: true }}
       styles={style}