update: webhooks

This commit is contained in:
anik-ghosh-au7 2022-07-17 14:42:46 +05:30
parent 1c61fcc17a
commit 94066d4408
2 changed files with 33 additions and 27 deletions

View File

@ -14,6 +14,7 @@ import {
ModalFooter, ModalFooter,
ModalHeader, ModalHeader,
ModalOverlay, ModalOverlay,
Select,
Switch, Switch,
Text, Text,
useDisclosure, useDisclosure,
@ -22,6 +23,7 @@ import {
import { FaMinusCircle, FaPlus } from 'react-icons/fa'; import { FaMinusCircle, FaPlus } from 'react-icons/fa';
import { useClient } from 'urql'; import { useClient } from 'urql';
import { import {
webhookEventNames,
ArrayInputOperations, ArrayInputOperations,
WebhookInputDataFields, WebhookInputDataFields,
WebhookInputHeaderFields, WebhookInputHeaderFields,
@ -33,6 +35,7 @@ import {
validateURI, validateURI,
} from '../utils'; } from '../utils';
import { AddWebhook, EditWebhook } from '../graphql/mutation'; import { AddWebhook, EditWebhook } from '../graphql/mutation';
import { rest } from 'lodash';
interface headersDataType { interface headersDataType {
[WebhookInputHeaderFields.KEY]: string; [WebhookInputHeaderFields.KEY]: string;
@ -76,20 +79,18 @@ interface webhookDataType {
} }
interface validatorDataType { interface validatorDataType {
[WebhookInputDataFields.EVENT_NAME]: boolean;
[WebhookInputDataFields.ENDPOINT]: boolean; [WebhookInputDataFields.ENDPOINT]: boolean;
[WebhookInputDataFields.HEADERS]: headersValidatorDataType[]; [WebhookInputDataFields.HEADERS]: headersValidatorDataType[];
} }
const initWebhookData: webhookDataType = { const initWebhookData: webhookDataType = {
[WebhookInputDataFields.EVENT_NAME]: '', [WebhookInputDataFields.EVENT_NAME]: webhookEventNames.USER_LOGIN,
[WebhookInputDataFields.ENDPOINT]: '', [WebhookInputDataFields.ENDPOINT]: '',
[WebhookInputDataFields.ENABLED]: false, [WebhookInputDataFields.ENABLED]: false,
[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }], [WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
}; };
const initWebhookValidatorData: validatorDataType = { const initWebhookValidatorData: validatorDataType = {
[WebhookInputDataFields.EVENT_NAME]: true,
[WebhookInputDataFields.ENDPOINT]: true, [WebhookInputDataFields.ENDPOINT]: true,
[WebhookInputDataFields.HEADERS]: [{ ...initHeadersValidatorData }], [WebhookInputDataFields.HEADERS]: [{ ...initHeadersValidatorData }],
}; };
@ -118,10 +119,6 @@ const UpdateWebhookModal = ({
switch (inputType) { switch (inputType) {
case WebhookInputDataFields.EVENT_NAME: case WebhookInputDataFields.EVENT_NAME:
setWebhook({ ...webhook, [inputType]: value }); setWebhook({ ...webhook, [inputType]: value });
setValidator({
...validator,
[WebhookInputDataFields.EVENT_NAME]: validateEventName(value),
});
break; break;
case WebhookInputDataFields.ENDPOINT: case WebhookInputDataFields.ENDPOINT:
setWebhook({ ...webhook, [inputType]: value }); setWebhook({ ...webhook, [inputType]: value });
@ -210,7 +207,6 @@ const UpdateWebhookModal = ({
!loading && !loading &&
webhook[WebhookInputDataFields.EVENT_NAME].length > 0 && webhook[WebhookInputDataFields.EVENT_NAME].length > 0 &&
webhook[WebhookInputDataFields.ENDPOINT].length > 0 && webhook[WebhookInputDataFields.ENDPOINT].length > 0 &&
validator[WebhookInputDataFields.EVENT_NAME] &&
validator[WebhookInputDataFields.ENDPOINT] && validator[WebhookInputDataFields.ENDPOINT] &&
!validator[WebhookInputDataFields.HEADERS].some( !validator[WebhookInputDataFields.HEADERS].some(
(headerData: headersValidatorDataType) => (headerData: headersValidatorDataType) =>
@ -256,6 +252,7 @@ const UpdateWebhookModal = ({
} else { } else {
res = await client.mutation(AddWebhook, { params }).toPromise(); res = await client.mutation(AddWebhook, { params }).toPromise();
} }
setLoading(false);
if (res.error) { if (res.error) {
toast({ toast({
title: capitalizeFirstLetter(res.error.message), title: capitalizeFirstLetter(res.error.message),
@ -263,8 +260,6 @@ const UpdateWebhookModal = ({
status: 'error', status: 'error',
position: 'bottom-right', position: 'bottom-right',
}); });
setLoading(false);
return;
} else if (res.data?._add_webhook || res.data?._update_webhook) { } else if (res.data?._add_webhook || res.data?._update_webhook) {
toast({ toast({
title: capitalizeFirstLetter( title: capitalizeFirstLetter(
@ -280,9 +275,8 @@ const UpdateWebhookModal = ({
}); });
setValidator({ ...initWebhookValidatorData }); setValidator({ ...initWebhookValidatorData });
fetchWebookData(); fetchWebookData();
return;
} }
setLoading(false); view === UpdateWebhookModalViews.ADD && onClose();
}; };
useEffect(() => { useEffect(() => {
if ( if (
@ -361,21 +355,24 @@ const UpdateWebhookModal = ({
> >
<Flex flex="1">Event Name</Flex> <Flex flex="1">Event Name</Flex>
<Flex flex="3"> <Flex flex="3">
<InputGroup size="md"> <Select
<Input size="md"
pr="4.5rem" value={webhook[WebhookInputDataFields.EVENT_NAME]}
type="text" onChange={(e) =>
placeholder="user.login" inputChangehandler(
value={webhook[WebhookInputDataFields.EVENT_NAME]} WebhookInputDataFields.EVENT_NAME,
isInvalid={!validator[WebhookInputDataFields.EVENT_NAME]} e.currentTarget.value
onChange={(e) => )
inputChangehandler( }
WebhookInputDataFields.EVENT_NAME, >
e.currentTarget.value {Object.entries(webhookEventNames).map(
) ([key, value]: any) => (
} <option value={value} key={key}>
/> {key}
</InputGroup> </option>
)
)}
</Select>
</Flex> </Flex>
</Flex> </Flex>
<Flex <Flex

View File

@ -173,3 +173,12 @@ export enum UpdateWebhookModalViews {
} }
export const pageLimits: number[] = [5, 10, 15]; export const pageLimits: number[] = [5, 10, 15];
export const webhookEventNames = {
USER_SIGNUP: 'user.signup',
USER_CREATED: 'user.created',
USER_LOGIN: 'user.login',
USER_DELETED: 'user.deleted',
USER_ACCESS_ENABLED: 'user.access_enabled',
USER_ACCESS_REVOKED: 'user.access_revoked',
};