import React, { useState } from "react"; import { useRouter } from "next/router"; import { mutate } from "swr"; // headless ui import { Dialog, Transition } from "@headlessui/react"; // services import viewsService from "services/views.service"; // hooks import useToast from "hooks/use-toast"; // ui import { DangerButton, SecondaryButton } from "components/ui"; // icons import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; // types import type { IView } from "types"; // fetch-keys import { VIEWS_LIST } from "constants/fetch-keys"; type Props = { isOpen: boolean; setIsOpen: React.Dispatch>; data: IView | null; }; export const DeleteViewModal: React.FC = ({ isOpen, data, setIsOpen }) => { const [isDeleteLoading, setIsDeleteLoading] = useState(false); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const { setToastAlert } = useToast(); const handleClose = () => { setIsOpen(false); setIsDeleteLoading(false); }; const handleDeletion = async () => { setIsDeleteLoading(true); if (!workspaceSlug || !data || !projectId) return; await viewsService .deleteView(workspaceSlug as string, projectId as string, data.id) .then(() => { mutate(VIEWS_LIST(projectId as string), (views) => views?.filter((view) => view.id !== data.id) ); handleClose(); setToastAlert({ type: "success", title: "Success!", message: "View deleted successfully.", }); }) .catch(() => { setToastAlert({ type: "error", title: "Error!", message: "View could not be deleted. Please try again.", }); }) .finally(() => { setIsDeleteLoading(false); }); }; return (
Delete View

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

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