fix: Add unique identifier for PubSub events in SirenProvider (#59)

* fix: Add unique identifier for PubSub events in SirenProvider

Author: abhay-keyvalue

src/components/card.tsx

@@ -4,6 +4,7 @@ import { Animated, Image, StyleSheet, Text, TouchableOpacity, View } from 'react
 import type { NotificationCardProps } from '../types';
 import { CommonUtils, useSiren } from '../utils';
 import { eventTypes, events } from '../utils/constants';
+import { useSirenContext } from './sirenProvider';
 import CloseIcon from './closeIcon';
 import TimerIcon from './timerIcon';
 
@@ -52,6 +53,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
     onMediaThumbnailClick
   } = cardProps;
   const { markAsReadById } = useSiren();
+  const { id: providerId } = useSirenContext();
 
   const opacity = useRef(new Animated.Value(1)).current;
 
@@ -145,7 +147,7 @@ const Card = (props: NotificationCardProps): ReactElement => {
       }).start(() => {
         const payload = { id: notification.id, action: eventTypes.DELETE_ITEM };
 
-        PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+        PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerId}`, JSON.stringify(payload));
       });
   };
 

src/components/sirenInbox.tsx

@@ -105,7 +105,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
     itemsPerFetch > MAXIMUM_ITEMS_PER_FETCH ? MAXIMUM_ITEMS_PER_FETCH : itemsPerFetch
   );
 
-  const { siren, verificationStatus } = useSirenContext();
+  const { siren, verificationStatus, id } = useSirenContext();
 
   const { deleteById, deleteByDate, markAllAsViewed } = useSiren();
 
@@ -123,7 +123,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
   const disableCardDelete = useRef(false);
 
   useEffect(() => {
-    PubSub.subscribe(events.NOTIFICATION_LIST_EVENT, notificationSubscriber);
+    PubSub.subscribe(`${events.NOTIFICATION_LIST_EVENT}${id}`, notificationSubscriber);
 
     return cleanUp();
   }, []);
@@ -173,7 +173,7 @@ const SirenInbox = (props: SirenInboxProps): ReactElement => {
   const cleanUp = () => () => {
     siren?.stopRealTimeFetch(EventType.NOTIFICATION);
     setNotifications([]);
-    PubSub.unsubscribe(events.NOTIFICATION_LIST_EVENT);
+    PubSub.unsubscribe(`${events.NOTIFICATION_LIST_EVENT}${id}`);
     handleMarkAllAsViewed();
   };
 

src/components/sirenInboxIcon.tsx

@@ -51,7 +51,7 @@ const SirenInboxIcon = (props: SirenInboxIconProps) => {
     onError = () => null
   } = props;
 
-  const { siren, verificationStatus } = useSirenContext();
+  const { siren, verificationStatus, id } = useSirenContext();
 
   const [unviewedCount, seUnviewedCount] = useState<number>(0);
 
@@ -69,7 +69,7 @@ const SirenInboxIcon = (props: SirenInboxIconProps) => {
   // Clean up - stop polling when component unmounts
   const cleanUp = () => () => {
     siren?.stopRealTimeFetch(EventType.UNVIEWED_COUNT);
-    PubSub.unsubscribe(events.NOTIFICATION_COUNT_EVENT);
+    PubSub.unsubscribe(`${events.NOTIFICATION_COUNT_EVENT}${id}`);
     seUnviewedCount(0);
   };
 
@@ -82,7 +82,7 @@ const SirenInboxIcon = (props: SirenInboxIconProps) => {
   };
 
   useEffect(() => {
-    PubSub.subscribe(events.NOTIFICATION_COUNT_EVENT, notificationSubscriber);
+    PubSub.subscribe(`${events.NOTIFICATION_COUNT_EVENT}${id}`, notificationSubscriber);
 
     return cleanUp();
   }, []);

src/components/sirenProvider.tsx

@@ -25,6 +25,7 @@ import { useSiren } from '../utils';
 type SirenContextProp = {
   siren: Siren | null;
   verificationStatus: VerificationStatus;
+  id: string;
 };
 
 interface SirenProvider {
@@ -34,7 +35,8 @@ interface SirenProvider {
 
 export const SirenContext = createContext<SirenContextProp>({
   siren: null,
-  verificationStatus: VerificationStatus.PENDING
+  verificationStatus: VerificationStatus.PENDING,
+  id: ''
 });
 
 /**
@@ -74,8 +76,13 @@ export const useSirenContext = (): SirenContextProp => useContext(SirenContext);
 const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
   let retryCount = 0;
 
+  const generateUniqueId = (): string => {
+    return Math.random().toString(36).substring(2, 15);
+  };
+
   const { markAllAsViewed } = useSiren();
 
+  const [id] = useState(generateUniqueId());
   const [siren, setSiren] = useState<Siren | null>(null);
   const [verificationStatus, setVerificationStatus] = useState<VerificationStatus>(
     VerificationStatus.PENDING
@@ -104,8 +111,8 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
       action: eventTypes.RESET_NOTIFICATIONS
     };
 
-    PubSub.publish(events.NOTIFICATION_COUNT_EVENT, JSON.stringify(updateCountPayload));
-    PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(updateNotificationPayload));
+    PubSub.publish(`${events.NOTIFICATION_COUNT_EVENT}${id}`, JSON.stringify(updateCountPayload));
+    PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${id}`, JSON.stringify(updateNotificationPayload));
   };
 
   const onNewNotificationEvent = (responseData: NotificationDataType[]) => {
@@ -114,7 +121,7 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
     markAllAsViewed(responseData[0].createdAt);
     const payload = { newNotifications: responseData, action: eventTypes.NEW_NOTIFICATIONS };
 
-    PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+    PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${id}`, JSON.stringify(payload));
   };
 
   const onTotalUnviewedCountEvent = (response: UnviewedCountApiResponse) => {
@@ -124,7 +131,7 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
       action: eventTypes.UPDATE_NOTIFICATIONS_COUNT
     };
 
-    PubSub.publish(events.NOTIFICATION_COUNT_EVENT, JSON.stringify(payload));
+    PubSub.publish(`${events.NOTIFICATION_COUNT_EVENT}${id}`, JSON.stringify(payload));
   };
 
   const handleNotificationEvent = (response: NotificationsApiResponse) => {
@@ -195,6 +202,7 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
   return (
     <SirenContext.Provider
       value={{
+        id,
         siren,
         verificationStatus
       }}

src/utils/sirenHook.ts

@@ -4,7 +4,7 @@ import { errorMap, events, eventTypes } from './constants';
 import { useSirenContext } from '../components/sirenProvider';
 
 const useSiren = () => {
-  const { siren } = useSirenContext();
+  const { siren, id: providerId } = useSirenContext();
 
   const markAsReadById = async (id: string) => {
     if (siren)
@@ -14,7 +14,7 @@ const useSiren = () => {
         if (response?.data) {
           const payload = { id, action: eventTypes.MARK_ITEM_AS_READ };
 
-          PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+          PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerId}`, JSON.stringify(payload));
         }
 
         return response;
@@ -32,7 +32,7 @@ const useSiren = () => {
       if (response?.data) {
         const payload = { action: eventTypes.MARK_ALL_AS_READ };
 
-        PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+        PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerId}`, JSON.stringify(payload));
       }
 
       return response;
@@ -49,7 +49,7 @@ const useSiren = () => {
         if (response?.data && shouldUpdateList) {
           const payload = { id, action: eventTypes.DELETE_ITEM };
 
-          PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+          PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerId}`, JSON.stringify(payload));
         }
 
         return response;
@@ -67,7 +67,7 @@ const useSiren = () => {
       if (response?.data) {
         const payload = { action: eventTypes.DELETE_ALL_ITEM };
 
-        PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
+        PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerId}`, JSON.stringify(payload));
       }
 
       return response;
@@ -83,7 +83,7 @@ const useSiren = () => {
       if (response?.data) {
         const payload = { unviewedCount: 0, action: eventTypes.UPDATE_NOTIFICATIONS_COUNT };
 
-        PubSub.publish(events.NOTIFICATION_COUNT_EVENT, JSON.stringify(payload));
+        PubSub.publish(`${events.NOTIFICATION_COUNT_EVENT}${providerId}`, JSON.stringify(payload));
       }
 
       return response;