Merge e2c4bb0722 into ee7a7a0544

client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx

@@ -75,36 +75,36 @@ describe('ManageRoom', () => {
                 </MemoryRouter>
             );
         });
-    
+
         await act(async () => {
             const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
             createSuccessCallback('Test Room');
         });
-    
+
         await waitFor(() => {
             expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id');
         });
-    
+
         const launchButton = screen.getByText('Lancer');
         fireEvent.click(launchButton);
-    
+
         const rythmeButton = screen.getByText('Rythme du professeur');
         fireEvent.click(rythmeButton);
-    
+
         const secondLaunchButton = screen.getAllByText('Lancer');
         fireEvent.click(secondLaunchButton[1]);
-    
+
         await waitFor(() => {
             expect(screen.getByText('Test Quiz')).toBeInTheDocument();
-    
+
             const roomHeader = document.querySelector('h1');
             expect(roomHeader).toHaveTextContent('Salle : TEST ROOM');
-    
+
             expect(screen.getByText('0/60')).toBeInTheDocument();
             expect(screen.getByText('Question 1/2')).toBeInTheDocument();
         });
     });
-    
+
     test('handles create-success event', async () => {
         await act(async () => {
             render(
@@ -171,30 +171,30 @@ describe('ManageRoom', () => {
                 </MemoryRouter>
             );
         });
-    
+
         await act(async () => {
             const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
             createSuccessCallback('Test Room');
         });
-    
+
         fireEvent.click(screen.getByText('Lancer'));
         fireEvent.click(screen.getByText('Rythme du professeur'));
         fireEvent.click(screen.getAllByText('Lancer')[1]);
-    
+
         await waitFor(() => {
             screen.debug();
         });
-    
+
         const nextQuestionButton = await screen.findByRole('button', { name: /Prochaine question/i });
         expect(nextQuestionButton).toBeInTheDocument();
-    
+
         fireEvent.click(nextQuestionButton);
-    
+
         await waitFor(() => {
             expect(screen.getByText('Question 2/2')).toBeInTheDocument();
         });
     });
-    
+
     test('handles disconnect', async () => {
         await act(async () => {
             render(
@@ -230,38 +230,38 @@ describe('ManageRoom', () => {
                 </MemoryRouter>
             );
         });
-    
+
         await act(async () => {
             const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
             createSuccessCallback('Test Room');
         });
-    
+
         const launchButton = screen.getByText('Lancer');
         fireEvent.click(launchButton);
-    
+
         const rythmeButton = screen.getByText('Rythme du professeur');
         fireEvent.click(rythmeButton);
-    
+
         const secondLaunchButton = screen.getAllByText('Lancer');
         fireEvent.click(secondLaunchButton[1]);
-    
+
         await act(async () => {
             const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1];
             userJoinedCallback(mockStudents[0]);
         });
-    
+
         await act(async () => {
             const submitAnswerCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'submit-answer-room')[1];
             submitAnswerCallback(mockAnswerData);
         });
-    
+
         await waitFor(() => {
             // console.info(consoleSpy.mock.calls);
             expect(consoleSpy).toHaveBeenCalledWith(
                 'Received answer from Student 1 for question 1: Answer1'
             );
         });
-    
+
         consoleSpy.mockRestore();
     });
 
@@ -294,5 +294,75 @@ describe('ManageRoom', () => {
             expect(screen.queryByText('Student 1')).not.toBeInTheDocument();
         });
     });
+
+    test('handles user joined and leaves but name still seeable', async () => {
+        await act(async () => {
+            render(
+                <MemoryRouter>
+                    <ManageRoom />
+                </MemoryRouter>
+            );
+        });
+
+        await act(async () => {
+            const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1];
+            createSuccessCallback('Test Room');
+        });
+
+        await act(async () => {
+            const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1];
+            userJoinedCallback(mockStudents[0]);
+        });
+        await act(async () => {
+            const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1];
+            userJoinedCallback(mockStudents[1]);
+        });
+
+        await waitFor(() => {
+            expect(screen.getByText('Student 1')).toBeInTheDocument();
+
+        });
+        await waitFor(() => {
+            expect(screen.getByText('Student 2')).toBeInTheDocument();
+
+        });
+
+        const launchButton = screen.getByText('Lancer');
+        fireEvent.click(launchButton);
+
+        const rythmeButton = screen.getByText('Rythme du professeur');
+        fireEvent.click(rythmeButton);
+
+        const secondLaunchButton = screen.getAllByText('Lancer');
+        fireEvent.click(secondLaunchButton[1]);
+
+        await waitFor(() => {
+            expect(screen.getByText('2/60')).toBeInTheDocument();
+
+        });
+
+        await act(async () => {
+            const userDisconnectedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-disconnected')[1];
+            userDisconnectedCallback(mockStudents[1].id);
+        });
+
+
+        await waitFor(() => {
+            expect(screen.getByText('Résultats du quiz')).toBeInTheDocument();
+
+        });
+        const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
+
+        // Toggle the display of usernames back
+        fireEvent.click(toggleUsernamesSwitch);
+
+        expect(screen.getByText('Student 1')).toBeInTheDocument();
+
+        expect(screen.getByText('Student 2')).toBeInTheDocument();
+
+        await waitFor(() => {
+            expect(screen.getByText('1/60')).toBeInTheDocument();
+        });
+    });
 });
 

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

