Bouton Copier link

This commit is contained in:
NouhailaAater 2025-03-18 16:36:16 -04:00
parent dc7fb82d97
commit a4d36389c7

View file

@ -34,6 +34,7 @@ import {
} from '@mui/material'; } from '@mui/material';
import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom';
import { QRCodeCanvas } from 'qrcode.react'; import { QRCodeCanvas } from 'qrcode.react';
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
const ManageRoom: React.FC = () => { const ManageRoom: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
@ -50,6 +51,14 @@ const ManageRoom: React.FC = () => {
const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null); const [newlyConnectedUser, setNewlyConnectedUser] = useState<StudentType | null>(null);
const roomUrl = `${window.location.origin}/student/join-room?roomName=${roomName}`; const roomUrl = `${window.location.origin}/student/join-room?roomName=${roomName}`;
const [showQrModal, setShowQrModal] = useState(false); const [showQrModal, setShowQrModal] = useState(false);
const [copied, setCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(roomUrl).then(() => {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
});
};
// Handle the newly connected user in useEffect, because it needs state info // Handle the newly connected user in useEffect, because it needs state info
// not available in the socket.on() callback // not available in the socket.on() callback
@ -503,6 +512,14 @@ const ManageRoom: React.FC = () => {
<div style={{ wordBreak: 'break-all', textAlign: 'center' }}> <div style={{ wordBreak: 'break-all', textAlign: 'center' }}>
<h3>URL de participation :</h3> <h3>URL de participation :</h3>
<p>{roomUrl}</p> <p>{roomUrl}</p>
<Button
variant="contained"
startIcon={<ContentCopyIcon />}
onClick={handleCopy}
style={{ marginTop: '10px' }}
>
{copied ? "Copié !" : "Copier le lien"}
</Button>
</div> </div>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>