fix: refactor broadcastChannel payload types

This commit is contained in:
yassinedorbozgithub 2025-01-31 08:19:19 +01:00
parent 0a4da02591
commit 24e09be6ed
2 changed files with 14 additions and 34 deletions

View File

@ -20,15 +20,11 @@ export enum EBCEvent {
LOGOUT = "logout", LOGOUT = "logout",
} }
type BroadcastChannelPayload = { type BroadcastChannelMessage = {
event: `${EBCEvent}`; event: `${EBCEvent}`;
data?: string | number | boolean | Record<string, unknown> | undefined | null; data?: string | number | boolean | Record<string, unknown> | undefined | null;
}; };
type BroadcastChannelData = {
payload: BroadcastChannelPayload;
};
interface IBroadcastChannelProps { interface IBroadcastChannelProps {
channelName: string; channelName: string;
children: ReactNode; children: ReactNode;
@ -37,9 +33,9 @@ interface IBroadcastChannelProps {
interface IBroadcastChannelContext { interface IBroadcastChannelContext {
subscribe: ( subscribe: (
event: `${EBCEvent}`, event: `${EBCEvent}`,
callback: (message: BroadcastChannelData) => void, callback: (message: BroadcastChannelMessage) => void,
) => void; ) => void;
postMessage: (payload: BroadcastChannelPayload) => void; postMessage: (message: BroadcastChannelMessage) => void;
} }
export const BroadcastChannelContext = createContext< export const BroadcastChannelContext = createContext<
@ -61,12 +57,8 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
>({}); >({});
useEffect(() => { useEffect(() => {
const handleMessage = ({ data }: MessageEvent<BroadcastChannelData>) => { const handleMessage = ({ data }: MessageEvent<BroadcastChannelMessage>) => {
const { payload } = data; subscribersRef.current[data.event].forEach((callback) => callback(data));
subscribersRef.current[payload.event].forEach((callback) =>
callback(data),
);
}; };
channelRef.current.addEventListener("message", handleMessage); channelRef.current.addEventListener("message", handleMessage);
@ -92,10 +84,8 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
} }
}; };
}; };
const postMessage: IBroadcastChannelContext["postMessage"] = (payload) => { const postMessage: IBroadcastChannelContext["postMessage"] = (message) => {
channelRef.current.postMessage({ channelRef.current.postMessage(message);
payload,
});
}; };
return ( return (

View File

@ -19,15 +19,11 @@ export enum EBCEvent {
LOGOUT = "logout", LOGOUT = "logout",
} }
type BroadcastChannelPayload = { type BroadcastChannelMessage = {
event: `${EBCEvent}`; event: `${EBCEvent}`;
data?: string | number | boolean | Record<string, unknown> | undefined | null; data?: string | number | boolean | Record<string, unknown> | undefined | null;
}; };
type BroadcastChannelData = {
payload: BroadcastChannelPayload;
};
interface IBroadcastChannelProps { interface IBroadcastChannelProps {
channelName: string; channelName: string;
children: ReactNode; children: ReactNode;
@ -36,9 +32,9 @@ interface IBroadcastChannelProps {
interface IBroadcastChannelContext { interface IBroadcastChannelContext {
subscribe: ( subscribe: (
event: `${EBCEvent}`, event: `${EBCEvent}`,
callback: (message: BroadcastChannelData) => void, callback: (message: BroadcastChannelMessage) => void,
) => void; ) => void;
postMessage: (payload: BroadcastChannelPayload) => void; postMessage: (message: BroadcastChannelMessage) => void;
} }
export const BroadcastChannelContext = createContext< export const BroadcastChannelContext = createContext<
@ -60,12 +56,8 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
>({}); >({});
useEffect(() => { useEffect(() => {
const handleMessage = ({ data }: MessageEvent<BroadcastChannelData>) => { const handleMessage = ({ data }: MessageEvent<BroadcastChannelMessage>) => {
const { payload } = data; subscribersRef.current[data.event].forEach((callback) => callback(data));
subscribersRef.current[payload.event].forEach((callback) =>
callback(data),
);
}; };
channelRef.current.addEventListener("message", handleMessage); channelRef.current.addEventListener("message", handleMessage);
@ -92,10 +84,8 @@ export const BroadcastChannelProvider: FC<IBroadcastChannelProps> = ({
} }
}; };
}; };
const postMessage: IBroadcastChannelContext["postMessage"] = (payload) => { const postMessage: IBroadcastChannelContext["postMessage"] = (message) => {
channelRef.current.postMessage({ channelRef.current.postMessage(message);
payload,
});
}; };
return ( return (