fix: TT-69
This commit is contained in:
anik-ghosh-au7
@@ -1,8 +1,109 @@
|
||||
import React from 'react';
|
||||
import { Box, Flex, Text } from '@chakra-ui/react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useClient } from 'urql';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
Flex,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
MenuList,
|
||||
NumberDecrementStepper,
|
||||
NumberIncrementStepper,
|
||||
NumberInput,
|
||||
NumberInputField,
|
||||
NumberInputStepper,
|
||||
Select,
|
||||
Spinner,
|
||||
Table,
|
||||
TableCaption,
|
||||
Tag,
|
||||
Tbody,
|
||||
Td,
|
||||
Text,
|
||||
Th,
|
||||
Thead,
|
||||
Tooltip,
|
||||
Tr,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
FaAngleDoubleLeft,
|
||||
FaAngleDoubleRight,
|
||||
FaAngleDown,
|
||||
FaAngleLeft,
|
||||
FaAngleRight,
|
||||
FaExclamationCircle,
|
||||
} from 'react-icons/fa';
|
||||
import AddWebhookModal from '../components/AddWebhookModal';
|
||||
import { pageLimits, WebhookInputDataFields } from '../constants';
|
||||
import { WebhooksDataQuery } from '../graphql/queries';
|
||||
|
||||
interface paginationPropTypes {
|
||||
limit: number;
|
||||
page: number;
|
||||
offset: number;
|
||||
total: number;
|
||||
maxPages: number;
|
||||
}
|
||||
|
||||
interface webhookDataTypes {
|
||||
[WebhookInputDataFields.ID]: string;
|
||||
[WebhookInputDataFields.EVENT_NAME]: string;
|
||||
[WebhookInputDataFields.ENDPOINT]: string;
|
||||
[WebhookInputDataFields.ENABLED]: boolean;
|
||||
[WebhookInputDataFields.HEADERS]?: Record<string, string>;
|
||||
}
|
||||
|
||||
const Webhooks = () => {
|
||||
const client = useClient();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [webhookData, setWebhookData] = useState<webhookDataTypes[]>([]);
|
||||
const [paginationProps, setPaginationProps] = useState<paginationPropTypes>({
|
||||
limit: 5,
|
||||
page: 1,
|
||||
offset: 0,
|
||||
total: 0,
|
||||
maxPages: 1,
|
||||
});
|
||||
const getMaxPages = (pagination: paginationPropTypes) => {
|
||||
const { limit, total } = pagination;
|
||||
if (total > 1) {
|
||||
return total % limit === 0
|
||||
? total / limit
|
||||
: parseInt(`${total / limit}`) + 1;
|
||||
} else return 1;
|
||||
};
|
||||
const fetchWebookData = async () => {
|
||||
setLoading(true);
|
||||
const res = await client.query(WebhooksDataQuery).toPromise();
|
||||
if (res.data?._webhooks) {
|
||||
const { pagination, webhooks } = res.data?._webhooks;
|
||||
const maxPages = getMaxPages(pagination);
|
||||
if (webhooks?.length) {
|
||||
setWebhookData(webhooks);
|
||||
setPaginationProps({ ...paginationProps, ...pagination, maxPages });
|
||||
} else {
|
||||
if (paginationProps.page !== 1) {
|
||||
setPaginationProps({
|
||||
...paginationProps,
|
||||
...pagination,
|
||||
maxPages,
|
||||
page: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchWebookData();
|
||||
}, []);
|
||||
const paginationHandler = (value: Record<string, number>) => {
|
||||
setPaginationProps({ ...paginationProps, ...value });
|
||||
};
|
||||
console.log('webhookData ==>> ', webhookData);
|
||||
return (
|
||||
<Box m="5" py="5" px="10" bg="white" rounded="md">
|
||||
<Flex margin="2% 0" justifyContent="space-between" alignItems="center">
|
||||
@@ -11,6 +112,218 @@ const Webhooks = () => {
|
||||
</Text>
|
||||
<AddWebhookModal />
|
||||
</Flex>
|
||||
{!loading ? (
|
||||
webhookData.length ? (
|
||||
<Table variant="simple">
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Event Name</Th>
|
||||
<Th>Endpoint</Th>
|
||||
<Th>Enabled</Th>
|
||||
<Th>Headers</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{webhookData.map((webhook: webhookDataTypes, index: number) => (
|
||||
<Tr
|
||||
key={webhook[WebhookInputDataFields.ID]}
|
||||
style={{ fontSize: 14 }}
|
||||
>
|
||||
<Td maxW="300">
|
||||
{webhook[WebhookInputDataFields.EVENT_NAME]}
|
||||
</Td>
|
||||
<Td>{webhook[WebhookInputDataFields.ENDPOINT]}</Td>
|
||||
<Td>
|
||||
<Tag
|
||||
size="sm"
|
||||
variant="outline"
|
||||
colorScheme={
|
||||
webhook[WebhookInputDataFields.ENABLED]
|
||||
? 'green'
|
||||
: 'yellow'
|
||||
}
|
||||
>
|
||||
{webhook[WebhookInputDataFields.ENABLED].toString()}
|
||||
</Tag>
|
||||
</Td>
|
||||
<Td>
|
||||
{
|
||||
Object.keys(webhook[WebhookInputDataFields.HEADERS] || {})
|
||||
?.length
|
||||
}
|
||||
</Td>
|
||||
<Td>
|
||||
<Menu>
|
||||
<MenuButton as={Button} variant="unstyled" size="sm">
|
||||
<Flex
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
>
|
||||
<Text fontSize="sm" fontWeight="light">
|
||||
Menu
|
||||
</Text>
|
||||
<FaAngleDown style={{ marginLeft: 10 }} />
|
||||
</Flex>
|
||||
</MenuButton>
|
||||
<MenuList>
|
||||
<MenuItem onClick={() => {}}>Edit</MenuItem>
|
||||
<MenuItem onClick={() => {}}>Delete</MenuItem>
|
||||
<MenuItem onClick={() => {}}>View Logs</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
{(paginationProps.maxPages > 1 || paginationProps.total >= 5) && (
|
||||
<TableCaption>
|
||||
<Flex
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
m="2% 0"
|
||||
>
|
||||
<Flex flex="1">
|
||||
<Tooltip label="First Page">
|
||||
<IconButton
|
||||
aria-label="icon button"
|
||||
onClick={() =>
|
||||
paginationHandler({
|
||||
page: 1,
|
||||
})
|
||||
}
|
||||
isDisabled={paginationProps.page <= 1}
|
||||
mr={4}
|
||||
icon={<FaAngleDoubleLeft />}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip label="Previous Page">
|
||||
<IconButton
|
||||
aria-label="icon button"
|
||||
onClick={() =>
|
||||
paginationHandler({
|
||||
page: paginationProps.page - 1,
|
||||
})
|
||||
}
|
||||
isDisabled={paginationProps.page <= 1}
|
||||
icon={<FaAngleLeft />}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
<Flex
|
||||
flex="8"
|
||||
justifyContent="space-evenly"
|
||||
alignItems="center"
|
||||
>
|
||||
<Text mr={8}>
|
||||
Page{' '}
|
||||
<Text fontWeight="bold" as="span">
|
||||
{paginationProps.page}
|
||||
</Text>{' '}
|
||||
of{' '}
|
||||
<Text fontWeight="bold" as="span">
|
||||
{paginationProps.maxPages}
|
||||
</Text>
|
||||
</Text>
|
||||
<Flex alignItems="center">
|
||||
<Text flexShrink="0">Go to page:</Text>{' '}
|
||||
<NumberInput
|
||||
ml={2}
|
||||
mr={8}
|
||||
w={28}
|
||||
min={1}
|
||||
max={paginationProps.maxPages}
|
||||
onChange={(value) =>
|
||||
paginationHandler({
|
||||
page: parseInt(value),
|
||||
})
|
||||
}
|
||||
value={paginationProps.page}
|
||||
>
|
||||
<NumberInputField />
|
||||
<NumberInputStepper>
|
||||
<NumberIncrementStepper />
|
||||
<NumberDecrementStepper />
|
||||
</NumberInputStepper>
|
||||
</NumberInput>
|
||||
</Flex>
|
||||
<Select
|
||||
w={32}
|
||||
value={paginationProps.limit}
|
||||
onChange={(e) =>
|
||||
paginationHandler({
|
||||
page: 1,
|
||||
limit: parseInt(e.target.value),
|
||||
})
|
||||
}
|
||||
>
|
||||
{pageLimits.map((pageSize) => (
|
||||
<option key={pageSize} value={pageSize}>
|
||||
Show {pageSize}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</Flex>
|
||||
<Flex flex="1">
|
||||
<Tooltip label="Next Page">
|
||||
<IconButton
|
||||
aria-label="icon button"
|
||||
onClick={() =>
|
||||
paginationHandler({
|
||||
page: paginationProps.page + 1,
|
||||
})
|
||||
}
|
||||
isDisabled={
|
||||
paginationProps.page >= paginationProps.maxPages
|
||||
}
|
||||
icon={<FaAngleRight />}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip label="Last Page">
|
||||
<IconButton
|
||||
aria-label="icon button"
|
||||
onClick={() =>
|
||||
paginationHandler({
|
||||
page: paginationProps.maxPages,
|
||||
})
|
||||
}
|
||||
isDisabled={
|
||||
paginationProps.page >= paginationProps.maxPages
|
||||
}
|
||||
ml={4}
|
||||
icon={<FaAngleDoubleRight />}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</TableCaption>
|
||||
)}
|
||||
</Table>
|
||||
) : (
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
minH="25vh"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Center w="50px" marginRight="1.5%">
|
||||
<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
|
||||
</Center>
|
||||
<Text
|
||||
fontSize="2xl"
|
||||
paddingRight="1%"
|
||||
fontWeight="bold"
|
||||
color="#d9d9d9"
|
||||
>
|
||||
No Data
|
||||
</Text>
|
||||
</Flex>
|
||||
)
|
||||
) : (
|
||||
<Center minH="25vh">
|
||||
<Spinner />
|
||||
</Center>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user