fix(frontend): update BroadcastChannel hook

frontend/src/contexts/auth.context.tsx

@@ -21,11 +21,7 @@ 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 {
-  EBCEvent,
-  ETabMode,
-  useBroadcastChannel,
-} from "@/hooks/useBroadcastChannel";
+import { useBroadcastChannel } from "@/hooks/useBroadcastChannel";
 import { useTranslate } from "@/hooks/useTranslate";
 import { RouterType } from "@/services/types";
 import { IUser } from "@/types/user.types";
@@ -64,7 +60,6 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
     i18n.changeLanguage(lang);
   };
   const { mutate: logoutSession } = useLogout();
-  const { mode, value } = useBroadcastChannel();
   const logout = async () => {
     updateLanguage(publicRuntimeConfig.lang.default);
     logoutSession();
@@ -113,11 +108,9 @@ export const AuthProvider = ({ children }: AuthProviderProps): JSX.Element => {
     setIsReady(true);
   }, []);
 
-  useEffect(() => {
-    if (value === EBCEvent.LOGOUT_END_SESSION && mode === ETabMode.SECONDARY) {
+  useBroadcastChannel("session", () => {
     router.reload();
-    }
-  }, [value, mode, router]);
+  });
 
   if (!isReady || isLoading) return <Progress />;
 

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

@@ -22,7 +22,7 @@ import { useSocket } from "@/websocket/socket-hooks";
 import { useFind } from "../crud/useFind";
 import { useApiClient } from "../useApiClient";
 import { CURRENT_USER_KEY, useAuth, useLogoutRedirection } from "../useAuth";
-import { EBCEvent, useBroadcastChannel } from "../useBroadcastChannel";
+import { useBroadcastChannel } from "../useBroadcastChannel";
 import { useToast } from "../useToast";
 import { useTranslate } from "../useTranslate";
 
@@ -59,7 +59,7 @@ export const useLogout = (
   const { logoutRedirection } = useLogoutRedirection();
   const { toast } = useToast();
   const { t } = useTranslate();
-  const { send } = useBroadcastChannel();
+  const postDisconnectionSignal = useBroadcastChannel("session");
 
   return useMutation({
     ...options,
@@ -70,7 +70,7 @@ export const useLogout = (
     },
     onSuccess: async () => {
       queryClient.removeQueries([CURRENT_USER_KEY]);
-      send(EBCEvent.LOGOUT_END_SESSION);
+      postDisconnectionSignal("logout");
       await logoutRedirection();
       toast.success(t("message.logout_success"));
     },

frontend/src/hooks/useBroadcastChannel.ts

@@ -6,52 +6,136 @@
  * 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, useRef, useState } from "react";
+import * as React from "react";
 
-export enum ETabMode {
-  PRIMARY = "primary",
-  SECONDARY = "secondary",
-}
+export type BroadcastChannelData =
+  | string
+  | number
+  | boolean
+  | Record<string, unknown>
+  | undefined
+  | null;
 
-export enum EBCEvent {
-  LOGOUT_END_SESSION = "logout-end-session",
-}
+/**
+ * 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.
+ * @example
+ * ```tsx
+ * import {useBroadcastChannel} from 'react-broadcast-channel';
+ *
+ * function App () {
+ *   const postUserIdMessage = useBroadcastChannel('userId', (e) => alert(e.data));
+ *   return (<button onClick={() => postUserIdMessage('ABC123')}>Send UserId</button>);
+ * }
+ * ```
+ * ---
+ * Works in browser that support Broadcast Channel API natively. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API#browser_compatibility).
+ * To support other browsers, install and use [broadcastchannel-polyfill](https://www.npmjs.com/package/broadcastchannel-polyfill).
+ */
+export function useBroadcastChannel<T extends BroadcastChannelData = string>(
+  channelName: string,
+  handleMessage?: (event: MessageEvent) => void,
+  handleMessageError?: (event: MessageEvent) => void,
+): (data: T) => void {
+  const channelRef = React.useRef<BroadcastChannel | null>(null);
 
-export const useBroadcastChannel = (
-  channelName: string = "main-broadcast-channel",
-  initialValue?: EBCEvent,
-) => {
-  const channelRef = useRef<BroadcastChannel | null>(null);
-  const [value, setValue] = useState<EBCEvent | undefined>(initialValue);
-  const [mode, setMode] = useState<ETabMode>(ETabMode.PRIMARY);
-
-  useEffect(() => {
-    channelRef.current = new BroadcastChannel(channelName);
+  React.useEffect(() => {
+    if (typeof window !== "undefined" && "BroadcastChannel" in window) {
+      channelRef.current = new BroadcastChannel(channelName + "-channel");
+    }
   }, [channelName]);
 
-  useEffect(() => {
-    if (channelRef.current) {
-      channelRef.current.addEventListener("message", (event) => {
-        if (mode === ETabMode.PRIMARY) {
-          setValue(event.data);
-          setMode(ETabMode.SECONDARY);
-        }
+  useChannelEventListener(channelRef.current, "message", handleMessage);
+  useChannelEventListener(
+    channelRef.current,
+    "messageerror",
+    handleMessageError,
+  );
+
+  return React.useCallback(
+    (data: T) => channelRef.current?.postMessage(data),
+    [channelRef.current],
+  );
+}
+
+/**
+ * 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.
+ * @example
+ * ```tsx
+ * import {useBroadcastState} from 'react-broadcast-channel';
+ *
+ * function App () {
+ *   const [count, setCount] = useBroadcastState('count', 0);
+ *   return (
+ *     <div>
+ *       <button onClick={() => setCount(prev => prev - 1)}>Decrement</button>
+ *       <span>{count}</span>
+ *       <button onClick={() => setCount(prev => prev + 1)}>Increment</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ * ---
+ * Works in browser that support Broadcast Channel API natively. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API#browser_compatibility).
+ * To support other browsers, install and use [broadcastchannel-polyfill](https://www.npmjs.com/package/broadcastchannel-polyfill).
+ */
+export function useBroadcastState<T extends BroadcastChannelData = string>(
+  channelName: string,
+  initialState: T,
+): [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 updateState: React.Dispatch<React.SetStateAction<T>> =
+    React.useCallback(
+      (input) => {
+        setState((prev) => {
+          const newState = typeof input === "function" ? input(prev) : input;
+
+          startTransition(() => broadcast(newState));
+
+          return newState;
         });
-      channelRef.current.postMessage(initialValue);
+      },
+      [broadcast],
+    );
+
+  return [state, updateState, isPending];
+}
+
+// Helpers
+
+/** Hook to subscribe/unsubscribe from channel events. */
+function useChannelEventListener<K extends keyof BroadcastChannelEventMap>(
+  channel: BroadcastChannel | null,
+  event: K,
+  handler?: (e: BroadcastChannelEventMap[K]) => void,
+) {
+  const callbackRef = React.useRef(handler);
+
+  if (callbackRef.current !== handler) {
+    callbackRef.current = handler;
   }
 
-    return () => {
-      if (channelRef.current?.onmessage) {
-        channelRef.current.onmessage = null;
+  React.useEffect(() => {
+    const callback = callbackRef.current;
+
+    if (!channel || !callback) {
+      return;
     }
-      channelRef.current?.close();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [channelName, initialValue]);
 
-  const send = (data: EBCEvent) => {
-    channelRef.current?.postMessage(data);
-  };
+    channel.addEventListener(event, callback);
 
-  return { mode, value, send };
-};
+    return () => channel.removeEventListener(event, callback);
+  }, [channel, event]);
+}