import React from "react"; // next imports import { useRouter } from "next/router"; // react-hook-form import { Controller, useForm } from "react-hook-form"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // icons import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; // ui import { DangerButton, Input, SecondaryButton } from "components/ui"; // fetch-keys import { PROJECTS_LIST } from "constants/fetch-keys"; // mobx react lite import { observer } from "mobx-react-lite"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; import { RootStore } from "store/root"; // hooks import useToast from "hooks/use-toast"; import useUser from "hooks/use-user"; import useProjects from "hooks/use-projects"; // types import { IProject } from "types"; type FormData = { projectName: string; confirmLeave: string; }; const defaultValues: FormData = { projectName: "", confirmLeave: "", }; export const ConfirmProjectLeaveModal: React.FC = observer(() => { const router = useRouter(); const { workspaceSlug } = router.query; const store: RootStore = useMobxStore(); const { project } = store; const { user } = useUser(); const { mutateProjects } = useProjects(); const { setToastAlert } = useToast(); const { control, formState: { isSubmitting }, handleSubmit, reset, watch, } = useForm({ defaultValues }); const handleClose = () => { project.handleProjectLeaveModal(null); reset({ ...defaultValues }); }; const onSubmit = async (data: any) => { if (data) { if (data.projectName === project?.projectLeaveDetails?.name) { if (data.confirmLeave === "Leave Project") { return project .leaveProject( project.projectLeaveDetails.workspaceSlug.toString(), project.projectLeaveDetails.id.toString(), user ) .then((res) => { mutateProjects(); handleClose(); router.push(`/${workspaceSlug}/projects`); }) .catch((err) => { setToastAlert({ type: "error", title: "Error!", message: "Something went wrong please try again later.", }); }); } else { setToastAlert({ type: "error", title: "Error!", message: "Please confirm leaving the project by typing the 'Leave Project'.", }); } } else { setToastAlert({ type: "error", title: "Error!", message: "Please enter the project name as shown in the description.", }); } } else { setToastAlert({ type: "error", title: "Error!", message: "Please fill all fields.", }); } }; return (

Leave Project

Are you sure you want to leave the project - {` "${project?.projectLeaveDetails?.name}" `} ? All of the issues associated with you will become inaccessible.

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

( )} />

To confirm, type{" "} Leave Project below:

( )} />
Cancel {isSubmitting ? "Leaving..." : "Leave Project"}
); });