ajouter nom de la salle à la navigation manage-room

This commit is contained in:
C. Fuhrman 2025-02-26 14:38:36 -05:00
parent 2c3c6eed90
commit cf1a5ae4a0
3 changed files with 27 additions and 11 deletions

View file

@ -52,7 +52,7 @@ function App() {
<Route path="/teacher/dashboard" element={<Dashboard />} /> <Route path="/teacher/dashboard" element={<Dashboard />} />
<Route path="/teacher/share/:id" element={<Share />} /> <Route path="/teacher/share/:id" element={<Share />} />
<Route path="/teacher/editor-quiz/:id" element={<QuizForm />} /> <Route path="/teacher/editor-quiz/:id" element={<QuizForm />} />
<Route path="/teacher/manage-room/:id" element={<ManageRoom />} /> <Route path="/teacher/manage-room/:quizId/:roomName" element={<ManageRoom />} />
{/* Pages espace étudiant */} {/* Pages espace étudiant */}
<Route path="/student/join-room" element={<JoinRoom />} /> <Route path="/student/join-room" element={<JoinRoom />} />

View file

@ -367,7 +367,12 @@ const Dashboard: React.FC = () => {
}; };
const handleLancerQuiz = (quiz: QuizType) => { const handleLancerQuiz = (quiz: QuizType) => {
navigate(`/teacher/manage-room/${quiz._id}`); if (selectedRoom) {
navigate(`/teacher/manage-room/${quiz._id}/${selectedRoom.title}`);
} else {
const randomSixDigit = Math.floor(100000 + Math.random() * 900000);
navigate(`/teacher/manage-room/${quiz._id}/${randomSixDigit}`);
}
}; };
const handleShareQuiz = async (quiz: QuizType) => { const handleShareQuiz = async (quiz: QuizType) => {

View file

@ -25,12 +25,13 @@ import ApiService from '../../../services/ApiService';
import { QuestionType } from 'src/Types/QuestionType'; import { QuestionType } from 'src/Types/QuestionType';
import { useRooms } from '../ManageRoom/RoomContext'; import { useRooms } from '../ManageRoom/RoomContext';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
// import { use } from 'marked';
const ManageRoom: React.FC = () => { const ManageRoom: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [socket, setSocket] = useState<Socket | null>(null); const [socket, setSocket] = useState<Socket | null>(null);
const [students, setStudents] = useState<StudentType[]>([]); const [students, setStudents] = useState<StudentType[]>([]);
const quizId = useParams<{ id: string }>(); const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>();
const [quizQuestions, setQuizQuestions] = useState<QuestionType[] | undefined>(); const [quizQuestions, setQuizQuestions] = useState<QuestionType[] | undefined>();
const [quiz, setQuiz] = useState<QuizType | null>(null); const [quiz, setQuiz] = useState<QuizType | null>(null);
const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher'); const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher');
@ -39,7 +40,16 @@ const ManageRoom: React.FC = () => {
const [quizStarted, setQuizStarted] = useState(false); const [quizStarted, setQuizStarted] = useState(false);
const { selectedRoom } = useRooms(); const { selectedRoom } = useRooms();
const [roomName, setRoomName] = useState<string>(selectedRoom?.title || ''); useEffect(() => {
// verify that roomName argument is not null
if (!roomName || !quizId) {
window.alert(
`Une erreur est survenue.\n La salle ou le quiz n'a pas été spécifié.\nVeuillez réessayer plus tard.`
);
console.error('Room or Quiz not found for name:', roomName);
navigate('/teacher/dashboard');
}
}, [roomName, navigate]);
useEffect(() => { useEffect(() => {
if (selectedRoom && !socket) { if (selectedRoom && !socket) {
@ -59,15 +69,15 @@ const ManageRoom: React.FC = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
if (quizId.id) { if (quizId) {
const fetchquiz = async () => { const fetchquiz = async () => {
const quiz = await ApiService.getQuiz(quizId.id as string); const quiz = await ApiService.getQuiz(quizId);
if (!quiz) { if (!quiz) {
window.alert( window.alert(
`Une erreur est survenue.\n Le quiz ${quizId.id} n'a pas été trouvé\nVeuillez réessayer plus tard` `Une erreur est survenue.\n Le quiz ${quizId} n'a pas été trouvé\nVeuillez réessayer plus tard`
); );
console.error('Quiz not found for id:', quizId.id); console.error('Quiz not found for id:', quizId);
navigate('/teacher/dashboard'); navigate('/teacher/dashboard');
return; return;
} }
@ -87,9 +97,9 @@ const ManageRoom: React.FC = () => {
fetchquiz(); fetchquiz();
} else { } else {
window.alert( window.alert(
`Une erreur est survenue.\n Le quiz ${quizId.id} n'a pas été trouvé\nVeuillez réessayer plus tard` `Une erreur est survenue.\n Le quiz ${quizId} n'a pas été trouvé\nVeuillez réessayer plus tard`
); );
console.error('Quiz not found for id:', quizId.id); console.error('Quiz not found for id:', quizId);
navigate('/teacher/dashboard'); navigate('/teacher/dashboard');
return; return;
} }
@ -125,7 +135,8 @@ const ManageRoom: React.FC = () => {
}); });
socket.on('create-success', (roomName: string) => { socket.on('create-success', (roomName: string) => {
setRoomName(roomName); console.log(`Room created: ${roomName}`);
// setRoomName(roomName);
}); });
socket.on('user-joined', (student: StudentType) => { socket.on('user-joined', (student: StudentType) => {