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

View file

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