From b852fa76a1c7424867ac73c8ac15e82a98a769d7 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 30 Jan 2025 15:01:59 +0100 Subject: [PATCH 1/3] fix: resolve broadcastChannel duplication tab bug --- .../contexts/broadcast-channel.context.tsx | 24 +------------------ .../providers/BroadcastChannelProvider.tsx | 24 +------------------ widget/src/utils/generateId.ts | 21 ---------------- widget/src/utils/safeRandom.ts | 16 ------------- 4 files changed, 2 insertions(+), 83 deletions(-) delete mode 100644 widget/src/utils/generateId.ts delete mode 100644 widget/src/utils/safeRandom.ts diff --git a/frontend/src/contexts/broadcast-channel.context.tsx b/frontend/src/contexts/broadcast-channel.context.tsx index a0046bf8..f58fba3b 100644 --- a/frontend/src/contexts/broadcast-channel.context.tsx +++ b/frontend/src/contexts/broadcast-channel.context.tsx @@ -15,8 +15,6 @@ import { useRef, } from "react"; -import { generateId } from "@/utils/generateId"; - export enum EBCEvent { LOGIN = "login", LOGOUT = "logout", @@ -28,7 +26,6 @@ type BroadcastChannelPayload = { }; type BroadcastChannelData = { - tabId: string; payload: BroadcastChannelPayload; }; @@ -45,19 +42,6 @@ interface IBroadcastChannelContext { postMessage: (payload: BroadcastChannelPayload) => void; } -const getOrCreateTabId = () => { - let storedTabId = sessionStorage.getItem("tab_uuid"); - - if (storedTabId) { - return storedTabId; - } - - storedTabId = generateId(); - sessionStorage.setItem("tab_uuid", storedTabId); - - return storedTabId; -}; - export const BroadcastChannelContext = createContext< IBroadcastChannelContext | undefined >(undefined); @@ -75,15 +59,10 @@ export const BroadcastChannelProvider: FC = ({ Array["1"]> > >({}); - const tabUuid = getOrCreateTabId(); useEffect(() => { const handleMessage = ({ data }: MessageEvent) => { - const { tabId, payload } = data; - - if (tabId === tabUuid) { - return; - } + const { payload } = data; subscribersRef.current[payload.event].forEach((callback) => callback(data), @@ -115,7 +94,6 @@ export const BroadcastChannelProvider: FC = ({ }; const postMessage: IBroadcastChannelContext["postMessage"] = (payload) => { channelRef.current.postMessage({ - tabId: tabUuid, payload, }); }; diff --git a/widget/src/providers/BroadcastChannelProvider.tsx b/widget/src/providers/BroadcastChannelProvider.tsx index 73933e54..8e59b643 100644 --- a/widget/src/providers/BroadcastChannelProvider.tsx +++ b/widget/src/providers/BroadcastChannelProvider.tsx @@ -15,8 +15,6 @@ import { useRef, } from "react"; -import { generateId } from "../utils/generateId"; - export enum EBCEvent { LOGOUT = "logout", } @@ -27,7 +25,6 @@ type BroadcastChannelPayload = { }; type BroadcastChannelData = { - tabId: string; payload: BroadcastChannelPayload; }; @@ -44,19 +41,6 @@ interface IBroadcastChannelContext { postMessage: (payload: BroadcastChannelPayload) => void; } -const getOrCreateTabId = () => { - let storedTabId = sessionStorage.getItem("tab_uuid"); - - if (storedTabId) { - return storedTabId; - } - - storedTabId = generateId(); - sessionStorage.setItem("tab_uuid", storedTabId); - - return storedTabId; -}; - export const BroadcastChannelContext = createContext< IBroadcastChannelContext | undefined >(undefined); @@ -74,15 +58,10 @@ export const BroadcastChannelProvider: FC = ({ Array["1"]> > >({}); - const tabUuid = getOrCreateTabId(); useEffect(() => { const handleMessage = ({ data }: MessageEvent) => { - const { tabId, payload } = data; - - if (tabId === tabUuid) { - return; - } + const { payload } = data; subscribersRef.current[payload.event].forEach((callback) => callback(data), @@ -116,7 +95,6 @@ export const BroadcastChannelProvider: FC = ({ }; const postMessage: IBroadcastChannelContext["postMessage"] = (payload) => { channelRef.current.postMessage({ - tabId: tabUuid, payload, }); }; diff --git a/widget/src/utils/generateId.ts b/widget/src/utils/generateId.ts deleted file mode 100644 index 44078912..00000000 --- a/widget/src/utils/generateId.ts +++ /dev/null @@ -1,21 +0,0 @@ -/* - * Copyright © 2025 Hexastack. All rights reserved. - * - * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: - * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. - * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). - */ - - -import { getRandom } from "./safeRandom"; - -export const generateId = () => { - const d = - typeof performance === "undefined" ? Date.now() : performance.now() * 1000; - - return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => { - const r = (getRandom() * 16 + d) % 16 | 0; - - return (c == "x" ? r : (r & 0x3) | 0x8).toString(16); - }); -}; diff --git a/widget/src/utils/safeRandom.ts b/widget/src/utils/safeRandom.ts deleted file mode 100644 index a344522b..00000000 --- a/widget/src/utils/safeRandom.ts +++ /dev/null @@ -1,16 +0,0 @@ -/* - * Copyright © 2025 Hexastack. All rights reserved. - * - * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: - * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. - * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). - */ - - -/** - * Return a cryptographically secure random value between 0 and 1 - * - * @returns A cryptographically secure random value between 0 and 1 - */ -export const getRandom = (): number => - window.crypto.getRandomValues(new Uint32Array(1))[0] * Math.pow(2, -32); From b72a9a736c0a4aacddb3afa9eec045987a94b28a Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Thu, 30 Jan 2025 15:09:54 +0100 Subject: [PATCH 2/3] fix(widget): resolve lint react-hooks/exhaustive-deps --- widget/src/providers/BroadcastChannelProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/widget/src/providers/BroadcastChannelProvider.tsx b/widget/src/providers/BroadcastChannelProvider.tsx index 8e59b643..725a4d3e 100644 --- a/widget/src/providers/BroadcastChannelProvider.tsx +++ b/widget/src/providers/BroadcastChannelProvider.tsx @@ -75,7 +75,6 @@ export const BroadcastChannelProvider: FC = ({ // eslint-disable-next-line react-hooks/exhaustive-deps channelRef.current.close(); }; - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const subscribe: IBroadcastChannelContext["subscribe"] = ( From 24e09be6edcdc886f4659f06cab2c4b97399f8c8 Mon Sep 17 00:00:00 2001 From: yassinedorbozgithub Date: Fri, 31 Jan 2025 08:19:19 +0100 Subject: [PATCH 3/3] fix: refactor broadcastChannel payload types --- .../contexts/broadcast-channel.context.tsx | 24 ++++++------------- .../providers/BroadcastChannelProvider.tsx | 24 ++++++------------- 2 files changed, 14 insertions(+), 34 deletions(-) diff --git a/frontend/src/contexts/broadcast-channel.context.tsx b/frontend/src/contexts/broadcast-channel.context.tsx index f58fba3b..4b09c054 100644 --- a/frontend/src/contexts/broadcast-channel.context.tsx +++ b/frontend/src/contexts/broadcast-channel.context.tsx @@ -20,15 +20,11 @@ export enum EBCEvent { LOGOUT = "logout", } -type BroadcastChannelPayload = { +type BroadcastChannelMessage = { event: `${EBCEvent}`; data?: string | number | boolean | Record | undefined | null; }; -type BroadcastChannelData = { - payload: BroadcastChannelPayload; -}; - interface IBroadcastChannelProps { channelName: string; children: ReactNode; @@ -37,9 +33,9 @@ interface IBroadcastChannelProps { interface IBroadcastChannelContext { subscribe: ( event: `${EBCEvent}`, - callback: (message: BroadcastChannelData) => void, + callback: (message: BroadcastChannelMessage) => void, ) => void; - postMessage: (payload: BroadcastChannelPayload) => void; + postMessage: (message: BroadcastChannelMessage) => void; } export const BroadcastChannelContext = createContext< @@ -61,12 +57,8 @@ export const BroadcastChannelProvider: FC = ({ >({}); useEffect(() => { - const handleMessage = ({ data }: MessageEvent) => { - const { payload } = data; - - subscribersRef.current[payload.event].forEach((callback) => - callback(data), - ); + const handleMessage = ({ data }: MessageEvent) => { + subscribersRef.current[data.event].forEach((callback) => callback(data)); }; channelRef.current.addEventListener("message", handleMessage); @@ -92,10 +84,8 @@ export const BroadcastChannelProvider: FC = ({ } }; }; - const postMessage: IBroadcastChannelContext["postMessage"] = (payload) => { - channelRef.current.postMessage({ - payload, - }); + const postMessage: IBroadcastChannelContext["postMessage"] = (message) => { + channelRef.current.postMessage(message); }; return ( diff --git a/widget/src/providers/BroadcastChannelProvider.tsx b/widget/src/providers/BroadcastChannelProvider.tsx index 725a4d3e..d5a53be5 100644 --- a/widget/src/providers/BroadcastChannelProvider.tsx +++ b/widget/src/providers/BroadcastChannelProvider.tsx @@ -19,15 +19,11 @@ export enum EBCEvent { LOGOUT = "logout", } -type BroadcastChannelPayload = { +type BroadcastChannelMessage = { event: `${EBCEvent}`; data?: string | number | boolean | Record | undefined | null; }; -type BroadcastChannelData = { - payload: BroadcastChannelPayload; -}; - interface IBroadcastChannelProps { channelName: string; children: ReactNode; @@ -36,9 +32,9 @@ interface IBroadcastChannelProps { interface IBroadcastChannelContext { subscribe: ( event: `${EBCEvent}`, - callback: (message: BroadcastChannelData) => void, + callback: (message: BroadcastChannelMessage) => void, ) => void; - postMessage: (payload: BroadcastChannelPayload) => void; + postMessage: (message: BroadcastChannelMessage) => void; } export const BroadcastChannelContext = createContext< @@ -60,12 +56,8 @@ export const BroadcastChannelProvider: FC = ({ >({}); useEffect(() => { - const handleMessage = ({ data }: MessageEvent) => { - const { payload } = data; - - subscribersRef.current[payload.event].forEach((callback) => - callback(data), - ); + const handleMessage = ({ data }: MessageEvent) => { + subscribersRef.current[data.event].forEach((callback) => callback(data)); }; channelRef.current.addEventListener("message", handleMessage); @@ -92,10 +84,8 @@ export const BroadcastChannelProvider: FC = ({ } }; }; - const postMessage: IBroadcastChannelContext["postMessage"] = (payload) => { - channelRef.current.postMessage({ - payload, - }); + const postMessage: IBroadcastChannelContext["postMessage"] = (message) => { + channelRef.current.postMessage(message); }; return (