107 lines
2.2 KiB
TypeScript
107 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Button,
|
|
Center,
|
|
Flex,
|
|
MenuItem,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
useDisclosure,
|
|
Text,
|
|
useToast,
|
|
} from '@chakra-ui/react';
|
|
import { useClient } from 'urql';
|
|
import { FaRegTrashAlt } from 'react-icons/fa';
|
|
import { DeleteWebhook } from '../graphql/mutation';
|
|
import { capitalizeFirstLetter } from '../utils';
|
|
|
|
interface deleteWebhookModalInputPropTypes {
|
|
webhookId: string;
|
|
eventName: string;
|
|
fetchWebookData: Function;
|
|
}
|
|
|
|
const DeleteWebhookModal = ({
|
|
webhookId,
|
|
eventName,
|
|
fetchWebookData,
|
|
}: deleteWebhookModalInputPropTypes) => {
|
|
const client = useClient();
|
|
const toast = useToast();
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
|
|
const deleteHandler = async () => {
|
|
const res = await client
|
|
.mutation(DeleteWebhook, { params: { id: webhookId } })
|
|
.toPromise();
|
|
if (res.error) {
|
|
toast({
|
|
title: capitalizeFirstLetter(res.error.message),
|
|
isClosable: true,
|
|
status: 'error',
|
|
position: 'bottom-right',
|
|
});
|
|
|
|
return;
|
|
} else if (res.data?._delete_webhook) {
|
|
toast({
|
|
title: capitalizeFirstLetter(res.data?._delete_webhook.message),
|
|
isClosable: true,
|
|
status: 'success',
|
|
position: 'bottom-right',
|
|
});
|
|
}
|
|
onClose();
|
|
fetchWebookData();
|
|
};
|
|
return (
|
|
<>
|
|
<MenuItem onClick={onOpen}>Delete</MenuItem>
|
|
<Modal isOpen={isOpen} onClose={onClose}>
|
|
<ModalOverlay />
|
|
<ModalContent>
|
|
<ModalHeader>Delete Webhook</ModalHeader>
|
|
<ModalCloseButton />
|
|
<ModalBody>
|
|
<Text fontSize="md">Are you sure?</Text>
|
|
<Flex
|
|
padding="5%"
|
|
marginTop="5%"
|
|
marginBottom="2%"
|
|
border="1px solid #ff7875"
|
|
borderRadius="5px"
|
|
flexDirection="column"
|
|
>
|
|
<Text fontSize="sm">
|
|
Webhook for event <b>{eventName}</b> will be deleted
|
|
permanently!
|
|
</Text>
|
|
</Flex>
|
|
</ModalBody>
|
|
|
|
<ModalFooter>
|
|
<Button
|
|
leftIcon={<FaRegTrashAlt />}
|
|
colorScheme="red"
|
|
variant="solid"
|
|
onClick={deleteHandler}
|
|
isDisabled={false}
|
|
>
|
|
<Center h="100%" pt="5%">
|
|
Delete
|
|
</Center>
|
|
</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DeleteWebhookModal;
|