From fd9f04d116bedf00c18a2165a1c5f732a465d67f Mon Sep 17 00:00:00 2001 From: NouhailaAater Date: Fri, 21 Feb 2025 20:15:32 -0500 Subject: [PATCH] Correction --- .../StudentWaitPage/StudentWaitPage.tsx | 12 +- .../src/pages/Student/JoinRoom/JoinRoom.tsx | 10 +- .../pages/Teacher/ManageRoom/ManageRoom.tsx | 211 ++++++++++-------- client/src/services/ApiService.tsx | 2 +- client/src/services/WebsocketService.tsx | 4 +- server/socket/socket.js | 38 +++- 6 files changed, 164 insertions(+), 113 deletions(-) diff --git a/client/src/components/StudentWaitPage/StudentWaitPage.tsx b/client/src/components/StudentWaitPage/StudentWaitPage.tsx index 9989b71..c87596a 100644 --- a/client/src/components/StudentWaitPage/StudentWaitPage.tsx +++ b/client/src/components/StudentWaitPage/StudentWaitPage.tsx @@ -10,22 +10,28 @@ interface Props { students: StudentType[]; launchQuiz: () => void; setQuizMode: (mode: 'student' | 'teacher') => void; + setIsRoomSelectionVisible: (visible: boolean) => void; } -const StudentWaitPage: React.FC = ({ students, launchQuiz, setQuizMode }) => { +const StudentWaitPage: React.FC = ({ students, launchQuiz, setQuizMode, setIsRoomSelectionVisible }) => { const [isDialogOpen, setIsDialogOpen] = useState(false); + const handleLaunchClick = () => { + setIsDialogOpen(true); + setIsRoomSelectionVisible(false); + }; + return (
diff --git a/client/src/pages/Student/JoinRoom/JoinRoom.tsx b/client/src/pages/Student/JoinRoom/JoinRoom.tsx index f0ac8d7..1e4f6c9 100644 --- a/client/src/pages/Student/JoinRoom/JoinRoom.tsx +++ b/client/src/pages/Student/JoinRoom/JoinRoom.tsx @@ -60,6 +60,8 @@ const JoinRoom: React.FC = () => { console.log('Failed to join the room.'); setConnectionError(`Erreur de connexion : ${message}`); setIsConnecting(false); + setRoomName(''); // Réinitialise le nom de la salle + setUsername(''); // Réinitialise le nom d'utilisateur }); socket.on('connect_error', (error) => { switch (error.message) { @@ -96,6 +98,8 @@ const JoinRoom: React.FC = () => { } if (username && roomName) { + console.log(`Tentative de rejoindre : ${roomName}, utilisateur : ${username}`); + webSocketService.joinRoom(roomName, username); } }; @@ -160,12 +164,12 @@ const JoinRoom: React.FC = () => { error={connectionError}> setRoomName(e.target.value)} - placeholder="Numéro de la salle" + placeholder="Nom de la salle" sx={{ marginBottom: '1rem' }} fullWidth /> diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 20ece36..a6fe94e 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -43,34 +43,35 @@ const ManageRoom: React.FC = () => { const [selectedRoomId, setSelectedRoomId] = useState(''); const [openDialog, setOpenDialog] = useState(false); const [newRoomTitle, setNewRoomTitle] = useState(''); + const [isRoomSelectionVisible, setIsRoomSelectionVisible] = useState(true); useEffect(() => { const fetchData = async () => { if (!ApiService.isLoggedIn()) { navigate('/teacher/login'); return; - } else { - const userRooms = await ApiService.getUserRooms(); - - setRooms(userRooms as RoomType[]); } + + const userRooms = await ApiService.getUserRooms(); + setRooms(userRooms as RoomType[]); }; fetchData(); }, []); const handleSelectRoom = (event: React.ChangeEvent) => { - setSelectedRoomId(event.target.value); + const roomId = event.target.value; + setSelectedRoomId(roomId); + + const selectedRoom = rooms.find((room) => room._id === roomId); + setRoomName(selectedRoom?.title || ''); }; useEffect(() => { - if (selectedRoomId && rooms.length > 0) { - const selectedRoom = rooms.find((room) => room._id === selectedRoomId); - setRoomName(selectedRoom ? selectedRoom.title : ''); - } else { - setRoomName(''); + if (rooms.length > 0 && !selectedRoomId) { + setSelectedRoomId(rooms[0]._id); } - }, [selectedRoomId, rooms]); + }, [rooms]); const handleDialogClose = () => { setOpenDialog(false); @@ -81,16 +82,21 @@ const ManageRoom: React.FC = () => { }; const handleSubmitRoom = async () => { try { - if (newRoomTitle) { - await ApiService.createRoom(newRoomTitle); - const userRooms = await ApiService.getUserRooms(); - setRooms(userRooms as RoomType[]); - const newlyCreatedRoom = userRooms[userRooms.length - 1] as RoomType; - setSelectedRoomId(newlyCreatedRoom._id); + if (newRoomTitle.trim()) { + const createdRoom = await ApiService.createRoom(newRoomTitle); + + const updatedRooms = await ApiService.getUserRooms(); + setRooms(updatedRooms as RoomType[]); + + if (createdRoom && createdRoom) { + setSelectedRoomId(createdRoom); + setRoomName(createdRoom); + } setOpenDialog(false); + setNewRoomTitle(''); } } catch (error) { - console.error('Error creating Room:', error); + console.error('Error creating Room::', error); } }; @@ -131,6 +137,25 @@ const ManageRoom: React.FC = () => { } }, [quizId]); + useEffect(() => { + if (rooms.length > 0 && !selectedRoomId) { + setSelectedRoomId(rooms[0].title); + } + }, [rooms]); + + useEffect(() => { + if (!newRoomTitle && !selectedRoomId) { + setConnectingError('Aucun nom de salle sélectionné ou créé.'); + } + }, [newRoomTitle, selectedRoomId]); + + useEffect(() => { + if (selectedRoomId && selectedRoomId.trim() !== '') { + console.log(`Sélection d'une nouvelle salle: ${selectedRoomId}`); + createWebSocketRoom(); + } + }, [selectedRoomId]); + const disconnectWebSocket = () => { if (socket) { webSocketService.endQuiz(roomName); @@ -146,42 +171,34 @@ const ManageRoom: React.FC = () => { const createWebSocketRoom = () => { console.log('Creating WebSocket room...'); setConnectingError(''); + + const targetRoom = rooms.find((room) => room._id === selectedRoomId) || rooms[0]; + if (!targetRoom) { + setConnectingError('Aucune salle disponible'); + return; + } + + console.log('Création WebSocket pour:', targetRoom.title); const socket = webSocketService.connect(ENV_VARIABLES.VITE_BACKEND_SOCKET_URL); socket.on('connect', () => { - webSocketService.createRoom(selectedRoomId); - console.error('socket.on(connect:)'); + webSocketService.createRoom(targetRoom.title); + setRoomName(targetRoom.title); }); socket.on('connect_error', (error) => { setConnectingError('Erreur lors de la connexion... Veuillez réessayer'); console.error('ManageRoom: WebSocket connection error:', error); }); + socket.on('create-success', (roomName: string) => { + console.log('create-success', roomName); setRoomName(roomName); - console.error('create-success', roomName); }); + socket.on('create-failure', () => { 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]); - - if (quizMode === 'teacher') { - webSocketService.nextQuestion(roomName, currentQuestion); - } else if (quizMode === 'student') { - webSocketService.launchStudentModeQuiz(roomName, quizQuestions); - } - }); - socket.on('join-failure', (message) => { - setConnectingError(message); - setSocket(null); - }); - socket.on('user-disconnected', (userId: string) => { - console.log(`Student left: id = ${userId}`); - setStudents((prevUsers) => prevUsers.filter((user) => user.id !== userId)); - }); setSocket(socket); }; @@ -477,64 +494,69 @@ const ManageRoom: React.FC = () => {
-
-
- - - {rooms.map((room: RoomType) => ( - - ))} - -
+ {isRoomSelectionVisible && ( +
+
+ + + {rooms.map((room: RoomType) => ( + + ))} + +
-
- -
+ +
- {/* Dialog pour créer une salle */} - - Créer une nouvelle salle - - setNewRoomTitle(e.target.value)} - /> - - - - - - -
+ {/* Dialog pour créer une salle */} + + Créer une nouvelle salle + + setNewRoomTitle(e.target.value)} + /> + + + + + + + + )} {/* the following breaks the css (if 'room' classes are nested) */}
@@ -612,6 +634,7 @@ const ManageRoom: React.FC = () => { students={students} launchQuiz={launchQuiz} setQuizMode={setQuizMode} + setIsRoomSelectionVisible={setIsRoomSelectionVisible} /> )}
diff --git a/client/src/services/ApiService.tsx b/client/src/services/ApiService.tsx index ffae47a..8a8bbf2 100644 --- a/client/src/services/ApiService.tsx +++ b/client/src/services/ApiService.tsx @@ -391,7 +391,7 @@ class ApiService { if (result.status !== 200) { throw new Error(`L'obtention des salles utilisateur a échoué. Status: ${result.status}`); } - + return result.data.data.map((room: RoomType) => ({ _id: room._id, title: room.title })); } catch (error) { diff --git a/client/src/services/WebsocketService.tsx b/client/src/services/WebsocketService.tsx index c99ac6c..be1d32f 100644 --- a/client/src/services/WebsocketService.tsx +++ b/client/src/services/WebsocketService.tsx @@ -1,4 +1,3 @@ -// WebSocketService.tsx import { io, Socket } from 'socket.io-client'; // Must (manually) sync these types to server/socket/socket.js @@ -48,8 +47,7 @@ class WebSocketService { createRoom(roomName: string) { if (this.socket) { - const nameToSend = roomName; - this.socket.emit('create-room', nameToSend); + this.socket.emit('create-room', roomName); } } diff --git a/server/socket/socket.js b/server/socket/socket.js index fc21632..f5afc82 100644 --- a/server/socket/socket.js +++ b/server/socket/socket.js @@ -24,29 +24,51 @@ const setupWebsocket = (io) => { ); socket.on("create-room", (sentRoomName) => { + console.log(`Demande de création de salle avec le nom : ${sentRoomName}`); + if (sentRoomName) { const roomName = sentRoomName.toUpperCase(); if (!io.sockets.adapter.rooms.get(roomName)) { socket.join(roomName); socket.emit("create-success", roomName); + console.log(`Salle créée avec succès : ${roomName}`); } else { - socket.emit("create-failure"); + socket.emit("create-failure", `La salle ${roomName} existe déjà.`); + console.log(`Échec de création : ${roomName} existe déjà`); } } else { const roomName = generateRoomName(); + console.log(`Génération d'une salle aléatoire : ${roomName}`); if (!io.sockets.adapter.rooms.get(roomName)) { socket.join(roomName); socket.emit("create-success", roomName); + console.log(`Salle créée avec succès : ${roomName}`); } else { - socket.emit("create-failure"); + socket.emit( + "create-failure", + "Échec de création de la salle aléatoire" + ); + console.log(`Échec de création de la salle aléatoire`); } } + console.log( + "Salles existantes après la tentative de création : ", + Array.from(io.sockets.adapter.rooms.keys()) + ); }); socket.on("join-room", ({ enteredRoomName, username }) => { - if (io.sockets.adapter.rooms.has(enteredRoomName)) { - const clientsInRoom = - io.sockets.adapter.rooms.get(enteredRoomName).size; + const roomToCheck = enteredRoomName.toUpperCase(); + console.log( + `Requête de connexion : salle="${roomToCheck}", utilisateur="${username}"` + ); + console.log( + "Salles existantes :", + Array.from(io.sockets.adapter.rooms.keys()) + ); + + if (io.sockets.adapter.rooms.has(roomToCheck)) { + const clientsInRoom = io.sockets.adapter.rooms.get(roomToCheck).size; if (clientsInRoom <= MAX_USERS_PER_ROOM) { const newStudent = { @@ -54,10 +76,8 @@ const setupWebsocket = (io) => { name: username, answers: [], }; - socket.join(enteredRoomName); - socket - .to(enteredRoomName) - .emit("user-joined", newStudent); + socket.join(roomToCheck); + socket.to(roomToCheck).emit("user-joined", newStudent); socket.emit("join-success"); } else { socket.emit("join-failure", "La salle est remplie");