Skip to content

Commit eba465f

Browse files
reshmarevi17reshmarevi17
authored
fix: Add unique identifier for PubSub events in SirenProvider
1 parent edb2340 commit eba465f

File tree

9 files changed

+146
-55
lines changed

9 files changed

+146
-55
lines changed

‎src/components/Card.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type { CSSProperties } from "react";
22
import React, { type FC, useState } from "react";
33

44
import CloseIcon from "./CloseIcon";
5+
import { useSirenContext } from "./SirenProvider";
56
import TimerIcon from "./TimerIcon";
67
import defaultAvatarDark from "../assets/dark/defaultAvatarDark.png";
78
import failedImageDark from "../assets/dark/failedImageDark.svg";
@@ -59,6 +60,7 @@ const Card: FC<NotificationCardProps> = ({
5960
const {
6061
markAsReadById
6162
} = useSiren();
63+
const { id } = useSirenContext();
6264

6365
const [deleteAnimationStyle, setDeleteAnimationStyle] = useState('');
6466

@@ -79,7 +81,7 @@ const Card: FC<NotificationCardProps> = ({
7981
const payload = { id: notification.id, action: eventTypes.DELETE_ITEM };
8082

8183
setTimeout(() => {
82-
PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
84+
PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${id}`, JSON.stringify(payload));
8385
}, 200)
8486

8587
}
@@ -164,7 +166,7 @@ const Card: FC<NotificationCardProps> = ({
164166
{!hideMediaThumbnail && thumbnailUrl &&(
165167
<div
166168
className="siren-sdk-card-thumbnail-container"
167-
style={{...(onAvatarClick && { cursor: "pointer" }),
169+
style={{...(onMediaThumbnailClick && { cursor: "pointer" }),
168170
backgroundColor: darkMode ? '#4C4C4C' : '#F0F2F5'}}
169171
onClick={handleMediaClick}>
170172
<img

‎src/components/SirenNotificationIcon.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
2929
hideBadge,
3030
isModalOpen,
3131
}) => {
32-
const { siren } = useSirenContext();
32+
const { siren, id } = useSirenContext();
3333

3434
const [unviewedCount, seUnviewedCount] = useState<number>(0);
3535
const badgeType:BadgeType = isModalOpen ? BadgeType.NONE : BadgeType.DEFAULT;
36-
36+
3737
const notificationCountSubscriber = async (
3838
type: string,
3939
dataString: string
@@ -47,7 +47,7 @@ const SirenNotificationIcon: FC<SirenNotificationButtonProps> = ({
4747
useEffect(() => {
4848
if(!hideBadge) {
4949
PubSub.subscribe(
50-
events.NOTIFICATION_COUNT_EVENT,
50+
`${events.NOTIFICATION_COUNT_EVENT}${id}`,
5151
notificationCountSubscriber
5252
);
5353

‎src/components/SirenPanel.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
9494
deleteByDate,
9595
deleteById,
9696
} = useSiren();
97-
const { siren, verificationStatus } = useSirenContext();
97+
const { siren, verificationStatus, id } = useSirenContext();
9898
const {hideHeader = false, hideClearAll = false, customHeader, title = DEFAULT_WINDOW_TITLE} = headerProps ?? {};
9999
const [notifications, setNotifications] = useState<NotificationDataType[]>(
100100
[]
@@ -110,17 +110,17 @@ const SirenPanel: FC<SirenPanelProps> = ({
110110
const data = await JSON.parse(dataString);
111111

112112
setEventListenerData(data);
113-
};
113+
};
114114

115115
useEffect(() => {
116-
PubSub.subscribe(events.NOTIFICATION_LIST_EVENT, notificationSubscriber);
116+
PubSub.subscribe(`${events.NOTIFICATION_LIST_EVENT}${id}`, notificationSubscriber);
117117

118118
return () => {
119119
cleanUp();
120120
setNotifications([]);
121121
handleMarkNotificationsAsViewed(new Date().toISOString());
122122
};
123-
}, [hideBadge, siren]);
123+
}, [siren]);
124124

125125
useEffect(() => {
126126
return(() => {
@@ -132,7 +132,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
132132
if (eventListenerData) {
133133
const updatedNotifications: NotificationDataType[] = updateNotifications(
134134
eventListenerData,
135-
notifications
135+
notifications,
136136
);
137137

138138
if(!isEmptyArray(eventListenerData?.newNotifications)) handleMarkNotificationsAsViewed(updatedNotifications[0]?.createdAt);
@@ -308,7 +308,7 @@ const SirenPanel: FC<SirenPanelProps> = ({
308308
action: eventTypes.UPDATE_NOTIFICATIONS_COUNT,
309309
};
310310

311-
PubSub.publish(events.NOTIFICATION_COUNT_EVENT, JSON.stringify(payload));
311+
PubSub.publish(`${events.NOTIFICATION_COUNT_EVENT}${id}`, JSON.stringify(payload));
312312
if (createdAt) {
313313
const response = await markAllAsViewed(createdAt);
314314

‎src/components/SirenProvider.tsx‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type {
1010
import PubSub from "pubsub-js";
1111

1212
import type { SirenProviderConfigProps } from "../types";
13-
import { logger } from "../utils/commonUtils";
13+
import { generateUniqueId, logger } from "../utils/commonUtils";
1414
import {
1515
AUTHENTICATION_FAILED,
1616
events,
@@ -24,6 +24,7 @@ import {
2424
type SirenContextProp = {
2525
siren: Siren | null;
2626
verificationStatus: VerificationStatus;
27+
id: string;
2728
};
2829

2930
interface SirenProvider {
@@ -34,6 +35,7 @@ interface SirenProvider {
3435
export const SirenContext = createContext<SirenContextProp>({
3536
siren: null,
3637
verificationStatus: VerificationStatus.PENDING,
38+
id: ''
3739
});
3840

3941
/**
@@ -42,7 +44,8 @@ export const SirenContext = createContext<SirenContextProp>({
4244
* @example
4345
* const {
4446
* siren,
45-
* verificationStatus
47+
* verificationStatus,
48+
* id
4649
* } = useSirenContext();
4750
*
4851
* @returns {SirenContextProp} The Siren notifications context.
@@ -75,6 +78,9 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
7578
const [verificationStatus, setVerificationStatus] =
7679
useState<VerificationStatus>(VerificationStatus.PENDING);
7780
let retryCount = 0;
81+
82+
83+
const [id] = useState(generateUniqueId());
7884

7985
useEffect(() => {
8086
if (config?.recipientId && config?.userToken) {
@@ -101,14 +107,8 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
101107
action: eventTypes.RESET_NOTIFICATIONS,
102108
};
103109

104-
PubSub.publish(
105-
events.NOTIFICATION_COUNT_EVENT,
106-
JSON.stringify(updateCountPayload)
107-
);
108-
PubSub.publish(
109-
events.NOTIFICATION_LIST_EVENT,
110-
JSON.stringify(updateNotificationPayload)
111-
);
110+
PubSub.publish(`${events.NOTIFICATION_COUNT_EVENT}${id}`, JSON.stringify(updateCountPayload));
111+
PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${id}`, JSON.stringify(updateNotificationPayload));
112112
};
113113

114114
const onEventReceive = (
@@ -121,7 +121,7 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
121121

122122
logger.info(`new notifications : ${JSON.stringify(newNotifications)}`);
123123
PubSub.publish(
124-
events.NOTIFICATION_LIST_EVENT,
124+
`${events.NOTIFICATION_LIST_EVENT}${id}`,
125125
JSON.stringify({
126126
newNotifications,
127127
action: eventTypes.NEW_NOTIFICATIONS,
@@ -135,10 +135,10 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
135135

136136
logger.info(`unviewed notification count : ${totalUnviewed}`);
137137
PubSub.publish(
138-
events.NOTIFICATION_COUNT_EVENT,
138+
`${events.NOTIFICATION_COUNT_EVENT}${id}`,
139139
JSON.stringify({
140140
unviewedCount: totalUnviewed,
141-
action: eventTypes.UPDATE_NOTIFICATIONS_COUNT,
141+
action: eventTypes.UPDATE_NOTIFICATIONS_COUNT
142142
})
143143
);
144144
}
@@ -182,6 +182,7 @@ const SirenProvider: React.FC<SirenProvider> = ({ config, children }) => {
182182
return (
183183
<SirenContext.Provider
184184
value={{
185+
id,
185186
siren,
186187
verificationStatus,
187188
}}

‎src/utils/commonUtils.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -422,11 +422,6 @@ export const calculateModalWidth = (containerWidth: DimensionValue): number => {
422422
return modalWidth;
423423
};
424424

425-
export const hexToRgba = (hex: string, alpha: number) => {
426-
const [r, g, b] = hex.match(/\w\w/g)?.map((x) => parseInt(x, 16)) ?? [];
427-
428-
return `rgba(${r},${g},${b},${alpha})`;
429-
};
430425

431426
export const debounce = <F extends (...args: unknown[]) => void>(
432427
func: F,
@@ -450,4 +445,8 @@ export const getModalContentHeightInFullScreen = (headerHeight: DimensionValue |
450445
else if (typeof headerHeight === "number") updatedHeight = headerHeight;
451446

452447
return `calc(100% - ${updatedHeight}px)`
453-
}
448+
};
449+
450+
export const generateUniqueId = (): string => {
451+
return Math.random().toString(36).substring(2, 15);
452+
};

‎src/utils/sirenHook.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { errorMap, events, eventTypes } from "./constants";
44
import { useSirenContext } from "../components/SirenProvider";
55

66
const useSiren = () => {
7-
const { siren } = useSirenContext();
7+
const { siren, id: providerInstanceId } = useSirenContext();
88

99
const markAsReadById = async (id: string) => {
1010
if (siren)
@@ -15,7 +15,7 @@ const useSiren = () => {
1515
const payload = { id, action: eventTypes.MARK_ITEM_AS_READ };
1616

1717
PubSub.publish(
18-
events.NOTIFICATION_LIST_EVENT,
18+
`${events.NOTIFICATION_LIST_EVENT}${providerInstanceId}`,
1919
JSON.stringify(payload)
2020
);
2121
}
@@ -35,7 +35,7 @@ const useSiren = () => {
3535
if (response && response.data) {
3636
const payload = { action: eventTypes.MARK_ALL_AS_READ };
3737

38-
PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
38+
PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerInstanceId}`, JSON.stringify(payload));
3939
}
4040

4141
return response;
@@ -52,7 +52,7 @@ const useSiren = () => {
5252
const payload = { id, action: eventTypes.DELETE_ITEM };
5353

5454
PubSub.publish(
55-
events.NOTIFICATION_LIST_EVENT,
55+
`${events.NOTIFICATION_LIST_EVENT}${providerInstanceId}`,
5656
JSON.stringify(payload)
5757
);
5858
}
@@ -72,7 +72,7 @@ const useSiren = () => {
7272
if (response && response.data) {
7373
const payload = { action: eventTypes.DELETE_ALL_ITEM };
7474

75-
PubSub.publish(events.NOTIFICATION_LIST_EVENT, JSON.stringify(payload));
75+
PubSub.publish(`${events.NOTIFICATION_LIST_EVENT}${providerInstanceId}`, JSON.stringify(payload));
7676
}
7777

7878
return response;
@@ -92,7 +92,7 @@ const useSiren = () => {
9292
};
9393

9494
PubSub.publish(
95-
events.NOTIFICATION_COUNT_EVENT,
95+
`${events.NOTIFICATION_COUNT_EVENT}${providerInstanceId}`,
9696
JSON.stringify(payload)
9797
);
9898
}

‎tests/components/sirenNotificationIcon.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ jest.mock("../../src/styles/sirenNotificationIcon.css", () => ({}));
1414

1515
const mockSirenContextValue = {
1616
siren: null,
17-
verificationStatus: VerificationStatus.SUCCESS
17+
verificationStatus: VerificationStatus.SUCCESS,
18+
id: ''
1819
};
1920

2021
const style = applyTheme();

0 commit comments

Comments
 (0)