Merge pull request #113 from anik-ghosh-au7/fix/dashboard

Fix/dashboard

dashboard/src/components/DeleteUserModal.tsx

@@ -0,0 +1,112 @@
+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 { DeleteUser } from '../graphql/mutation';
+import { capitalizeFirstLetter } from '../utils';
+
+interface userDataTypes {
+	id: string;
+	email: string;
+}
+
+const DeleteUserModal = ({
+	user,
+	updateUserList,
+}: {
+	user: userDataTypes;
+	updateUserList: Function;
+}) => {
+	const client = useClient();
+	const toast = useToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [userData, setUserData] = React.useState<userDataTypes>({
+		id: '',
+		email: '',
+	});
+	React.useEffect(() => {
+		setUserData(user);
+	}, []);
+	const deleteHandler = async () => {
+		const res = await client
+			.mutation(DeleteUser, { params: { email: userData.email } })
+			.toPromise();
+		if (res.error) {
+			toast({
+				title: capitalizeFirstLetter(res.error.message),
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+
+			return;
+		} else if (res.data?._delete_user) {
+			toast({
+				title: capitalizeFirstLetter(res.data?._delete_user.message),
+				isClosable: true,
+				status: 'success',
+				position: 'bottom-right',
+			});
+		}
+		onClose();
+		updateUserList();
+	};
+	return (
+		<>
+			<MenuItem onClick={onOpen}>Delete User</MenuItem>
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>Delete User</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">
+								User <b>{user.email}</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 DeleteUserModal;

dashboard/src/graphql/mutation/index.ts

@@ -23,9 +23,7 @@ export const AdminLogout = `
 `;
 
 export const UpdateEnvVariables = `
-  mutation updateEnvVariables(
-    $params: UpdateEnvInput!
-    ) {
+  mutation updateEnvVariables($params: UpdateEnvInput!) {
     _update_env(params: $params) {
       message
     }
@@ -33,11 +31,17 @@ export const UpdateEnvVariables = `
 `;
 
 export const UpdateUser = `
-  mutation updateUser(
-    $params: UpdateUserInput!
-    ) {
+  mutation updateUser($params: UpdateUserInput!) {
     _update_user(params: $params) {
       id
     }
   }
 `;
+
+export const DeleteUser = `
+  mutation deleteUser($params: DeleteUserInput!) {
+    _delete_user(params: $params) {
+      message
+    }
+  }
+`;

dashboard/src/pages/Users.tsx

@@ -28,6 +28,7 @@ import {
 	MenuList,
 	MenuItem,
 	useToast,
+	Spinner,
 } from '@chakra-ui/react';
 import {
 	FaAngleLeft,
@@ -40,6 +41,7 @@ import {
 import { UserDetailsQuery } from '../graphql/queries';
 import { UpdateUser } from '../graphql/mutation';
 import EditUserModal from '../components/EditUserModal';
+import DeleteUserModal from '../components/DeleteUserModal';
 
 interface paginationPropTypes {
 	limit: number;
@@ -98,7 +100,9 @@ export default function Users() {
 			maxPages: 1,
 		});
 	const [userList, setUserList] = React.useState<userDataTypes[]>([]);
+	const [loading, setLoading] = React.useState<boolean>(false);
 	const updateUserList = async () => {
+		setLoading(true);
 		const { data } = await client
 			.query(UserDetailsQuery, {
 				params: {
@@ -112,9 +116,21 @@ export default function Users() {
 		if (data?._users) {
 			const { pagination, users } = data._users;
 			const maxPages = getMaxPages(pagination);
-			setPaginationProps({ ...paginationProps, ...pagination, maxPages });
-			setUserList(users);
+			if (users && users.length > 0) {
+				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
+				setUserList(users);
+			} else {
+				if (paginationProps.page !== 1) {
+					setPaginationProps({
+						...paginationProps,
+						...pagination,
+						maxPages,
+						page: 1,
+					});
+				}
+			}
 		}
+		setLoading(false);
 	};
 	React.useEffect(() => {
 		updateUserList();
@@ -162,208 +178,216 @@ export default function Users() {
 					Users
 				</Text>
 			</Flex>
-			{userList.length > 0 ? (
-				<Table variant="simple">
-					<Thead>
-						<Tr>
-							<Th>Email</Th>
-							<Th>Created At</Th>
-							<Th>Signup Methods</Th>
-							<Th>Roles</Th>
-							<Th>Verified</Th>
-							<Th>Actions</Th>
-						</Tr>
-					</Thead>
-					<Tbody>
-						{userList.map((user: userDataTypes) => {
-							const { email_verified, created_at, ...rest }: any = user;
-							return (
-								<Tr key={user.id} style={{ fontSize: 14 }}>
-									<Td>{user.email}</Td>
-									<Td>
-										{dayjs(user.created_at * 1000).format('MMM DD, YYYY')}
-									</Td>
-									<Td>{user.signup_methods}</Td>
-									<Td>{user.roles.join(', ')}</Td>
-									<Td>
-										<Tag
-											size="sm"
-											variant="outline"
-											colorScheme={user.email_verified ? 'green' : 'yellow'}
-										>
-											{user.email_verified.toString()}
-										</Tag>
-									</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>
-												<EditUserModal
-													user={rest}
-													updateUserList={updateUserList}
-												/>
-												{!user.email_verified && (
-													<MenuItem
-														onClick={() => userVerificationHandler(user)}
+			{!loading ? (
+				userList.length > 0 ? (
+					<Table variant="simple">
+						<Thead>
+							<Tr>
+								<Th>Email</Th>
+								<Th>Created At</Th>
+								<Th>Verified</Th>
+								<Th>Actions</Th>
+							</Tr>
+						</Thead>
+						<Tbody>
+							{userList.map((user: userDataTypes) => {
+								const { email_verified, created_at, ...rest }: any = user;
+								return (
+									<Tr key={user.id} style={{ fontSize: 14 }}>
+										<Td>{user.email}</Td>
+										<Td>{dayjs(user.created_at).format('MMM DD, YYYY')}</Td>
+										<Td>
+											<Tag
+												size="sm"
+												variant="outline"
+												colorScheme={user.email_verified ? 'green' : 'yellow'}
+											>
+												{user.email_verified.toString()}
+											</Tag>
+										</Td>
+										<Td>
+											<Menu>
+												<MenuButton as={Button} variant="unstyled" size="sm">
+													<Flex
+														justifyContent="space-between"
+														alignItems="center"
 													>
-														Verify User
-													</MenuItem>
-												)}
-											</MenuList>
-										</Menu>
-									</Td>
-								</Tr>
-							);
-						})}
-					</Tbody>
-					{paginationProps.maxPages > 1 && (
-						<TableCaption>
-							<Flex justifyContent="space-between" alignItems="center" m="2% 0">
-								<Flex flex="1">
-									<Tooltip label="First Page">
-										<IconButton
-											aria-label="icon button"
-											onClick={() =>
+														<Text fontSize="sm" fontWeight="light">
+															Menu
+														</Text>
+														<FaAngleDown style={{ marginLeft: 10 }} />
+													</Flex>
+												</MenuButton>
+												<MenuList>
+													{!user.email_verified && (
+														<MenuItem
+															onClick={() => userVerificationHandler(user)}
+														>
+															Verify User
+														</MenuItem>
+													)}
+													<EditUserModal
+														user={rest}
+														updateUserList={updateUserList}
+													/>
+													<DeleteUserModal
+														user={rest}
+														updateUserList={updateUserList}
+													/>
+												</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),
 												})
 											}
-											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>
+											{getLimits(paginationProps).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>
-									<Select
-										w={32}
-										value={paginationProps.limit}
-										onChange={(e) =>
-											paginationHandler({
-												page: 1,
-												limit: parseInt(e.target.value),
-											})
-										}
-									>
-										{getLimits(paginationProps).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"
+							</TableCaption>
+						)}
+					</Table>
+				) : (
+					<Flex
+						flexDirection="column"
+						minH="25vh"
+						justifyContent="center"
+						alignItems="center"
 					>
-						No Data
-					</Text>
-				</Flex>
+						<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>
 	);