@@ -24,8 +24,9 @@ import { checkIfIsCorrect } from './useRooms';
 const ManageRoom: React.FC = () => {
     const navigate = useNavigate();
     const [socket, setSocket] = useState<Socket | null>(null);
-    const [students, setStudents] = useState<StudentType[]>([]);
+    const [connectedStudents, setConnectedStudents] = useState<StudentType[]>([]);
-    const { quizId = '', roomName = '' }  = useParams<{ quizId: string, roomName: string }>();
+    const [totalStudents, setTotalStudents] = useState<StudentType[]>([]);
+    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');
@@ -40,14 +41,15 @@ const ManageRoom: React.FC = () => {
     useEffect(() => {
         if (newlyConnectedUser) {
             console.log(`Handling newly connected user: ${newlyConnectedUser.name}`);
-            setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
+            setConnectedStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
-    
+            setTotalStudents((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,
@@ -60,7 +62,7 @@ const ManageRoom: React.FC = () => {
             } else {
                 console.error('Invalid quiz mode:', quizMode);
             }
-    
+
             // Reset the newly connected user state
             setNewlyConnectedUser(null);
         }
@@ -91,7 +93,7 @@ const ManageRoom: React.FC = () => {
         return () => {
             disconnectWebSocket();
         };
-      }, [roomName, navigate]);
+    }, [roomName, navigate]);
 
     useEffect(() => {
         if (quizId) {
@@ -128,7 +130,9 @@ const ManageRoom: React.FC = () => {
             setSocket(null);
             setQuizQuestions(undefined);
             setCurrentQuestion(undefined);
-            setStudents(new Array<StudentType>());
+            setConnectedStudents(new Array<StudentType>());
+            setTotalStudents(new Array<StudentType>());
+
         }
     };
 
@@ -172,7 +176,7 @@ const ManageRoom: React.FC = () => {
 
         socket.on('user-disconnected', (userId: string) => {
             console.log(`Student left: id = ${userId}`);
-            setStudents((prevUsers) => prevUsers.filter((user) => user.id !== userId));
+            setConnectedStudents((prevUsers) => prevUsers.filter((user) => user.id !== userId));
         });
 
         setSocket(socket);
@@ -193,7 +197,7 @@ const ManageRoom: React.FC = () => {
                 }
 
                 // Update the students state using the functional form of setStudents
-                setStudents((prevStudents) => {
+                setConnectedStudents((prevStudents) => {
                     console.log('Current students:');
                     prevStudents.forEach((student) => {
                         console.log(student.name);
@@ -213,14 +217,56 @@ 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 {
+                                const newAnswer = {
+                                    idQuestion,
+                                    answer,
+                                    isCorrect: checkIfIsCorrect(answer, idQuestion, quizQuestions!)
+                                };
+                                updatedAnswers = [...student.answers, newAnswer];
+                            }
+                            return { ...student, answers: updatedAnswers };
+                        }
+                        return student;
+                    });
+                    if (!foundStudent) {
+                        console.log(`Student ${username} not found in the list.`);
+                    }
+                    return updatedStudents;
+                });
+                setTotalStudents((prevStudents) => {
+                    let foundStudent = false;
+                    const updatedStudents = prevStudents.map((student) => {
+                        console.log(`Comparing ${student.id} to ${idUser}`);
+                        if (student.id === idUser) {
+                            foundStudent = true;
+                            const existingAnswer = student.answers.find(
+                                (ans) => ans.idQuestion === idQuestion
+                            );
+                            let updatedAnswers: Answer[] = [];
+                            if (existingAnswer) {
+                                updatedAnswers = student.answers.map((ans) => {
+                                    console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`);
+                                    return ans.idQuestion === idQuestion
+                                        ? {
+                                            ...ans,
+                                            answer,
+                                            isCorrect: checkIfIsCorrect(
+                                                answer,
+                                                idQuestion,
+                                                quizQuestions!
+                                            )
+                                        }
                                         : ans;
                                 });
                             } else {
@@ -253,10 +299,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 = () => {
@@ -266,7 +314,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 = () => {
@@ -294,7 +342,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 = () => {
@@ -331,7 +379,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 });
             }
         }
     };
@@ -388,7 +436,7 @@ const ManageRoom: React.FC = () => {
                             style={{ display: "flex", justifyContent: "flex-end" }}
                         >
                             <GroupIcon style={{ marginRight: '5px' }} />
-                            {students.length}/60
+                            {connectedStudents.length}/60
                         </div>
                     )}
                 </div>
@@ -425,7 +473,7 @@ const ManageRoom: React.FC = () => {
                                     <QuestionDisplay
                                         showAnswer={false}
                                         question={currentQuestion?.question as Question}
-                                        
+
                                     />
                                 )}
 
@@ -434,7 +482,7 @@ const ManageRoom: React.FC = () => {
                                     socket={socket}
                                     questions={quizQuestions}
                                     showSelectedQuestion={showSelectedQuestion}
-                                    students={students}
+                                    students={totalStudents}
                                 ></LiveResultsComponent>
                             </div>
                         </div>
@@ -470,7 +518,7 @@ const ManageRoom: React.FC = () => {
                     </div>
                 ) : (
                     <StudentWaitPage
-                        students={students}
+                        students={connectedStudents}
                         launchQuiz={launchQuiz}
                         setQuizMode={setQuizMode}
                     />