Merge pull request #70 from cheehongw/delete-user

Delete user card

Author: cheehongw

frontend/src/api/user.ts

@@ -120,3 +120,11 @@ export function getProfilePicUrl(profilePicFileName : string | null) {
 
   return apiGatewayClient.getUri({url: `/api/users/uploads/${profilePicFileName}`});
 }
+
+
+
+export async function deleteUser(id: number) {
+  const response = await apiGatewayClient.delete(`/api/users/${id}`)
+
+  return response;
+}

frontend/src/components/profile_page/DeleteUserCard/DeleteUserCard.component.tsx

@@ -0,0 +1,88 @@
+import { useSelector } from "react-redux"
+import { clearUser, selectUser } from "../../../reducers/authSlice"
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, Card, CardBody, Heading, Input, useDisclosure, useToast } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { deleteUser } from "../../../api/user";
+import { useDispatch } from "react-redux";
+
+
+export default function DeleteUserCard() {
+  const user = useSelector(selectUser);
+  const [enteredName, setEnteredName] = useState('');
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef = React.useRef<HTMLButtonElement>(null)
+  const [isLoading, setIsLoading] = useState(false);
+  const dispatch = useDispatch()
+  const toast = useToast();
+
+  const onConfirmDelete = async () => {
+    try {
+      setIsLoading(true);
+      const response = await deleteUser(user!.id)
+    } catch (error: any) {
+      toast({
+        title: 'Deletion failed!',
+        description: error.message,
+        status: 'error'
+      })
+    } finally {
+      setIsLoading(false);
+      onClose();
+      dispatch(clearUser());
+    }
+
+  }
+
+
+  return (
+    <>
+      <Card variant={"elevated"} colorScheme="red" backgroundColor="pink">
+        <CardBody>
+          <Button w="100%" colorScheme="red" onClick={onOpen}>
+            <Heading size='sm'>Delete My Account</Heading>
+          </Button>
+        </CardBody>
+      </Card>
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize='lg' fontWeight='bold'>
+              Delete Account
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              Are you sure? You can't undo this action afterwards.
+
+              Enter your username to confirm this action.
+              <Input type='text'
+                name='username'
+                value={enteredName}
+                onChange={(e) => { setEnteredName(e.target.value) }}
+                autoComplete={"off"}
+              >
+              </Input>
+
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme='red' onClick={onConfirmDelete} ml={3} 
+                  isDisabled={enteredName !== user?.username} isLoading={isLoading}>
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  )
+
+
+
+}

frontend/src/pages/ProfilePage.tsx

@@ -11,6 +11,7 @@ import { getUserProfile } from "../api/user";
 import PromoteAdminCard from "../components/profile_page/PromoteAdminCard/PromoteAdminCard.component";
 import { ProfileProvider } from "../contexts/profileContext";
 import ProgressBar from "../components/ProgressBar/ProgressBar.component";
+import DeleteUserCard from "../components/profile_page/DeleteUserCard/DeleteUserCard.component";
 
 
 export default function ProfilePage() {
@@ -43,20 +44,23 @@ export default function ProfilePage() {
               />
               <FindUserCard />
 
-              {currUser!.id !== displayedUser!.id ? (
-                <></>
-              ) : (
-                <ChangePasswordCard />
-              )}
+              {
+                currUser!.id !== displayedUser!.id
+                  ? <></>
+                  : <ChangePasswordCard />
+              }
 
-              {isAdmin ? (
-                <PromoteAdminCard
-                  displayedUser={displayedUser!}
-                  setDisplayedUser={setDisplayedUser}
-                />
-              ) : (
-                <></>
-              )}
+              {
+                currUser!.id !== displayedUser!.id
+                  ? <></>
+                  : <DeleteUserCard />
+              }
+
+              {
+                isAdmin
+                  ? <PromoteAdminCard displayedUser={displayedUser!} setDisplayedUser={setDisplayedUser} />
+                  : <></>
+              }
             </Flex>
           </Box>
           <Box w="65%">