import React, { useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // services import issuesService from "services/issues.service"; // hooks import useToast from "hooks/use-toast"; // ui import { SecondaryButton, DangerButton } from "components/ui"; // icons import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; // helper import { getFileName } from "helpers/attachment.helper"; // types import type { IIssueAttachment } from "types"; // fetch-keys import { ISSUE_ATTACHMENTS } from "constants/fetch-keys"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; data: IIssueAttachment | null; }; export const DeleteAttachmentModal: React.FC = ({ isOpen, setIsOpen, data }) => { const [isDeleteLoading, setIsDeleteLoading] = useState(false); const router = useRouter(); const { workspaceSlug, projectId, issueId } = router.query; const { setToastAlert } = useToast(); const handleClose = () => { setIsOpen(false); setIsDeleteLoading(false); }; const handleDeletion = async (assetId: string) => { setIsDeleteLoading(true); if (!workspaceSlug || !projectId || !data) return; mutate(ISSUE_ATTACHMENTS(issueId as string)); await issuesService .deleteIssueAttachment( workspaceSlug as string, projectId as string, issueId as string, assetId as string ) .then((res) => { mutate(ISSUE_ATTACHMENTS(issueId as string)); setToastAlert({ type: "success", title: "Success!", message: "File removed successfully.", }); handleClose(); }) .catch((err) => { setToastAlert({ type: "error", title: "error!", message: "Something went wrong please try again.", }); setIsDeleteLoading(false); }); }; return ( data && (
Delete Attachment

Are you sure you want to delete attachment-{" "} {getFileName(data.attributes.name)}? This attachment will be permanently removed. This action cannot be undone.

Cancel handleDeletion(data.id)} loading={isDeleteLoading}> {isDeleteLoading ? "Deleting..." : "Delete"}
) ); };