2024-05-21 23:31:17 +08:00
|
|
|
import {
|
|
|
|
useEffect, useMemo, useRef, useState,
|
|
|
|
} from 'react';
|
|
|
|
import { useSubscription } from '@apollo/client';
|
2024-09-05 21:51:13 +08:00
|
|
|
import { GetIsUserCurrentlyInBreakoutRoomResponse, getIsUserCurrentlyInBreakoutRoom } from '../../breakout-room/breakout-room/queries';
|
2024-05-21 23:31:17 +08:00
|
|
|
|
2024-09-05 21:51:13 +08:00
|
|
|
type BreakoutCount = GetIsUserCurrentlyInBreakoutRoomResponse;
|
2024-05-21 23:31:17 +08:00
|
|
|
type Callback = () => void;
|
|
|
|
|
|
|
|
const useBreakoutExitObserver = () => {
|
2024-09-05 21:51:13 +08:00
|
|
|
const [numberOfCurrentRooms, setNumberOfCurrentRooms] = useState<number>(0);
|
2024-05-21 23:31:17 +08:00
|
|
|
const [observing, setObserving] = useState(false);
|
|
|
|
const callbacks = useRef<Map<string, Callback>>(new Map());
|
|
|
|
const oneTimeCallbacks = useRef<Callback[]>([]);
|
2024-09-05 21:51:13 +08:00
|
|
|
const { data: userIsCurrentlyInBreakoutRoomData } = useSubscription<BreakoutCount>(
|
|
|
|
getIsUserCurrentlyInBreakoutRoom,
|
2024-05-21 23:31:17 +08:00
|
|
|
{ skip: !observing },
|
|
|
|
);
|
2024-09-05 21:51:13 +08:00
|
|
|
const numberOfCurrentRoomsGql = userIsCurrentlyInBreakoutRoomData?.breakoutRoom_aggregate.aggregate.count ?? 0;
|
2024-05-21 23:31:17 +08:00
|
|
|
|
|
|
|
useEffect(() => {
|
2024-09-05 21:51:13 +08:00
|
|
|
if (numberOfCurrentRoomsGql !== numberOfCurrentRooms) {
|
|
|
|
setNumberOfCurrentRooms((prevNumberOfCurrentRooms) => {
|
|
|
|
if (numberOfCurrentRoomsGql === 0 && prevNumberOfCurrentRooms > 0) {
|
2024-05-21 23:31:17 +08:00
|
|
|
callbacks.current.forEach((value) => value());
|
|
|
|
oneTimeCallbacks.current.forEach((c) => c());
|
|
|
|
oneTimeCallbacks.current = [];
|
|
|
|
if (callbacks.current.size === 0) {
|
|
|
|
setObserving(false);
|
|
|
|
}
|
|
|
|
}
|
2024-09-05 21:51:13 +08:00
|
|
|
return numberOfCurrentRoomsGql;
|
2024-05-21 23:31:17 +08:00
|
|
|
});
|
|
|
|
}
|
2024-09-05 21:51:13 +08:00
|
|
|
}, [numberOfCurrentRoomsGql]);
|
2024-05-21 23:31:17 +08:00
|
|
|
|
|
|
|
return useMemo(() => ({
|
|
|
|
resetCallbacks: () => {
|
|
|
|
callbacks.current = new Map();
|
|
|
|
oneTimeCallbacks.current = [];
|
|
|
|
setObserving(false);
|
|
|
|
},
|
2024-05-22 01:33:47 +08:00
|
|
|
setCallback: (key: string, callback: Callback) => {
|
2024-05-21 23:31:17 +08:00
|
|
|
callbacks.current.set(key, callback);
|
|
|
|
setObserving(true);
|
|
|
|
},
|
|
|
|
addOneTimeCallback: (callback: Callback) => {
|
|
|
|
oneTimeCallbacks.current.push(callback);
|
|
|
|
setObserving(true);
|
|
|
|
},
|
|
|
|
removeCallback: (key: string) => {
|
|
|
|
callbacks.current.delete(key);
|
|
|
|
if (callbacks.current.size === 0 && oneTimeCallbacks.current.length === 0) {
|
|
|
|
setObserving(false);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}), []);
|
|
|
|
};
|
|
|
|
|
|
|
|
export {
|
|
|
|
useBreakoutExitObserver,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default {
|
|
|
|
useBreakoutExitObserver,
|
|
|
|
};
|