state and prop confusion in ManageRoom and LiveResults.

client/src/components/LiveResults/LiveResults.tsx

@@ -72,6 +72,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
     useEffect(() => {
         // Update the students state when the initialStudents prop changes
         setStudents(connectedStudents);
+        console.log(`useEffect: connectedStudents: ${JSON.stringify(connectedStudents)}`);
     }, [connectedStudents]);
 
 
@@ -87,19 +88,56 @@ const LiveResults: React.FC<LiveResultsProps> = ({ socket, questions, showSelect
                 answer: string | number | boolean;
                 idQuestion: number;
             }) => {
-                // make a copy of the students array so we can update it
+                console.log(`Received answer from ${idUser} for question ${idQuestion}: ${answer}`);
-                const updatedStudents = [...students];
 
-                const student = updatedStudents.find((student) => student.id === idUser);
+                // print the list of current student names
-                if (!student) {
+                console.log('Current students:');
-                    // this is a bad thing if an answer was submitted but the student isn't in the list
+                students.forEach((student) => {
-                    return;
+                    console.log(student.name);
+                });
+
+                // Update the students state using the functional form of setStudents
+                setStudents((prevStudents) => {
+                    let foundStudent = false;
+                    const updatedStudents = prevStudents.map((student) => {
+                        if (student.id === idUser) {
+                            foundStudent = true;
+                            const updatedAnswers = student.answers.map((ans) => {
+                                const newAnswer: Answer = { answer, isCorrect: checkIfIsCorrect(answer, idQuestion), idQuestion };
+                                console.log(`Updating answer for ${student.name} for question ${idQuestion} to ${answer}`);
+                                return (ans.idQuestion === idQuestion ? { ...ans, newAnswer } : ans);
                             }
+                            );
+                            return { ...student, answers: updatedAnswers };
+                        }
+                        return student;
+                    });
+                    if (!foundStudent) {
+                        console.log(`Student ${idUser} not found in the list of students in LiveResults`);
+                    }
+                    return updatedStudents;
+                });
 
-                const isCorrect = checkIfIsCorrect(answer, idQuestion);
+
-                const newAnswer: Answer = { answer, isCorrect, idQuestion };
+                // make a copy of the students array so we can update it
-                student.answers.push(newAnswer);
+                // const updatedStudents = [...students];
-                setStudents(updatedStudents); // update the state
+
+                // const student = updatedStudents.find((student) => student.id === idUser);
+                // if (!student) {
+                //     // this is a bad thing if an answer was submitted but the student isn't in the list
+                //     console.log(`Student ${idUser} not found in the list of students in LiveResults`);
+                //     return;
+                // }
+
+                // const isCorrect = checkIfIsCorrect(answer, idQuestion);
+                // const newAnswer: Answer = { answer, isCorrect, idQuestion };
+                // student.answers.push(newAnswer);
+                // // print list of answers
+                // console.log('Answers:');
+                // student.answers.forEach((answer) => {
+                //     console.log(answer.answer);
+                // });
+                // setStudents(updatedStudents); // update the state
             };
 
             socket.on('submit-answer', submitAnswerHandler);

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

@@ -97,6 +97,7 @@ const ManageRoom: React.FC = () => {
             console.log('Error creating room.');
         });
         socket.on('user-joined', (student: StudentType) => {
+            console.log(`Student joined: name = ${student.name}, id = ${student.id}`);
     
             setStudents((prevStudents) => [...prevStudents, student]);
 
@@ -111,6 +112,7 @@ const ManageRoom: React.FC = () => {
             setSocket(null);
         });
         socket.on('user-disconnected', (userId: string) => {
+            console.log(`Student left: id = ${userId}`);
             setStudents((prevUsers) => prevUsers.filter((user) => user.id !== userId));
         });
         setSocket(socket);