consent dialog api cleanup

www/app/(app)/rooms/audioConsentDialog.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  Button,
-  Text,
-  HStack,
-} from "@chakra-ui/react";
-
-interface AudioConsentDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onConsent: (given: boolean) => void;
-}
-
-const AudioConsentDialog = ({ isOpen, onClose, onConsent }: AudioConsentDialogProps) => {
-  const handleConsent = (given: boolean) => {
-    onConsent(given);
-    onClose();
-  };
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false} closeOnEsc={false}>
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Audio Storage Consent</ModalHeader>
-        <ModalBody pb={6}>
-          <Text mb={4}>
-            Can we have your permission to store this meeting's audio recording on our servers?
-          </Text>
-          <HStack spacing={4}>
-            <Button colorScheme="green" onClick={() => handleConsent(true)}>
-              Yes, store the audio
-            </Button>
-            <Button colorScheme="red" onClick={() => handleConsent(false)}>
-              No, delete after transcription
-            </Button>
-          </HStack>
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-};
-
-export default AudioConsentDialog;

www/app/[roomName]/page.tsx

@@ -7,10 +7,7 @@ import useRoomMeeting from "./useRoomMeeting";
 import { useRouter } from "next/navigation";
 import { notFound } from "next/navigation";
 import useSessionStatus from "../lib/useSessionStatus";
-import { DomainContext } from "../domainContext";
 import { useRecordingConsent } from "../recordingConsentContext";
-import useSessionAccessToken from "../lib/useSessionAccessToken";
-import useSessionUser from "../lib/useSessionUser";
 import useApi from "../lib/useApi";
 
 export type RoomDetails = {
@@ -19,35 +16,14 @@ export type RoomDetails = {
   };
 };
 
-export default function Room(details: RoomDetails) {
+const useConsentDialog = (meetingId: string) => {
-  const wherebyRef = useRef<HTMLElement>(null);
-  const roomName = details.params.roomName;
-  const meeting = useRoomMeeting(roomName);
-  const router = useRouter();
-  const { isLoading, isAuthenticated } = useSessionStatus();
-  const [consentLoading, setConsentLoading] = useState(false);
   const { state: consentState, touch, hasConsent } = useRecordingConsent();
-  const { api_url } = useContext(DomainContext);
+  const [consentLoading, setConsentLoading] = useState(false);
-  const { accessToken } = useSessionAccessToken();
-  const { id: userId } = useSessionUser();
   const api = useApi();
   const toast = useToast();
-
+  const handleConsent = useCallback(async (meetingId: string, given: boolean) => {
-
-  const roomUrl = meeting?.response?.host_room_url
-    ? meeting?.response?.host_room_url
-    : meeting?.response?.room_url;
-
-  const meetingId = meeting?.response?.id;
-
-  const handleLeave = useCallback(() => {
-    router.push("/browse");
-  }, [router]);
-
-  const handleConsent = useCallback(async (meetingId: string, given: boolean, onClose?: () => void) => {
     if (!api) return;
 
-    if (onClose) onClose();
     setConsentLoading(true);
 
     try {
@@ -55,7 +31,7 @@ export default function Room(details: RoomDetails) {
         meetingId,
         requestBody: { consent_given: given }
       });
-      
+
       touch(meetingId);
     } catch (error) {
       console.error('Error submitting consent:', error);
@@ -64,18 +40,6 @@ export default function Room(details: RoomDetails) {
     }
   }, [api, touch]);
 
-
-  useEffect(() => {
-    if (
-      !isLoading &&
-      meeting?.error &&
-      "status" in meeting.error &&
-      meeting.error.status === 404
-    ) {
-      notFound();
-    }
-  }, [isLoading, meeting?.error]);
-
   // Show consent toast when meeting is loaded and consent hasn't been answered yet
   useEffect(() => {
     if (
@@ -94,17 +58,23 @@ export default function Room(details: RoomDetails) {
                 Can we have your permission to store this meeting's audio recording on our servers?
               </Text>
               <HStack spacing={4} justify="center">
-                <Button 
+                <Button
-                  colorScheme="green" 
+                  colorScheme="green"
                   size="sm"
-                  onClick={() => handleConsent(meetingId, true, onClose)}
+                  onClick={() => {
+                    handleConsent(meetingId, true).then(() => {/*signifies it's ok to now wait here.*/})
+                    onClose()
+                  }}
                 >
                   Yes, store the audio
                 </Button>
-                <Button 
+                <Button
-                  colorScheme="red" 
+                  colorScheme="red"
                   size="sm"
-                  onClick={() => handleConsent(meetingId, false, onClose)}
+                  onClick={() => {
+                    handleConsent(meetingId, false).then(() => {/*signifies it's ok to now wait here.*/})
+                    onClose()
+                  }}
                 >
                   No, delete after transcription
                 </Button>
@@ -119,6 +89,40 @@ export default function Room(details: RoomDetails) {
       };
     }
   }, [consentState.ready, meetingId, hasConsent, consentLoading, toast, handleConsent]);
+}
+
+function ConsentDialog({ meetingId }: { meetingId: string }) {
+  useConsentDialog(meetingId);
+  return <></>
+}
+
+export default function Room(details: RoomDetails) {
+  const wherebyRef = useRef<HTMLElement>(null);
+  const roomName = details.params.roomName;
+  const meeting = useRoomMeeting(roomName);
+  const router = useRouter();
+  const { isLoading, isAuthenticated } = useSessionStatus();
+
+  const roomUrl = meeting?.response?.host_room_url
+    ? meeting?.response?.host_room_url
+    : meeting?.response?.room_url;
+
+  const meetingId = meeting?.response?.id;
+
+  const handleLeave = useCallback(() => {
+    router.push("/browse");
+  }, [router]);
+
+  useEffect(() => {
+    if (
+      !isLoading &&
+      meeting?.error &&
+      "status" in meeting.error &&
+      meeting.error.status === 404
+    ) {
+      notFound();
+    }
+  }, [isLoading, meeting?.error]);
 
   useEffect(() => {
     if (isLoading || !isAuthenticated || !roomUrl) return;
@@ -154,12 +158,15 @@ export default function Room(details: RoomDetails) {
 
   return (
     <>
-      {roomUrl && (
+      {roomUrl && meetingId && (
-        <whereby-embed
+        <>
-          ref={wherebyRef}
+          <whereby-embed
-          room={roomUrl}
+            ref={wherebyRef}
-          style={{ width: "100vw", height: "100vh" }}
+            room={roomUrl}
-        />
+            style={{ width: "100vw", height: "100vh" }}
+          />
+          <ConsentDialog meetingId={meetingId} />
+        </>
       )}
     </>
   );