Refactor event listeners

This commit is contained in:
qvalentin 2023-04-01 17:46:33 +02:00
parent 5c6b39a44e
commit a1cb1a30d9
6 changed files with 30 additions and 27 deletions

View File

@ -18,14 +18,14 @@ function videoConferenceJoinedListener(
setConferenceData(videoConferenceJoinedEvent); setConferenceData(videoConferenceJoinedEvent);
} }
function displayNameChangeListener( function displayNameChangeListenerWrapper(
setDisplayNameChangedEvent: (newData: DisplayNameChangeEvent) => void, setDisplayNameChangedEvent: (newData: DisplayNameChangeEvent) => void,
displayNameChangeEvent: DisplayNameChangeEvent displayNameChangeEvent: DisplayNameChangeEvent
) { ) {
setDisplayNameChangedEvent(displayNameChangeEvent); setDisplayNameChangedEvent(displayNameChangeEvent);
} }
function displayNameChangeListenerA( function displayNameChangeListener(
conferenceData: ConferenceData | undefined, conferenceData: ConferenceData | undefined,
setConferenceData: (newData: ConferenceData) => void, setConferenceData: (newData: ConferenceData) => void,
displayNameChangeEvent: DisplayNameChangeEvent displayNameChangeEvent: DisplayNameChangeEvent
@ -44,6 +44,6 @@ function displayNameChangeListenerA(
export { export {
videoConferenceJoinedListener, videoConferenceJoinedListener,
displayNameChangeListenerWrapper,
displayNameChangeListener, displayNameChangeListener,
displayNameChangeListenerA,
}; };

View File

@ -4,12 +4,10 @@ import { UserInfo } from "./types";
import curry from "just-curry-it"; import curry from "just-curry-it";
import { import {
ConferenceData, ConferenceData,
DisplayNameChangeEvent,
displayNameChangeListener, displayNameChangeListener,
displayNameChangeListenerA, displayNameChangeListenerWrapper,
videoConferenceJoinedListener, videoConferenceJoinedListener,
} from "../../background/jitsi/eventListeners"; } from "../../background/jitsi/eventListeners";
import { useCallback } from "react";
import useJitsiEventCapture from "../../hooks/useJitsiEventCapture"; import useJitsiEventCapture from "../../hooks/useJitsiEventCapture";
interface Props { interface Props {
@ -26,13 +24,9 @@ function JitsiEntrypoint({
setConferenceData, setConferenceData,
}: Props) { }: Props) {
const { setDisplayNameChangeEvent } = useJitsiEventCapture( const { setDisplayNameChangeEvent } = useJitsiEventCapture(
curry(displayNameChangeListenerA)(conferenceData)(setConferenceData) curry(displayNameChangeListener)(conferenceData)(setConferenceData)
); );
// const displayNameChangeEventListenerCallback = useCallback(() => {
//
// }, [conferenceData, setConferenceData]);
return ( return (
<JitsiMeeting <JitsiMeeting
domain={JITSI_DOMAIN} domain={JITSI_DOMAIN}
@ -53,7 +47,7 @@ function JitsiEntrypoint({
); );
externalApi.addEventListener( externalApi.addEventListener(
"displayNameChange", "displayNameChange",
curry(displayNameChangeListener)(setDisplayNameChangeEvent) curry(displayNameChangeListenerWrapper)(setDisplayNameChangeEvent)
); );
}} }}
getIFrameRef={(iframeRef) => { getIFrameRef={(iframeRef) => {

View File

@ -5,20 +5,20 @@ import useWebSocketConnection from "./useWebSocketConnection";
function useBackendData(userInfo: UserInfo) { function useBackendData(userInfo: UserInfo) {
console.log("[Rooms] useBackendData"); console.log("[Rooms] useBackendData");
const { onMessage, sendMessage } = useWebSocketConnection(userInfo); const { onMessage, sendMessage, disconnect } =
useWebSocketConnection(userInfo);
const { roomData, setRoomData } = useRoomData(); const { roomData, setRoomData } = useRoomData();
useEffect( useEffect(() => {
() =>
onMessage((messageString) => { onMessage((messageString) => {
console.log("[Rooms] message from ws", messageString); console.log("[Rooms] message from ws", messageString);
const messageObject = JSON.parse(messageString); const messageObject = JSON.parse(messageString);
!!messageObject.roomsData && setRoomData(messageObject); !!messageObject.roomsData && setRoomData(messageObject);
}), return disconnect;
[onMessage, setRoomData] });
); }, [onMessage, setRoomData, disconnect]);
return { roomData, sendMessage }; return { roomData, sendMessage };
} }

View File

@ -10,7 +10,14 @@ function useConferenceData(
const setConferenceData = (newData: ConferenceData) => { const setConferenceData = (newData: ConferenceData) => {
console.log("[Rooms] set conferenceData", conferenceData); console.log("[Rooms] set conferenceData", conferenceData);
sendMessage(JSON.stringify(newData)); if (conferenceData?.roomName !== newData.roomName) {
// We joined a meeting
sendMessage(JSON.stringify({ roomName: newData.roomName }));
}
if (conferenceData?.displayName !== newData.displayName) {
// We updated the username
sendMessage(JSON.stringify({ displayName: newData.displayName }));
}
setConferenceDataLocal(newData); setConferenceDataLocal(newData);
setUserInfo({ displayName: newData.displayName, email: "" }); setUserInfo({ displayName: newData.displayName, email: "" });
}; };

View File

@ -4,8 +4,6 @@ import { DisplayNameChangeEvent } from "../background/jitsi/eventListeners";
function useJitsiEventCapture(displayNameChangeHandler: Function) { function useJitsiEventCapture(displayNameChangeHandler: Function) {
const [displayNameChangeEvent, setDisplayNameChangeEventLocal] = const [displayNameChangeEvent, setDisplayNameChangeEventLocal] =
useState<DisplayNameChangeEvent>(); useState<DisplayNameChangeEvent>();
// const [displayNameChangeHandler, setDisplayNameChangeHandler] =
// useState<Function>();
const setDisplayNameChangeEvent = useCallback( const setDisplayNameChangeEvent = useCallback(
(newValue: DisplayNameChangeEvent) => { (newValue: DisplayNameChangeEvent) => {

View File

@ -6,7 +6,7 @@ const createWebSocketConnection = (userInfo: UserInfo) => {
const webSocket = new WebSocket(WEBSOCKET_URL); const webSocket = new WebSocket(WEBSOCKET_URL);
console.log("[Rooms] createWebSocketConnection"); console.log("[Rooms] createWebSocketConnection");
webSocket.addEventListener("open", (_: Event) => webSocket.addEventListener("open", (_: Event) =>
webSocket.send(JSON.stringify(userInfo.displayName)) webSocket.send(JSON.stringify(userInfo))
); );
return webSocket; return webSocket;
@ -40,7 +40,11 @@ function useWebSocketConnection(userInfo: UserInfo) {
[webSocketConnection] [webSocketConnection]
); );
return { onMessage, sendMessage }; const disconnect = useCallback(webSocketConnection.close, [
webSocketConnection,
]);
return { onMessage, sendMessage, disconnect };
} }
export default useWebSocketConnection; export default useWebSocketConnection;