From 776720d35d748c8597c3edbdf01fa651228129cb Mon Sep 17 00:00:00 2001
From: Gulbike Imge Koksal <koksalg15@itu.edu.tr>
Date: Sat, 15 Jun 2024 23:57:49 +0200
Subject: [PATCH 1/2] fix continue button for instructions tab

---
 .../InstructionsTab/InstructionsTab.tsx       | 28 ++++++++++++++-----
 frontend/src/pages/Lobby/Lobby.js             | 13 +--------
 frontend/src/pages/MeetingRoom/MeetingRoom.js |  6 +---
 3 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx b/frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx
index 24c6748e..cb0cef02 100644
--- a/frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx
+++ b/frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx
@@ -1,21 +1,24 @@
 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;
-}
+export const InstructionsTab = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sessionIdParam = searchParams.get("sessionId");
+  const participantIdParam = searchParams.get("participantId");
 
-export const InstructionsTab = ({ onInstructionsCheckChange }: InstructionsTabProps) => {
   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,7 +27,7 @@ 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) => (
@@ -40,6 +43,17 @@ export const InstructionsTab = ({ onInstructionsCheckChange }: InstructionsTabPr
           />
         ))}
       </div>
+      <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>
   );
 };
diff --git a/frontend/src/pages/Lobby/Lobby.js b/frontend/src/pages/Lobby/Lobby.js
index 7bd0a693..39c59595 100644
--- a/frontend/src/pages/Lobby/Lobby.js
+++ b/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>
     </>
   );
 }
diff --git a/frontend/src/pages/MeetingRoom/MeetingRoom.js b/frontend/src/pages/MeetingRoom/MeetingRoom.js
index 40dc9609..9578afad 100644
--- a/frontend/src/pages/MeetingRoom/MeetingRoom.js
+++ b/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 />
           )}
 
           {connectionState === ConnectionState.CONNECTED && isChatGptModalActive && <ChatGptTab />}

From bd6c9ab04f829fcb840522ad73028018aa968f9e Mon Sep 17 00:00:00 2001
From: Gulbike Imge Koksal <koksalg15@itu.edu.tr>
Date: Sun, 16 Jun 2024 00:22:11 +0200
Subject: [PATCH 2/2] implement display mode for instructions tab

---
 .../InstructionsTab/InstructionsTab.tsx       | 60 +++++++++++--------
 frontend/src/pages/MeetingRoom/MeetingRoom.js |  2 +-
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx b/frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx
index cb0cef02..b6341108 100644
--- a/frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx
+++ b/frontend/src/components/molecules/InstructionsTab/InstructionsTab.tsx
@@ -4,7 +4,11 @@ import React, { useState, useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import { ActionButton } from "../../atoms/Button";
 
-export const InstructionsTab = () => {
+interface InstructionsTabProps {
+  displayMode?: boolean;
+}
+
+export const InstructionsTab = ({ displayMode = false }: InstructionsTabProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const sessionIdParam = searchParams.get("sessionId");
   const participantIdParam = searchParams.get("participantId");
@@ -30,30 +34,38 @@ export const InstructionsTab = () => {
     <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}
-          />
-        ))}
-      </div>
-      <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}`;
-          }}
-        />
+        {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>
   );
 };
diff --git a/frontend/src/pages/MeetingRoom/MeetingRoom.js b/frontend/src/pages/MeetingRoom/MeetingRoom.js
index 9578afad..57318186 100644
--- a/frontend/src/pages/MeetingRoom/MeetingRoom.js
+++ b/frontend/src/pages/MeetingRoom/MeetingRoom.js
@@ -116,7 +116,7 @@ function MeetingRoom({ localStream, connection, onGetSession, onChat }) {
           )}
 
           {connectionState === ConnectionState.CONNECTED && isInstructionsModalActive && (
-            <InstructionsTab />
+            <InstructionsTab displayMode />
           )}
 
           {connectionState === ConnectionState.CONNECTED && isChatGptModalActive && <ChatGptTab />}