119 lines
4.7 KiB
TypeScript
119 lines
4.7 KiB
TypeScript
import Button from "@/components/Low/Button";
|
|
import { Module } from "@/interfaces";
|
|
import useExamEditorStore from "@/stores/examEditor";
|
|
import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from "@headlessui/react";
|
|
import { capitalize } from "lodash";
|
|
import React, { Fragment, useCallback, useEffect, useState } from "react";
|
|
|
|
interface Props {
|
|
module: Module;
|
|
isOpen: boolean;
|
|
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
setNumberOfLevelParts: React.Dispatch<React.SetStateAction<number>>;
|
|
}
|
|
|
|
const ResetModule: React.FC<Props> = ({ module, isOpen, setIsOpen, setNumberOfLevelParts }) => {
|
|
const [isClosing, setIsClosing] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
const { dispatch } = useExamEditorStore();
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setMounted(true);
|
|
}
|
|
}, [isOpen]);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen && mounted) {
|
|
const timer = setTimeout(() => {
|
|
setMounted(false);
|
|
setIsClosing(false);
|
|
}, 300);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [isOpen, mounted]);
|
|
|
|
const blockMultipleClicksClose = useCallback(() => {
|
|
if (isClosing) return;
|
|
setIsClosing(true);
|
|
setIsOpen(!isOpen);
|
|
|
|
const timer = setTimeout(() => {
|
|
setIsClosing(false);
|
|
}, 300);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [isClosing, setIsOpen, isOpen]);
|
|
|
|
if (!mounted && !isOpen) return null;
|
|
|
|
const handleResetModule = () => {
|
|
dispatch({ type: 'RESET_MODULE', payload: { module } });
|
|
setIsOpen(false);
|
|
if (module === "level") {
|
|
setNumberOfLevelParts(1);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Transition
|
|
show={isOpen}
|
|
as={Fragment}
|
|
beforeEnter={() => setIsClosing(false)}
|
|
beforeLeave={() => setIsClosing(true)}
|
|
afterLeave={() => {
|
|
setIsClosing(false);
|
|
setMounted(false);
|
|
}}
|
|
>
|
|
<Dialog onClose={() => blockMultipleClicksClose()} className="relative z-50">
|
|
<TransitionChild
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0"
|
|
enterTo="opacity-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100"
|
|
leaveTo="opacity-0">
|
|
<div className="fixed inset-0 bg-black/30" />
|
|
</TransitionChild>
|
|
|
|
<TransitionChild
|
|
as={Fragment}
|
|
enter="ease-out duration-300"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="ease-in duration-200"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95">
|
|
<div className="fixed inset-0 flex items-center justify-center p-4">
|
|
<DialogPanel className={`bg-ielts-${module}-light w-full max-w-xl h-fit p-8 rounded-xl flex flex-col gap-4`}>
|
|
<DialogTitle className="flex font-bold text-xl justify-center text-gray-700"><span>Reset {capitalize(module)} Module</span></DialogTitle>
|
|
<div className="flex flex-col w-full mt-4 gap-6">
|
|
<div className="bg-gray-50 rounded-lg p-4">
|
|
<p className="text-gray-600">
|
|
Do you want to reset the {module} module?
|
|
</p>
|
|
<br/>
|
|
<p className="text-gray-600 font-bold">This will reset all the current data in the {module} module and cannot be undone.</p>
|
|
</div>
|
|
<div className="w-full flex justify-between mt-4 gap-8">
|
|
<Button color="purple" onClick={blockMultipleClicksClose} variant="outline" className="self-end w-full bg-white">
|
|
Cancel
|
|
</Button>
|
|
|
|
<Button color="purple" onClick={handleResetModule} variant="solid" className="self-end w-full">
|
|
Reset
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogPanel>
|
|
</div>
|
|
</TransitionChild>
|
|
</Dialog>
|
|
</Transition>
|
|
);
|
|
}
|
|
|
|
export default ResetModule;
|