[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

@@ -30,7 +30,7 @@ const ManageRoom: React.FC = () => {
     const navigate = useNavigate();
     const [socket, setSocket] = useState<Socket | null>(null);
     const [students, setStudents] = useState<StudentType[]>([]);
-    const { quizId = '', roomName = '' }  = useParams<{ quizId: string, roomName: string }>();
+    const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>();
     const [quizQuestions, setQuizQuestions] = useState<QuestionType[] | undefined>();
     const [quiz, setQuiz] = useState<QuizType | null>(null);
     const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
@@ -46,13 +46,13 @@ const ManageRoom: React.FC = () => {
         if (newlyConnectedUser) {
             console.log(`Handling newly connected user: ${newlyConnectedUser.name}`);
             setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
-    
+
             // only send nextQuestion if the quiz has started
             if (!quizStarted) {
                 console.log(`!quizStarted: returning.... `);
                 return;
             }
-    
+
             if (quizMode === 'teacher') {
                 webSocketService.nextQuestion({
                     roomName: formattedRoomName,
@@ -65,7 +65,7 @@ const ManageRoom: React.FC = () => {
             } else {
                 console.error('Invalid quiz mode:', quizMode);
             }
-    
+
             // Reset the newly connected user state
             setNewlyConnectedUser(null);
         }
@@ -96,7 +96,7 @@ const ManageRoom: React.FC = () => {
         return () => {
             disconnectWebSocket();
         };
-      }, [roomName, navigate]);
+    }, [roomName, navigate]);
 
     useEffect(() => {
         if (quizId) {
@@ -218,14 +218,14 @@ const ManageRoom: React.FC = () => {
                                     console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`);
                                     return ans.idQuestion === idQuestion
                                         ? {
-                                              ...ans,
+                                            ...ans,
-                                              answer,
+                                            answer,
-                                              isCorrect: checkIfIsCorrect(
+                                            isCorrect: checkIfIsCorrect(
-                                                  answer,
+                                                answer,
-                                                  idQuestion,
+                                                idQuestion,
-                                                  quizQuestions!
+                                                quizQuestions!
-                                              )
+                                            )
-                                          }
+                                        }
                                         : ans;
                                 });
                             } else {
@@ -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({
-                                       questions: quizQuestions, 
+            roomName: formattedRoomName,
-                                       questionIndex: nextQuestionIndex, 
+            questions: quizQuestions,
-                                       isLaunch: false});
+            questionIndex: nextQuestionIndex,
+            isLaunch: false
+        });
     };
 
     const previousQuestion = () => {
@@ -271,7 +273,7 @@ const ManageRoom: React.FC = () => {
 
         if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return;
         setCurrentQuestion(quizQuestions[prevQuestionIndex]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false});
+        webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false });
     };
 
     const initializeQuizQuestion = () => {
@@ -299,7 +301,7 @@ const ManageRoom: React.FC = () => {
         }
 
         setCurrentQuestion(quizQuestions[0]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true});
+        webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true });
     };
 
     const launchStudentMode = () => {
@@ -336,7 +338,7 @@ const ManageRoom: React.FC = () => {
         if (quiz?.content && quizQuestions) {
             setCurrentQuestion(quizQuestions[questionIndex]);
             if (quizMode === 'teacher') {
-                webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false});
+                webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false });
             }
         }
     };
@@ -487,10 +489,34 @@ const ManageRoom: React.FC = () => {
                                     <QuestionDisplay
                                         showAnswer={false}
                                         question={currentQuestion?.question as Question}
-                                        
+
                                     />
                                 )}
-
+                                {quizMode === 'teacher' && (
+                                    <div className="questionNavigationButtons">
+                                        <div className="previousQuestionButton">
+                                            <Button
+                                                onClick={previousQuestion}
+                                                variant="contained"
+                                                disabled={Number(currentQuestion?.question.id) <= 1}
+                                            >
+                                                Question précédente
+                                            </Button>
+                                        </div>
+                                        <div className="nextQuestionButton">
+                                            <Button
+                                                onClick={nextQuestion}
+                                                variant="contained"
+                                                disabled={
+                                                    Number(currentQuestion?.question.id) >=
+                                                    quizQuestions.length
+                                                }
+                                            >
+                                                Prochaine question
+                                            </Button>
+                                        </div>
+                                    </div>
+                                )}
                                 <LiveResultsComponent
                                     quizMode={quizMode}
                                     socket={socket}
@@ -501,34 +527,7 @@ const ManageRoom: React.FC = () => {
                             </div>
                         </div>
 
-                        {quizMode === 'teacher' && (
+
-                            <div
-                                className="questionNavigationButtons"
-                                style={{ display: 'flex', justifyContent: 'center' }}
-                            >
-                                <div className="previousQuestionButton">
-                                    <Button
-                                        onClick={previousQuestion}
-                                        variant="contained"
-                                        disabled={Number(currentQuestion?.question.id) <= 1}
-                                    >
-                                        Question précédente
-                                    </Button>
-                                </div>
-                                <div className="nextQuestionButton">
-                                    <Button
-                                        onClick={nextQuestion}
-                                        variant="contained"
-                                        disabled={
-                                            Number(currentQuestion?.question.id) >=
-                                            quizQuestions.length
-                                        }
-                                    >
-                                        Prochaine question
-                                    </Button>
-                                </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;
+}