add delete user modal

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

dashboard/src/pages/Users.tsx

@@ -41,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;
@@ -206,10 +207,6 @@ export default function Users() {
 													</Flex>
 												</MenuButton>
 												<MenuList>
-													<EditUserModal
-														user={rest}
-														updateUserList={updateUserList}
-													/>
 													{!user.email_verified && (
 														<MenuItem
 															onClick={() => userVerificationHandler(user)}
@@ -217,6 +214,14 @@ export default function Users() {
 															Verify User
 														</MenuItem>
 													)}
+													<EditUserModal
+														user={rest}
+														updateUserList={updateUserList}
+													/>
+													<DeleteUserModal
+														user={rest}
+														updateUserList={updateUserList}
+													/>
 												</MenuList>
 											</Menu>
 										</Td>