import React, { useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // services import IntegrationService from "services/integration"; // hooks import useToast from "hooks/use-toast"; // ui import { DangerButton, Input, SecondaryButton } from "components/ui"; // icons import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; // types import { ICurrentUserResponse, IImporterService } from "types"; // fetch-keys import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys"; type Props = { isOpen: boolean; handleClose: () => void; data: IImporterService | null; user: ICurrentUserResponse | undefined; }; export const DeleteImportModal: React.FC = ({ isOpen, handleClose, data, user }) => { const [deleteLoading, setDeleteLoading] = useState(false); const [confirmDeleteImport, setConfirmDeleteImport] = useState(false); const router = useRouter(); const { workspaceSlug } = router.query; const { setToastAlert } = useToast(); const handleDeletion = () => { if (!workspaceSlug || !data) return; setDeleteLoading(true); mutate( IMPORTER_SERVICES_LIST(workspaceSlug as string), (prevData) => (prevData ?? []).filter((i) => i.id !== data.id), false ); IntegrationService.deleteImporterService(workspaceSlug as string, data.service, data.id, user) .catch(() => setToastAlert({ type: "error", title: "Error!", message: "Something went wrong. Please try again.", }) ) .finally(() => { setDeleteLoading(false); handleClose(); }); }; if (!data) return <>; return (

Delete Project

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

To confirm, type{" "} delete import below:

{ if (e.target.value === "delete import") setConfirmDeleteImport(true); else setConfirmDeleteImport(false); }} placeholder="Enter 'delete import'" />
Cancel {deleteLoading ? "Deleting..." : "Delete Project"}
); };