change behavior of return button

This commit is contained in:
Philippe 2025-03-26 15:11:16 -04:00
parent 6e91ab311d
commit 2695716e18
2 changed files with 39 additions and 32 deletions

View file

@ -1,65 +1,69 @@
// GoBackButton.tsx import React, { useState } from 'react';
import React from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import ConfirmDialog from '../ConfirmDialog/ConfirmDialog';
import { Button } from '@mui/material'; import { Button } from '@mui/material';
import { ChevronLeft } from '@mui/icons-material'; import { ChevronLeft } from '@mui/icons-material';
import ApiService from '../../services/ApiService'; // Assuming this is where save logic lives
interface Props { interface Props {
onReturn?: () => void; onReturn?: () => void;
askConfirm?: boolean; quizTitle?: string; // Quiz title to save
message?: string; quizContent?: string[]; // Quiz content to save
quizFolder?: string; // Folder ID to save
quizId?: string; // Quiz ID for updates (optional)
isNewQuiz?: boolean; // Flag to determine create or update
} }
const ReturnButton: React.FC<Props> = ({ const ReturnButton: React.FC<Props> = ({
askConfirm = false, onReturn,
message = 'Êtes-vous sûr de vouloir quitter la page ?', quizTitle = '',
onReturn quizContent = [],
quizFolder = '',
quizId,
isNewQuiz = false,
}) => { }) => {
const navigate = useNavigate(); const navigate = useNavigate();
const [showDialog, setShowDialog] = useState(false); const [isSaving, setIsSaving] = useState(false); // Optional: to show saving state
const handleOnReturnButtonClick = () => { const handleOnReturnButtonClick = async () => {
if (askConfirm) { setIsSaving(true);
setShowDialog(true); try {
} else { // Automatically save the quiz
if (isNewQuiz && quizTitle && quizFolder) {
await ApiService.createQuiz(quizTitle, quizContent, quizFolder);
} else if (quizId && quizTitle) {
await ApiService.updateQuiz(quizId, quizTitle, quizContent);
}
// If no title/folder, proceed without saving (optional behavior)
handleOnReturn(); handleOnReturn();
} catch (error) {
console.error('Error saving quiz on return:', error);
// Still navigate even if save fails, to avoid trapping the user
handleOnReturn();
} finally {
setIsSaving(false);
} }
}; };
const handleConfirm = () => {
setShowDialog(false);
handleOnReturn();
};
const handleOnReturn = () => { const handleOnReturn = () => {
if (onReturn) { if (onReturn) {
onReturn(); onReturn();
} else { } else {
navigate(-1); navigate('/teacher/dashboard'); // Navigate to dashboard instead of -1
} }
}; };
return ( return (
<div className='returnButton'> <div className="returnButton">
<Button <Button
variant="text" variant="text"
startIcon={<ChevronLeft />} startIcon={<ChevronLeft />}
onClick={handleOnReturnButtonClick} onClick={handleOnReturnButtonClick}
color="primary" color="primary"
sx={{ marginLeft: '-0.5rem', fontSize: 16 }} sx={{ marginLeft: '-0.5rem', fontSize: 16 }}
disabled={isSaving} // Disable button while saving
> >
Retour {isSaving ? 'Enregistrement...' : 'Retour'}
</Button> </Button>
<ConfirmDialog
open={showDialog}
title="Confirmer"
message={message}
onConfirm={handleConfirm}
onCancel={() => setShowDialog(false)}
buttonOrderType="warning"
/>
</div> </div>
); );
}; };

View file

@ -225,8 +225,11 @@ const QuizForm: React.FC = () => {
<div className='editHeader'> <div className='editHeader'>
<ReturnButton <ReturnButton
askConfirm quizTitle={quizTitle}
message={`Êtes-vous sûr de vouloir quitter l'éditeur sans sauvegarder le questionnaire?`} quizContent={filteredValue}
quizFolder={selectedFolder}
quizId={quiz?._id}
isNewQuiz={isNewQuiz}
/> />
<div className='title'>Éditeur de Quiz</div> <div className='title'>Éditeur de Quiz</div>