diff --git a/custom/basic-call/pages/not-found.js b/custom/basic-call/pages/not-found.js
index 1d25fb7..45d5408 100644
--- a/custom/basic-call/pages/not-found.js
+++ b/custom/basic-call/pages/not-found.js
@@ -1,10 +1,15 @@
import React from 'react';
import MessageCard from '@custom/shared/components/MessageCard';
+import { useRouter } from 'next/router';
export default function RoomNotFound() {
+ const router = useRouter();
+
+ const returnToHomePage = () => router.push('/');
+
return (
-
+
The room you are trying to join does not exist. Have you created the
room using the Daily REST API or the dashboard?
diff --git a/custom/shared/contexts/WaitingRoomProvider.js b/custom/shared/contexts/WaitingRoomProvider.js
index f6498de..b705f95 100644
--- a/custom/shared/contexts/WaitingRoomProvider.js
+++ b/custom/shared/contexts/WaitingRoomProvider.js
@@ -1,42 +1,24 @@
import React, {
createContext,
- useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
+import { useWaitingParticipants } from '@daily-co/daily-react-hooks';
import PropTypes from 'prop-types';
-import { useCallState } from './CallProvider';
const WaitingRoomContext = createContext(null);
export const WaitingRoomProvider = ({ children }) => {
- const { callObject } = useCallState();
- const [waitingParticipants, setWaitingParticipants] = useState([]);
+ const { waitingParticipants, grantAccess, denyAccess } =
+ useWaitingParticipants();
const [showModal, setShowModal] = useState(false);
- const handleWaitingParticipantEvent = useCallback(() => {
- if (!callObject) return;
-
- const waiting = Object.entries(callObject.waitingParticipants());
-
- console.log(`🚪 ${waiting.length} participant(s) waiting for access`);
-
- setWaitingParticipants((wp) =>
- waiting.map(([pid, p]) => {
- const prevWP = wp.find(({ id }) => id === pid);
- return {
- ...p,
- joinDate: prevWP?.joinDate ?? new Date(),
- };
- })
- );
- }, [callObject]);
-
- const multipleWaiting = useMemo(() => waitingParticipants.length > 1, [
- waitingParticipants,
- ]);
+ const multipleWaiting = useMemo(
+ () => waitingParticipants.length > 1,
+ [waitingParticipants]
+ );
useEffect(() => {
if (waitingParticipants.length === 0) {
@@ -44,56 +26,6 @@ export const WaitingRoomProvider = ({ children }) => {
}
}, [waitingParticipants]);
- useEffect(() => {
- if (!callObject) return false;
-
- console.log('🚪 Waiting room provider listening for requests');
-
- const events = [
- 'waiting-participant-added',
- 'waiting-participant-updated',
- 'waiting-participant-removed',
- ];
-
- events.forEach((e) => callObject.on(e, handleWaitingParticipantEvent));
-
- return () =>
- events.forEach((e) => callObject.off(e, handleWaitingParticipantEvent));
- }, [callObject, handleWaitingParticipantEvent]);
-
- const updateWaitingParticipant = (id, grantRequestedAccess) => {
- if (!waitingParticipants.some((p) => p.id === id)) return;
- callObject.updateWaitingParticipant(id, {
- grantRequestedAccess,
- });
- setWaitingParticipants((wp) => wp.filter((p) => p.id !== id));
- };
-
- const updateAllWaitingParticipants = (grantRequestedAccess) => {
- if (!waitingParticipants.length) return;
- callObject.updateWaitingParticipants({
- '*': {
- grantRequestedAccess,
- },
- });
- setWaitingParticipants([]);
- };
-
- const grantAccess = (id = 'all') => {
- if (id === 'all') {
- updateAllWaitingParticipants(true);
- return;
- }
- updateWaitingParticipant(id, true);
- };
- const denyAccess = (id = 'all') => {
- if (id === 'all') {
- updateAllWaitingParticipants(false);
- return;
- }
- updateWaitingParticipant(id, false);
- };
-
return (
useContext(WaitingRoomContext);
+export const useWaitingRoom = () => useContext(WaitingRoomContext);
\ No newline at end of file