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 issueServices from "services/issues.service"; // hooks import useIssuesView from "hooks/use-issues-view"; import useCalendarIssuesView from "hooks/use-calendar-issues-view"; import useToast from "hooks/use-toast"; import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view"; // icons import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; // ui import { SecondaryButton, DangerButton } from "components/ui"; // types import type { IIssue, ICurrentUserResponse, ISubIssueResponse } from "types"; // fetch-keys import { CYCLE_ISSUES_WITH_PARAMS, MODULE_ISSUES_WITH_PARAMS, PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS, PROJECT_ISSUES_LIST_WITH_PARAMS, SUB_ISSUES, VIEW_ISSUES, } from "constants/fetch-keys"; type Props = { isOpen: boolean; handleClose: () => void; data: IIssue | null; user: ICurrentUserResponse | undefined; onSubmit?: () => Promise; }; export const DeleteIssueModal: React.FC = ({ isOpen, handleClose, data, user, onSubmit, }) => { const [isDeleteLoading, setIsDeleteLoading] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, cycleId, moduleId, viewId, issueId } = router.query; const isArchivedIssues = router.pathname.includes("archived-issues"); const { issueView, params } = useIssuesView(); const { params: calendarParams } = useCalendarIssuesView(); const { params: spreadsheetParams } = useSpreadsheetIssuesView(); const { setToastAlert } = useToast(); useEffect(() => { setIsDeleteLoading(false); }, [isOpen]); const onClose = () => { setIsDeleteLoading(false); handleClose(); }; const handleDeletion = async () => { if (!workspaceSlug || !data) return; setIsDeleteLoading(true); await issueServices .deleteIssue(workspaceSlug as string, data.project, data.id, user) .then(() => { if (issueView === "calendar") { const calendarFetchKey = cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams) : moduleId ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams) : viewId ? VIEW_ISSUES(viewId.toString(), calendarParams) : PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, calendarParams); mutate( calendarFetchKey, (prevData) => (prevData ?? []).filter((p) => p.id !== data.id), false ); } else if (issueView === "spreadsheet") { const spreadsheetFetchKey = cycleId ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams) : moduleId ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams) : viewId ? VIEW_ISSUES(viewId.toString(), spreadsheetParams) : PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, spreadsheetParams); if (data.parent) { mutate( SUB_ISSUES(data.parent.toString()), (prevData) => { if (!prevData) return prevData; const updatedArray = (prevData.sub_issues ?? []).filter((i) => i.id !== data.id); return { ...prevData, sub_issues: updatedArray, }; }, false ); mutate(spreadsheetFetchKey); } else { mutate( spreadsheetFetchKey, (prevData) => (prevData ?? []).filter((p) => p.id !== data.id), false ); } } else { if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)); else if (moduleId) mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)); else mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, params)); } if (onSubmit) onSubmit(); handleClose(); setToastAlert({ title: "Success", type: "success", message: "Issue deleted successfully", }); if (issueId) router.back(); }) .catch((error) => { console.log(error); setIsDeleteLoading(false); }); if (onSubmit) await onSubmit(); }; const handleArchivedIssueDeletion = async () => { setIsDeleteLoading(true); if (!workspaceSlug || !projectId || !data) return; await issueServices .deleteArchivedIssue(workspaceSlug as string, projectId as string, data.id) .then(() => { mutate(PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS(projectId as string, params)); handleClose(); setToastAlert({ title: "Success", type: "success", message: "Issue deleted successfully", }); router.back(); }) .catch((error) => { console.log(error); setIsDeleteLoading(false); }); }; const handleIssueDelete = () => isArchivedIssues ? handleArchivedIssueDeletion() : handleDeletion(); return (

Delete Issue

Are you sure you want to delete issue{" "} {data?.project_detail.identifier}-{data?.sequence_id} {""}? All of the data related to the issue will be permanently removed. This action cannot be undone.

Cancel {isDeleteLoading ? "Deleting..." : "Delete Issue"}
); };