fix: add brodcastChannel HOC

frontend/src/hooks/entities/auth-hooks.ts

@@ -60,7 +60,8 @@ export const useLogout = (
   const { logoutRedirection } = useLogoutRedirection();
   const { toast } = useToast();
   const { t } = useTranslate();
-  const broadcastLogoutAcrossTabs = useBroadcastChannel("session");
+  const { useBroadcast } = useBroadcastChannel();
+  const broadcastLogoutAcrossTabs = useBroadcast("session");
   const tabUuidRef = useTabUuid();
   const tabUuid = tabUuidRef.current;
 

frontend/src/hooks/useBroadcastChannel.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2025 Hexastack. All rights reserved.
+ * Copyright © 2024 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.
@@ -7,27 +7,21 @@
  */
 
 import * as React from "react";
+import { useContext } from "react";
 
-export type BroadcastChannelData = {
-  uuid: string;
-  value: string | number | boolean | Record<string, unknown> | undefined | null;
-};
+import {
+  BroadcastChannelContext,
+  BroadcastChannelData,
+  IBroadcastChannelContext,
+} from "@/contexts/broadcast-channel";
 
-/**
- * React hook to create and manage a Broadcast Channel across multiple browser windows.
- *
- * @param channelName Static name of channel used across the browser windows.
- * @param handleMessage Callback to handle the event generated when `message` is received.
- * @param handleMessageError [optional] Callback to handle the event generated when `error` is received.
- * @returns A function to send/post message on the channel.
- */
-export function useBroadcastChannel<
+export const useBroadcast = <
   T extends BroadcastChannelData = BroadcastChannelData,
 >(
   channelName: string,
   handleMessage?: (event: MessageEvent<T>) => void,
   handleMessageError?: (event: MessageEvent<T>) => void,
-): (data: T) => void {
+): ((data: T) => void) => {
   const channelRef = React.useRef<BroadcastChannel | null>(
     typeof window !== "undefined" && "BroadcastChannel" in window
       ? new BroadcastChannel(channelName + "-channel")
@@ -42,26 +36,17 @@ export function useBroadcastChannel<
   );
 
   return (data: T) => channelRef.current?.postMessage(data);
-}
+};
 
-/**
- * React hook to manage state across browser windows. Has the similar signature as `React.useState`.
- *
- * @param channelName Static name of channel used across the browser windows.
- * @param initialState Initial state.
- * @returns Tuple of state and setter for the state.
- */
-export function useBroadcastState<
+export const useBroadcastState = <
   T extends BroadcastChannelData = BroadcastChannelData,
 >(
   channelName: string,
   initialState: T,
-): [T, React.Dispatch<React.SetStateAction<T>>, boolean] {
+): [T, React.Dispatch<React.SetStateAction<T>>, boolean] => {
   const [isPending, startTransition] = React.useTransition();
   const [state, setState] = React.useState<T>(initialState);
-  const broadcast = useBroadcastChannel<T>(channelName, (ev) =>
-    setState(ev.data),
-  );
+  const broadcast = useBroadcast<T>(channelName, (ev) => setState(ev.data));
   const updateState: React.Dispatch<React.SetStateAction<T>> =
     React.useCallback(
       (input) => {
@@ -77,16 +62,13 @@ export function useBroadcastState<
     );
 
   return [state, updateState, isPending];
-}
+};
 
-// Helpers
-
-/** Hook to subscribe/unsubscribe from channel events. */
-function useChannelEventListener<K extends keyof BroadcastChannelEventMap>(
+const useChannelEventListener = <K extends keyof BroadcastChannelEventMap>(
   channel: BroadcastChannel | null,
   event: K,
   handler?: (e: BroadcastChannelEventMap[K]) => void,
-) {
+) => {
   const callbackRef = React.useRef(handler);
 
   if (callbackRef.current !== handler) {
@@ -107,4 +89,16 @@ function useChannelEventListener<K extends keyof BroadcastChannelEventMap>(
       channel.removeEventListener(event, callback);
     };
   }, [channel, event]);
-}
+};
+
+export const useBroadcastChannel = (): IBroadcastChannelContext => {
+  const context = useContext(BroadcastChannelContext);
+
+  if (!context) {
+    throw new Error(
+      "useBroadcastChannel must be used within an BroadcastChannelContext",
+    );
+  }
+
+  return context;
+};