gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[BUG] Le progrès des étudiants n'est pas sauvegardé lorsqu'ils quittent et reviennent dans le quiz.

Browse source 
Fixes #296
This commit is contained in:
JubaAzul 2025-03-24 16:33:26 -04:00
parent 182402e621
commit e2c4bb0722
2 changed files with 136 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx
View file

@ -293,4 +293,74 @@ 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();
});
});
});

76
client/src/pages/Teacher/ManageRoom/ManageRoom.tsx
View file

@ -29,9 +29,9 @@ import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
const ManageRoom: React.FC = () => {
const navigate = useNavigate();
const [socket, setSocket] = useState<Socket | null>(null);
const [students, setStudents] = useState<StudentType[]>([]);
const [allStudents, setAllStudents] = useState<StudentType[]>([]);
const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>();
const [connectedStudents, setConnectedStudents] = useState<StudentType[]>([]);
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');
@ -46,8 +46,8 @@ const ManageRoom: React.FC = () => {
useEffect(() => {
if (newlyConnectedUser) {
console.log(`Handling newly connected user: ${newlyConnectedUser.name}`);
setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
setAllStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
setConnectedStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
setTotalStudents((prevStudents) => [...prevStudents, newlyConnectedUser]);
// only send nextQuestion if the quiz has started
if (!quizStarted) {
@ -98,7 +98,7 @@ const ManageRoom: React.FC = () => {
return () => {
disconnectWebSocket();
};
}, [roomName, navigate]);
}, [roomName, navigate]);
useEffect(() => {
if (quizId) {
@ -135,8 +135,8 @@ const ManageRoom: React.FC = () => {
setSocket(null);
setQuizQuestions(undefined);
setCurrentQuestion(undefined);
setStudents(new Array<StudentType>());
setAllStudents(new Array<StudentType>());
setConnectedStudents(new Array<StudentType>());
setTotalStudents(new Array<StudentType>());
}
};
@ -181,7 +181,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);
@ -202,7 +202,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);
@ -222,14 +222,14 @@ const ManageRoom: React.FC = () => {
console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`);
return ans.idQuestion === idQuestion
? {
...ans,
answer,
isCorrect: checkIfIsCorrect(
answer,
idQuestion,
quizQuestions!
)
}
...ans,
answer,
isCorrect: checkIfIsCorrect(
answer,
idQuestion,
quizQuestions!
)
}
: ans;
});
} else {
@ -249,7 +249,7 @@ const ManageRoom: React.FC = () => {
}
return updatedStudents;
});
setAllStudents((prevStudents) => {
setTotalStudents((prevStudents) => {
let foundStudent = false;
const updatedStudents = prevStudents.map((student) => {
console.log(`Comparing ${student.id} to ${idUser}`);
@ -264,14 +264,14 @@ const ManageRoom: React.FC = () => {
console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`);
return ans.idQuestion === idQuestion
? {
...ans,
answer,
isCorrect: checkIfIsCorrect(
answer,
idQuestion,
quizQuestions!
)
}
...ans,
answer,
isCorrect: checkIfIsCorrect(
answer,
idQuestion,
quizQuestions!
)
}
: ans;
});
} else {
@ -304,10 +304,12 @@ const ManageRoom: React.FC = () => {
if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
setCurrentQuestion(quizQuestions[nextQuestionIndex]);
webSocketService.nextQuestion({roomName: formattedRoomName,
questions: quizQuestions,
questionIndex: nextQuestionIndex,
isLaunch: false});
webSocketService.nextQuestion({
roomName: formattedRoomName,
questions: quizQuestions,
questionIndex: nextQuestionIndex,
isLaunch: false
});
};
const previousQuestion = () => {
@ -317,7 +319,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 = () => {
@ -345,7 +347,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 = () => {
@ -382,7 +384,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 });
}
}
};
@ -496,7 +498,7 @@ const ManageRoom: React.FC = () => {
style={{ display: "flex", justifyContent: "flex-end" }}
>
<GroupIcon style={{ marginRight: '5px' }} />
{students.length}/60
{connectedStudents.length}/60
</div>
)}
</div>
@ -542,7 +544,7 @@ const ManageRoom: React.FC = () => {
socket={socket}
questions={quizQuestions}
showSelectedQuestion={showSelectedQuestion}
students={allStudents}
students={totalStudents}
></LiveResultsComponent>
</div>
</div>
@ -578,7 +580,7 @@ const ManageRoom: React.FC = () => {
</div>
) : (
<StudentWaitPage
students={students}
students={connectedStudents}
launchQuiz={launchQuiz}
setQuizMode={setQuizMode}
/>