61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { useState } from "react";
|
|
import { useMutation } from "react-query";
|
|
|
|
import { Dialog } from "@components/Dialog";
|
|
import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
|
|
import { ButtonBaseProps } from "@components/ui/Button";
|
|
|
|
export default function DisconnectIntegration(props: {
|
|
/** Integration credential id */
|
|
id: number;
|
|
render: (renderProps: ButtonBaseProps) => JSX.Element;
|
|
onOpenChange: (isOpen: boolean) => void | Promise<void>;
|
|
}) {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const mutation = useMutation(
|
|
async () => {
|
|
const res = await fetch("/api/integrations", {
|
|
method: "DELETE",
|
|
body: JSON.stringify({ id: props.id }),
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
if (!res.ok) {
|
|
throw new Error("Something went wrong");
|
|
}
|
|
},
|
|
{
|
|
async onSettled() {
|
|
await props.onOpenChange(modalOpen);
|
|
},
|
|
onSuccess() {
|
|
setModalOpen(false);
|
|
},
|
|
}
|
|
);
|
|
return (
|
|
<>
|
|
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
|
<ConfirmationDialogContent
|
|
variety="danger"
|
|
title="Disconnect Integration"
|
|
confirmBtnText="Yes, disconnect integration"
|
|
cancelBtnText="Cancel"
|
|
onConfirm={() => {
|
|
mutation.mutate();
|
|
}}>
|
|
Are you sure you want to disconnect this integration?
|
|
</ConfirmationDialogContent>
|
|
</Dialog>
|
|
{props.render({
|
|
onClick() {
|
|
setModalOpen(true);
|
|
},
|
|
disabled: modalOpen,
|
|
loading: mutation.isLoading,
|
|
})}
|
|
</>
|
|
);
|
|
}
|