[FEATURE] Être possible de cacher le tableau du LiveResult

Fixes #294

client/src/components/LiveResults/LiveResults.tsx

@@ -6,11 +6,13 @@ import './liveResult.css';
 import {
     FormControlLabel,
     FormGroup,
+    IconButton,
     Switch,
 } from '@mui/material';
 import { StudentType } from '../../Types/StudentType';
 
 import LiveResultsTable from './LiveResultsTable/LiveResultsTable';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
 
 interface LiveResultsProps {
     socket: Socket | null;
@@ -24,13 +26,24 @@ interface LiveResultsProps {
 const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
     const [showUsernames, setShowUsernames] = useState<boolean>(false);
     const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
+    const [isExpanded, setIsExpanded] = useState<boolean>(true);
+
+    const toggleExpand = () => {
+        setIsExpanded(!isExpanded);
+    };
 
     return (
 
         
         <div>
             <div className="action-bar mb-1">
-                <div className="text-2xl text-bold">Résultats du quiz</div>
+            <div>
+                <IconButton onClick={toggleExpand} aria-label="toggle visibility">
+                    {isExpanded ? <ExpandLess /> : <ExpandMore />}
+                </IconButton>
+                <span>Résultats du quiz</span>
+            </div>
+            {isExpanded && (          
                 <FormGroup row>
                     <FormControlLabel
                         label={<div className="text-sm">Afficher les noms</div>}
@@ -55,8 +68,9 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
                         }
                     />
                 </FormGroup>
+            )}
             </div>
-
+            {isExpanded && ( 
             <div className="table-container">
 
                 <LiveResultsTable
@@ -67,6 +81,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
                     showUsernames={showUsernames}
                 />
             </div>
+            )}
         </div>
     );
 };

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -258,10 +258,12 @@ const ManageRoom: React.FC = () => {
         if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
 
         setCurrentQuestion(quizQuestions[nextQuestionIndex]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, 
+        webSocketService.nextQuestion({
+            roomName: formattedRoomName,
             questions: quizQuestions,
             questionIndex: nextQuestionIndex,
-                                       isLaunch: false});
+            isLaunch: false
+        });
     };
 
     const previousQuestion = () => {
@@ -490,22 +492,8 @@ const ManageRoom: React.FC = () => {
 
                                     />
                                 )}
-
-                                <LiveResultsComponent
-                                    quizMode={quizMode}
-                                    socket={socket}
-                                    questions={quizQuestions}
-                                    showSelectedQuestion={showSelectedQuestion}
-                                    students={students}
-                                ></LiveResultsComponent>
-                            </div>
-                        </div>
-
                                 {quizMode === 'teacher' && (
-                            <div
+                                    <div className="questionNavigationButtons">
-                                className="questionNavigationButtons"
-                                style={{ display: 'flex', justifyContent: 'center' }}
-                            >
                                         <div className="previousQuestionButton">
                                             <Button
                                                 onClick={previousQuestion}
@@ -529,6 +517,17 @@ const ManageRoom: React.FC = () => {
                                         </div>
                                     </div>
                                 )}
+                                <LiveResultsComponent
+                                    quizMode={quizMode}
+                                    socket={socket}
+                                    questions={quizQuestions}
+                                    showSelectedQuestion={showSelectedQuestion}
+                                    students={students}
+                                ></LiveResultsComponent>
+                            </div>
+                        </div>
+
+
                     </div>
                 ) : (
                     <StudentWaitPage

client/src/pages/Teacher/ManageRoom/manageRoom.css

@@ -36,6 +36,11 @@
     justify-content: center;
     /* align-items: center; */
 }
+.questionNavigationButtons {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+}