import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // services import projectService from "services/project.service"; // hooks import useToast from "hooks/use-toast"; // icons import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; // ui import { DangerButton, Input, SecondaryButton } from "components/ui"; // types import type { ICurrentUserResponse, IProject } from "types"; // fetch-keys import { PROJECTS_LIST } from "constants/fetch-keys"; type TConfirmProjectDeletionProps = { isOpen: boolean; onClose: () => void; onSuccess?: () => void; data: IProject | null; user: ICurrentUserResponse | undefined; }; export const DeleteProjectModal: React.FC = ({ isOpen, data, onClose, onSuccess, user, }) => { const [isDeleteLoading, setIsDeleteLoading] = useState(false); const [confirmProjectName, setConfirmProjectName] = useState(""); const [confirmDeleteMyProject, setConfirmDeleteMyProject] = useState(false); const [selectedProject, setSelectedProject] = useState(null); const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const canDelete = confirmProjectName === data?.name && confirmDeleteMyProject; useEffect(() => { if (data) setSelectedProject(data); else { const timer = setTimeout(() => { setSelectedProject(null); clearTimeout(timer); }, 300); } }, [data]); const handleClose = () => { setIsDeleteLoading(false); const timer = setTimeout(() => { setConfirmProjectName(""); setConfirmDeleteMyProject(false); clearTimeout(timer); }, 350); onClose(); }; const handleDeletion = async () => { if (!data || !workspaceSlug || !canDelete) return; setIsDeleteLoading(true); await projectService .deleteProject(workspaceSlug as string, data.id, user) .then(() => { handleClose(); mutate( PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }), (prevData) => prevData?.filter((project: IProject) => project.id !== data.id), false ); if (onSuccess) onSuccess(); }) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Something went wrong. Please try again later.", }) ) .finally(() => setIsDeleteLoading(false)); }; return (

Delete Project

Are you sure you want to delete project{" "} {selectedProject?.name}? All of the data related to the project will be permanently removed. This action cannot be undone

Enter the project name{" "} {selectedProject?.name} {" "} to continue:

{ setConfirmProjectName(e.target.value); }} name="projectName" />

To confirm, type{" "} delete my project{" "} below:

{ if (e.target.value === "delete my project") { setConfirmDeleteMyProject(true); } else { setConfirmDeleteMyProject(false); } }} name="typeDelete" />
Cancel {isDeleteLoading ? "Deleting..." : "Delete Project"}
); };