ajout d'une nouvelle salle

This commit is contained in:
NouhailaAater 2025-02-20 01:37:25 -05:00
parent c3e56502d8
commit b42cbb3647

View file

@ -28,8 +28,7 @@ import QuestionDisplay from 'src/components/QuestionsDisplay/QuestionDisplay';
import ApiService from '../../../services/ApiService'; import ApiService from '../../../services/ApiService';
import { QuestionType } from 'src/Types/QuestionType'; import { QuestionType } from 'src/Types/QuestionType';
import { RoomType } from 'src/Types/RoomType'; import { RoomType } from 'src/Types/RoomType';
import { IconButton, Button, Tooltip, NativeSelect } from '@mui/material'; import { Button, Tooltip, NativeSelect } from '@mui/material';
import { Add } from '@mui/icons-material';
const ManageRoom: React.FC = () => { const ManageRoom: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -43,7 +42,7 @@ const ManageRoom: React.FC = () => {
const [connectingError, setConnectingError] = useState<string>(''); const [connectingError, setConnectingError] = useState<string>('');
const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined); const [currentQuestion, setCurrentQuestion] = useState<QuestionType | undefined>(undefined);
const [quizStarted, setQuizStarted] = useState(false); const [quizStarted, setQuizStarted] = useState(false);
const [rooms, setFolders] = useState<RoomType[]>([]); const [rooms, setRooms] = useState<RoomType[]>([]);
const [selectedRoomId, setSelectedRoomId] = useState<string>(''); const [selectedRoomId, setSelectedRoomId] = useState<string>('');
useEffect(() => { useEffect(() => {
@ -52,9 +51,9 @@ const ManageRoom: React.FC = () => {
navigate('/teacher/login'); navigate('/teacher/login');
return; return;
} else { } else {
const userFolders = await ApiService.getUserRooms(); const userRooms = await ApiService.getUserRooms();
setFolders(userFolders as RoomType[]); setRooms(userRooms as RoomType[]);
} }
}; };
@ -65,6 +64,31 @@ const ManageRoom: React.FC = () => {
setSelectedRoomId(event.target.value); setSelectedRoomId(event.target.value);
}; };
useEffect(() => {
// Mettre à jour roomName quand une salle est sélectionnée
if (selectedRoomId && rooms.length > 0) {
const selectedRoom = rooms.find((room) => room._id === selectedRoomId);
setRoomName(selectedRoom ? selectedRoom.title : '');
} else {
setRoomName(''); // Réinitialiser si aucune salle sélectionnée
}
}, [selectedRoomId, rooms]); // Déclenché quand la sélection ou la liste change
const handleCreateRoom = async () => {
try {
const roomTitle = prompt('Veuillez saisir le titre de la nouvelle salle');
if (roomTitle) {
await ApiService.createRoom(roomTitle);
const userRooms = await ApiService.getUserRooms();
setRooms(userRooms as RoomType[]);
const newlyCreatedRoom = userRooms[userRooms.length - 1] as RoomType;
setSelectedRoomId(newlyCreatedRoom._id);
}
} catch (error) {
console.error('Error creating Room:', error);
}
};
useEffect(() => { useEffect(() => {
if (quizId.id) { if (quizId.id) {
const fetchquiz = async () => { const fetchquiz = async () => {
@ -459,7 +483,7 @@ const ManageRoom: React.FC = () => {
> >
<option value=""> Sélectionner une salle </option> <option value=""> Sélectionner une salle </option>
{rooms.map((room: RoomType) => ( {rooms.map((room: RoomType) => (
<option value={room.title} key={room.title}> <option value={room._id} key={room._id}>
{' '} {' '}
{room.title}{' '} {room.title}{' '}
</option> </option>
@ -467,11 +491,21 @@ const ManageRoom: React.FC = () => {
</NativeSelect> </NativeSelect>
</div> </div>
<div className="actions"> <div className="actions" style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Tooltip title="Créer la salle" placement="top"> <Tooltip title="Ajouter une nouvelle salle" placement="top">
<IconButton color="primary" onClick={createWebSocketRoom}> <Button
<Add /> variant="contained"
</IconButton> color="primary"
onClick={handleCreateRoom}
style={{
width: 'auto',
marginLeft: '30px',
height: '40px',
padding: '0 20px'
}}
>
Ajouter une nouvelle salle
</Button>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>