refactor: Update realtime fetch logic and rename functions

Author: abhay-keyvalue

README.md

@@ -246,10 +246,6 @@ function MyComponent() {
     markAsReadById(id);
   }
 
-  function handleDeleteNotification(id) {
-    deleteById(id);
-  }
-
   return (
     {/* Your component logic */}
   );

package-lock.json

@@ -78,6 +78,6 @@
   ],
   "dependencies": {
     "pubsub-js": "^1.9.4",
-    "@sirenapp/js-sdk": "^1.0.0"
+    "@sirenapp/js-sdk": "^1.1.0"
   }
 }

package.json

@@ -22,6 +22,7 @@ const {
   TOKEN_VERIFICATION_PENDING,
   MAXIMUM_ITEMS_PER_FETCH,
   VerificationStatus,
+  EventType,
   errorMap
 } = Constants;
 const { applyTheme, isNonEmptyArray, updateNotifications } = CommonUtils;
@@ -149,7 +150,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
     }
   }, [eventListenerData]);
 
-  const handleMarkNotificationsAsViewed = async (newNotifications = notifications) => {
+  const handleMarkAllAsViewed = async (newNotifications = notifications) => {
     const currentTimestamp = new Date().getTime();
     const isoString = new Date(currentTimestamp).toISOString();
     const response = await markAllAsViewed(
@@ -168,10 +169,10 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
 
   // Clean up - stop polling when component unmounts
   const cleanUp = () => () => {
-    siren?.stopRealTimeNotificationFetch();
+    siren?.stopRealTimeFetch(EventType.NOTIFICATION);
     setNotifications([]);
     PubSub.unsubscribe(events.NOTIFICATION_LIST_EVENT);
-    handleMarkNotificationsAsViewed();
+    handleMarkAllAsViewed();
   };
 
   const notificationSubscriber = async (type: string, dataString: string) => {
@@ -183,15 +184,15 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
   // Initialize Siren SDK and fetch notifications
   const initialize = async (): Promise<void> => {
     if (siren) {
-      siren?.stopRealTimeNotificationFetch();
+      siren?.stopRealTimeFetch(EventType.NOTIFICATION);
       const allNotifications = await fetchNotifications(siren, true);
       const notificationParams: fetchProps = { size: notificationsPerPage };
 
       if (isNonEmptyArray(allNotifications))
         notificationParams.start = allNotifications[0].createdAt;
 
       if (verificationStatus === VerificationStatus.SUCCESS)
-        siren?.startRealTimeNotificationFetch(notificationParams);
+        siren?.startRealTimeFetch({eventType: EventType.NOTIFICATION, params: notificationParams});
     }
   };
 
@@ -214,7 +215,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
     if (nonEmptyResponse) {
       const updatedNotifications = isResetList ? responseData : [...notifications, ...responseData];
 
-      isResetList && handleMarkNotificationsAsViewed(updatedNotifications);
+      isResetList && handleMarkAllAsViewed(updatedNotifications);
       setNotifications(updatedNotifications);
 
       return updatedNotifications;
@@ -273,15 +274,15 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
         setNotifications([]);
         setIsLoading(true);
 
-        siren?.stopRealTimeNotificationFetch();
+        siren?.stopRealTimeFetch(EventType.NOTIFICATION);
         const allNotifications = (await fetchNotifications(siren, true)) || [];
         const notificationParams: fetchProps = { size: notificationsPerPage };
 
         if (isNonEmptyArray(allNotifications))
           notificationParams.start = allNotifications[0].createdAt;
 
         if (verificationStatus === VerificationStatus.SUCCESS)
-          siren?.startRealTimeNotificationFetch(notificationParams);
+          siren?.startRealTimeFetch({eventType: EventType.NOTIFICATION, params:notificationParams});
       } catch (err) {
         setIsLoading(false);
         setIsError(true);

src/components/sirenInbox.tsx

@@ -14,6 +14,7 @@ const {
   eventTypes,
   events,
   defaultStyles,
+  EventType,
   VerificationStatus,
   errorMap
 } = Constants;
@@ -67,7 +68,7 @@ const SirenInboxIcon = (props: SirenInboxIconProps) => {
 
   // Clean up - stop polling when component unmounts
   const cleanUp = () => () => {
-    siren?.stopRealTimeUnviewedCountFetch();
+    siren?.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
     PubSub.unsubscribe(events.NOTIFICATION_COUNT_EVENT);
     seUnviewedCount(0);
   };
@@ -102,7 +103,7 @@ const SirenInboxIcon = (props: SirenInboxIconProps) => {
       const unViewed: UnviewedCountReturnResponse | null =
         await siren.fetchUnviewedNotificationsCount();
 
-      siren.startRealTimeUnviewedCountFetch();
+      siren.startRealTimeFetch({eventType: EventType.UNVIEWED_COUNT});
       if (unViewed?.data) seUnviewedCount(unViewed.data?.unviewedCount || 0);
       if (unViewed?.error) onError(unViewed?.error);
     }

src/components/sirenInboxIcon.tsx

@@ -7,7 +7,7 @@ import type {
   NotificationDataType,
   NotificationsApiResponse,
   SirenErrorType,
-  UnviewedCountApiResponse,
+  UnviewedCountApiResponse
 } from '@sirenapp/js-sdk/dist/esm/types';
 
 import type { SirenProviderConfigProps } from '../types';
@@ -17,7 +17,8 @@ import {
   eventTypes,
   IN_APP_RECIPIENT_UNAUTHENTICATED,
   MAXIMUM_RETRY_COUNT,
-  VerificationStatus
+  VerificationStatus,
+  EventType
 } from '../utils/constants';
 import { useSiren } from '../utils';
 
@@ -74,10 +75,11 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
   let retryCount = 0;
 
   const { markAllAsViewed } = useSiren();
-  
+
   const [siren, setSiren] = useState<Siren | null>(null);
-  const [verificationStatus, setVerificationStatus] = useState<VerificationStatus>(VerificationStatus.PENDING);
-  
+  const [verificationStatus, setVerificationStatus] = useState<VerificationStatus>(
+    VerificationStatus.PENDING
+  );
 
   useEffect(() => {
     if (config?.recipientId && config?.userToken) {
@@ -90,8 +92,8 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
   }, [config]);
 
   const stopRealTimeFetch = (): void => {
-    siren?.stopRealTimeNotificationFetch();
-    siren?.stopRealTimeUnviewedCountFetch();
+    siren?.stopRealTimeFetch(EventType.NOTIFICATION);
+    siren?.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
   };
 
   const sendResetDataEvents = () => {
@@ -106,9 +108,17 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
     PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(updateNotificationPayload));
   };
 
-  const onUnViewedCountReceived = (response: UnviewedCountApiResponse): void => {
-    const totalUnviewed = response?.data?.totalUnviewed;
+  const onNewNotificationEvent = (responseData: NotificationDataType[]) => {
+    logger.info(`new notifications : ${JSON.stringify(responseData)}`);
+
+    markAllAsViewed(responseData[0].createdAt);
+    const payload = { newNotifications: responseData, action: eventTypes.NEW_NOTIFICATIONS };
+
+    PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+  };
 
+  const onTotalUnviewedCountEvent = (response: UnviewedCountApiResponse) => {
+    const totalUnviewed = response.data?.totalUnviewed;
     const payload = {
       unviewedCount: totalUnviewed,
       action: eventTypes.UPDATE_NOTIFICATIONS_COUNT
@@ -117,25 +127,38 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
     PubSub.publish(events.NOTIFICATION_COUNT_EVENT, JSON.stringify(payload));
   };
 
-  const onNotificationReceived = (response: NotificationsApiResponse): void => {
-    const responseData: NotificationDataType[] = response?.data || [];
+  const handleNotificationEvent = (response: NotificationsApiResponse) => {
+    const responseData = response?.data;
 
-    if (isNonEmptyArray(responseData)) {
-      logger.info(`new notifications : ${JSON.stringify(responseData)}`);
-      
-      markAllAsViewed(responseData[0].createdAt);
-      const payload = { newNotifications: response?.data, action: eventTypes.NEW_NOTIFICATIONS };    
+    if (Array.isArray(responseData) && isNonEmptyArray(responseData))
+      onNewNotificationEvent(responseData);
 
-      PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
-    }
   };
+  const handleUnviewedCountEvent = (response: UnviewedCountApiResponse) => {
+    const responseData = response?.data;
 
+    if (responseData && 'totalUnviewed' in responseData)
+      onTotalUnviewedCountEvent(response);
+    
+  };
+  const onEventReceive = (
+    response: NotificationsApiResponse | UnviewedCountApiResponse = {},
+    eventType: EventType
+  ) => {
+    switch (eventType) {
+      case EventType.NOTIFICATION:
+        handleNotificationEvent(response as NotificationsApiResponse);
+        break;
+      case EventType.UNVIEWED_COUNT:
+        handleUnviewedCountEvent(response as UnviewedCountApiResponse);
+        break;
+    }
+  };
   const onStatusChange = (status: VerificationStatus) => {
     setVerificationStatus(status);
   };
 
-
-  const actionCallbacks = { onUnViewedCountReceived, onNotificationReceived, onStatusChange };
+  const actionCallbacks = { onEventReceive, onStatusChange };
 
   const getDataParams = () => {
     return {

src/components/sirenProvider.tsx

@@ -18,7 +18,7 @@ export const COLORS = {
     neutralColor: '#232326',
     borderColor: '#344054',
     dateColor: '#98A2B3',
-    deleteIcon: '#98A2B3',
+    deleteIcon: '#D0D5DD',
     timerIcon: '#98A2B3',
     clearAllIcon: '#D0D5DD',
     infiniteLoader: '#F56630'
@@ -58,6 +58,11 @@ export const levelLogFns = {
   [LogLevel.ERROR]: console.error
 };
 
+export enum EventType {
+    NOTIFICATION = "NOTIFICATIONS",
+    UNVIEWED_COUNT = "UNVIEWED_COUNT"
+}
+
 export enum eventTypes {
   MARK_ITEM_AS_VIEWED = 'MARK_ITEM_AS_VIEWED',
   MARK_ITEM_AS_READ = 'MARK_ITEM_AS_READ',

src/utils/constants.ts

@@ -9,7 +9,7 @@ const useSiren = () => {
   const markAsReadById = async (id: string) => {
     if (siren)
       if (id?.length > 0) {
-        const response = await siren?.markNotificationAsReadById(id);
+        const response = await siren?.markAsReadById(id);
 
         if (response?.data) {
           const payload = { id, action: eventTypes.MARK_ITEM_AS_READ };
@@ -27,7 +27,7 @@ const useSiren = () => {
 
   const markAsReadByDate = async (untilDate: string) => {
     if (siren && untilDate) {
-      const response = await siren?.markNotificationsAsReadByDate(untilDate);
+      const response = await siren?.markAsReadByDate(untilDate);
 
       if (response?.data) {
         const payload = { action: eventTypes.MARK_ALL_AS_READ };
@@ -44,7 +44,7 @@ const useSiren = () => {
   const deleteById = async (id: string, shouldUpdateList: boolean = true) => {
     if (siren)
       if (id?.length > 0) {
-        const response = await siren?.deleteNotificationById(id);
+        const response = await siren?.deleteById(id);
 
         if (response?.data && shouldUpdateList) {
           const payload = { id, action: eventTypes.DELETE_ITEM };
@@ -62,7 +62,7 @@ const useSiren = () => {
 
   const deleteByDate = async (untilDate: string) => {
     if (siren && untilDate) {
-      const response = await siren.deleteNotificationsByDate(untilDate);
+      const response = await siren.deleteByDate(untilDate);
 
       if (response?.data) {
         const payload = { action: eventTypes.DELETE_ALL_ITEM };
@@ -78,7 +78,7 @@ const useSiren = () => {
 
   const markAllAsViewed = async (untilDate: string) => {
     if (siren && untilDate) {
-      const response = await siren?.markNotificationsAsViewed(untilDate);
+      const response = await siren?.markAllAsViewed(untilDate);
 
       if (response?.data) {
         const payload = { unviewedCount: 0, action: eventTypes.UPDATE_NOTIFICATIONS_COUNT };

src/utils/sirenHook.ts

@@ -34,18 +34,16 @@ describe('SirenInboxIcon', () => {
 
   const notificationIcon = <Image source={require('../../src/assets/bellLight.png')} />;
   const mockSiren:Pick<Siren, keyof Siren> = {
-    markNotificationAsReadById: jest.fn(),
-    markNotificationsAsReadByDate: jest.fn(),
-    deleteNotificationById: jest.fn(),
-    deleteNotificationsByDate: jest.fn(),
-    markNotificationsAsViewed: jest.fn(),
+    markAsReadById: jest.fn(),
+    markAsReadByDate: jest.fn(),
+    deleteById: jest.fn(),
+    deleteByDate: jest.fn(),
+    markAllAsViewed: jest.fn(),
     verifyToken: jest.fn(),
     fetchUnviewedNotificationsCount: jest.fn(async () => UnviewedCountReturnResponse),
     fetchAllNotifications: jest.fn(),
-    startRealTimeNotificationFetch: jest.fn(),
-    stopRealTimeNotificationFetch: jest.fn(),
-    startRealTimeUnviewedCountFetch: jest.fn(),
-    stopRealTimeUnviewedCountFetch: jest.fn(),
+    startRealTimeFetch: jest.fn(),
+    stopRealTimeFetch: jest.fn(),
   };
 
   jest.spyOn(sirenProvider, 'useSirenContext').mockReturnValue({

tests/components/sirenNotificationIcon.test.tsx

@@ -24,16 +24,14 @@ describe('SirenProvider', () => {
       </SirenProvider>
     );
     const mocErrorFn = jest.fn();
-    const mockNotificationHandler = jest.fn();
-    const mockCountHandler = jest.fn();
+    const mockEventHandler = jest.fn();
 
     const sirenObject = new Siren({
       token: 'user-token',
       recipientId: 'recipient-id',
       onError: mocErrorFn,
       actionCallbacks: {
-        onNotificationReceived: mockNotificationHandler,
-        onUnViewedCountReceived: mockCountHandler
+        onEventReceive: mockEventHandler,
       }
     });