From 736ca9bc07eca00af6dedefea50a3dffe76c6601 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Thu, 30 Jan 2025 08:53:41 +0100
Subject: [PATCH] fix(frontend): add useSubscribeBroadcastChannel

---
 frontend/src/contexts/auth.context.tsx        | 12 ++++------
 .../contexts/broadcast-channel.context.tsx    |  4 ++--
 .../src/hooks/useSubscribeBroadcastChannel.ts | 23 +++++++++++++++++++
 3 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/hooks/useSubscribeBroadcastChannel.ts

diff --git a/frontend/src/contexts/auth.context.tsx b/frontend/src/contexts/auth.context.tsx
index 030c4269..2d238f62 100644
--- a/frontend/src/contexts/auth.context.tsx
+++ b/frontend/src/contexts/auth.context.tsx
@@ -21,13 +21,12 @@ import { Progress } from "@/app-components/displays/Progress";
 import { useLogout } from "@/hooks/entities/auth-hooks";
 import { useApiClient } from "@/hooks/useApiClient";
 import { CURRENT_USER_KEY, PUBLIC_PATHS } from "@/hooks/useAuth";
+import { useSubscribeBroadcastChannel } from "@/hooks/useSubscribeBroadcastChannel";
 import { useTranslate } from "@/hooks/useTranslate";
 import { RouterType } from "@/services/types";
 import { IUser } from "@/types/user.types";
 import { getFromQuery } from "@/utils/URL";
 
-import { useBroadcastChannel } from "./broadcast-channel.context";
-
 export interface AuthContextValue {
   user: IUser | undefined;
   isAuthenticated: boolean;
@@ -101,17 +100,16 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
     setUser(user);
   };
   const isAuthenticated = !!user;
-  const { subscribe } = useBroadcastChannel();
+
+  useSubscribeBroadcastChannel("logout", () => {
+    router.reload();
+  });
 
   useEffect(() => {
     const search = location.search;
 
     setSearch(search);
     setIsReady(true);
-
-    subscribe("logout", () => {
-      router.reload();
-    });
   }, []);
 
   if (!isReady || isLoading) return <Progress />;
diff --git a/frontend/src/contexts/broadcast-channel.context.tsx b/frontend/src/contexts/broadcast-channel.context.tsx
index 5363ab18..97823e6b 100644
--- a/frontend/src/contexts/broadcast-channel.context.tsx
+++ b/frontend/src/contexts/broadcast-channel.context.tsx
@@ -49,11 +49,11 @@ const getOrCreateTabId = () => {
   return storedTabId;
 };
 
-interface IBroadcastChannelContext {
+export interface IBroadcastChannelContext {
   subscribe: (
     event: `${EBCEvent}`,
     callback: (message: BroadcastChannelData) => void,
-  ) => () => void;
+  ) => void;
   postMessage: (payload: BroadcastChannelPayload) => void;
 }
 
diff --git a/frontend/src/hooks/useSubscribeBroadcastChannel.ts b/frontend/src/hooks/useSubscribeBroadcastChannel.ts
new file mode 100644
index 00000000..d8c4eaa9
--- /dev/null
+++ b/frontend/src/hooks/useSubscribeBroadcastChannel.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { useEffect } from "react";
+
+import {
+  IBroadcastChannelContext,
+  useBroadcastChannel,
+} from "@/contexts/broadcast-channel.context";
+
+export const useSubscribeBroadcastChannel: IBroadcastChannelContext["subscribe"] =
+  (...props) => {
+    const { subscribe } = useBroadcastChannel();
+
+    useEffect(() => {
+      subscribe(...props);
+    }, [subscribe, ...props]);
+  };