Implement display mode for instructions tab

frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx

@@ -1,21 +1,28 @@
 import { instructionsList } from "../../../utils/constants";
 import { FormControlLabel, Checkbox } from "@mui/material";
 import React, { useState, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
+import { ActionButton } from "../../atoms/Button";
 
 interface InstructionsTabProps {
-  onInstructionsCheckChange: (consent: boolean) => void;
+  displayMode?: boolean;
 }
 
-export const InstructionsTab = ({ onInstructionsCheckChange }: InstructionsTabProps) => {
+export const InstructionsTab = ({ displayMode = false }: InstructionsTabProps) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sessionIdParam = searchParams.get("sessionId");
+  const participantIdParam = searchParams.get("participantId");
+
   const [checkedInstructions, setCheckedInstructions] = useState(
     instructionsList.map(() => false) // Initialize all checkboxes as unchecked
   );
+  const [areInstructionsChecked, setAreInstructionsChecked] = useState(false);
 
   useEffect(() => {
     // Calculate whether all checkboxes are checked
     const allChecked = checkedInstructions.every((checked) => checked);
-    onInstructionsCheckChange(allChecked); // Pass the status to the parent component
-  }, [checkedInstructions, onInstructionsCheckChange]);
+    setAreInstructionsChecked(allChecked);
+  }, [checkedInstructions]);
 
   const handleCheckboxChange = (index: number) => {
     const newCheckedInstructions = [...checkedInstructions];
@@ -24,22 +31,41 @@ export const InstructionsTab = ({ onInstructionsCheckChange }: InstructionsTabPr
   };
 
   return (
-    <div className="flex flex-col p-4 border-l-gray-100 border-l-2 h-[calc(100vh-4rem)] w-full items-center gap-y-5">
+    <div className="flex flex-col p-4 border-l-gray-100 border-l-2 h-full w-full items-center gap-y-5">
       <div className="text-3xl">Instructions</div>
       <div className="w-full flex flex-col h-full items-start space-y-6">
-        {instructionsList.map((instruction, index) => (
-          <FormControlLabel
-            key={index}
-            control={
-              <Checkbox
-                checked={checkedInstructions[index]}
-                onChange={() => handleCheckboxChange(index)}
-              />
-            }
-            label={instruction}
-          />
-        ))}
+        {instructionsList.map((instruction, index) =>
+          displayMode ? (
+            <li className="text-l" key={index}>
+              {instruction}
+            </li>
+          ) : (
+            <FormControlLabel
+              key={index}
+              control={
+                <Checkbox
+                  checked={checkedInstructions[index]}
+                  onChange={() => handleCheckboxChange(index)}
+                />
+              }
+              label={instruction}
+            />
+          )
+        )}
       </div>
+      {!displayMode && (
+        <div className="self-center h-fit">
+          <ActionButton
+            className={!areInstructionsChecked ? "pointer-events-none" : ""}
+            text="Continue"
+            variant="contained"
+            disabled={!areInstructionsChecked}
+            onClick={() => {
+              window.location.href = `${window.location.origin}/meetingRoom?participantId=${participantIdParam}&sessionId=${sessionIdParam}`;
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 };

frontend/src/pages/Lobby/Lobby.js

@@ -14,8 +14,6 @@ import "./Lobby.css";
 import { ParticipantChatTab } from "../../components/molecules/ChatTab/ParticipantChatTab";
 import { ChatGptTab } from "../../components/molecules/ChatGptTab/ChatGptTab";
 import { BACKEND } from "../../utils/constants";
-import VideoCanvas from "../../components/organisms/VideoCanvas/VideoCanvas";
-import { ActionButton } from "../../components/atoms/Button";
 
 function Lobby({ localStream, connection, onGetSession, onChat }) {
   const videoElement = useRef(null);
@@ -29,7 +27,6 @@ function Lobby({ localStream, connection, onGetSession, onChat }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const sessionIdParam = searchParams.get("sessionId");
   const participantIdParam = searchParams.get("participantId");
-  const [areInstructionsChecked, setAreInstructionsChecked] = useState(false);
 
   useEffect(() => {
     if (connection && connectionState === ConnectionState.CONNECTED) {
@@ -145,20 +142,12 @@ function Lobby({ localStream, connection, onGetSession, onChat }) {
           )}
 
           {connectionState === ConnectionState.CONNECTED && isInstructionsModalActive && (
-            <InstructionsTab onInstructionsCheckChange={setAreInstructionsChecked} />
+            <InstructionsTab />
           )}
 
           {connectionState === ConnectionState.CONNECTED && isChatGptModalActive && <ChatGptTab />}
         </div>
       </div>
-      <div className="self-center h-fit">
-        <a
-          href={`${window.location.origin}/meetingRoom?participantId=${participantIdParam}&sessionId=${sessionIdParam}`}
-          className={!areInstructionsChecked ? "pointer-events-none" : ""}
-        >
-          <ActionButton text="Continue" variant="contained" disabled={!areInstructionsChecked} />
-        </a>
-      </div>
     </>
   );
 }

frontend/src/pages/MeetingRoom/MeetingRoom.js

@@ -28,7 +28,6 @@ function MeetingRoom({ localStream, connection, onGetSession, onChat }) {
   const [searchParams, setSearchParams] = useSearchParams();
   const sessionIdParam = searchParams.get("sessionId");
   const participantIdParam = searchParams.get("participantId");
-  const [areInstructionsChecked, setAreInstructionsChecked] = useState(false); // State to track checkbox status
 
   useEffect(() => {
     if (connection && connectionState === ConnectionState.CONNECTED) {
@@ -117,10 +116,7 @@ function MeetingRoom({ localStream, connection, onGetSession, onChat }) {
           )}
 
           {connectionState === ConnectionState.CONNECTED && isInstructionsModalActive && (
-            <InstructionsTab
-              onInstructionsCheckChange={setAreInstructionsChecked}
-              glassDetected={glassDetected}
-            />
+            <InstructionsTab displayMode />
           )}
 
           {connectionState === ConnectionState.CONNECTED && isChatGptModalActive && <ChatGptTab />}