Merge pull request #75 from daily-demos/waiting-participants-hook

Waiting participants hook

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 (
     <div className="not-found">
-      <MessageCard error header="Room not found">
+      <MessageCard error header="Room not found" onBack={returnToHomePage}>
         The room you are trying to join does not exist. Have you created the
         room using the Daily REST API or the dashboard?
       </MessageCard>

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, grantAccess, denyAccess } =
-  const [waitingParticipants, setWaitingParticipants] = useState([]);
+    useWaitingParticipants();
   const [showModal, setShowModal] = useState(false);
 
-  const handleWaitingParticipantEvent = useCallback(() => {
+  const multipleWaiting = useMemo(
-    if (!callObject) return;
+    () => waitingParticipants.length > 1,
-
+    [waitingParticipants]
-    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,
-  ]);
 
   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 (
     <WaitingRoomContext.Provider
       value={{
@@ -114,4 +46,4 @@ WaitingRoomProvider.propTypes = {
   children: PropTypes.node,
 };
 
-export const useWaitingRoom = () => useContext(WaitingRoomContext);
+export const useWaitingRoom = () => useContext(WaitingRoomContext);