plane/web/components/web-hooks/delete-webhook-modal.tsx
Aaryan Khandelwal 20e7dc68e6
[WEB-1127] style: create and delete modals' consistency (#4345)
* style: update modals typography, alignment

* style: made the modal separator full width

* style: delete modals consistency

* style: update the remaining delete modals

* chore: delete modal secondary button text

* style: update the remaining create modals

* chore: update cancel button text

* chore: created modal core

* style: modals responsiveness
2024-05-07 12:44:36 +05:30

70 lines
1.7 KiB
TypeScript

import React, { FC, useState } from "react";
import { useRouter } from "next/router";
// ui
import { TOAST_TYPE, setToast } from "@plane/ui";
// components
import { AlertModalCore } from "@/components/core";
// hooks
import { useWebhook } from "@/hooks/store";
interface IDeleteWebhook {
isOpen: boolean;
onClose: () => void;
}
export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
const { isOpen, onClose } = props;
// states
const [isDeleting, setIsDeleting] = useState(false);
// router
const router = useRouter();
// store hooks
const { removeWebhook } = useWebhook();
const { workspaceSlug, webhookId } = router.query;
const handleClose = () => {
onClose();
};
const handleDelete = async () => {
if (!workspaceSlug || !webhookId) return;
setIsDeleting(true);
removeWebhook(workspaceSlug.toString(), webhookId.toString())
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: "Success!",
message: "Webhook deleted successfully.",
});
router.replace(`/${workspaceSlug}/settings/webhooks/`);
})
.catch((error) =>
setToast({
type: TOAST_TYPE.ERROR,
title: "Error!",
message: error?.error ?? "Something went wrong. Please try again.",
})
)
.finally(() => setIsDeleting(false));
};
return (
<AlertModalCore
handleClose={handleClose}
handleSubmit={handleDelete}
isDeleting={isDeleting}
isOpen={isOpen}
title="Delete webhook"
content={
<>
Are you sure you want to delete this webhook? Future events will not be delivered to this webhook. This action
cannot be undone.
</>
}
/>
);
};