Create takeAction function

components/AppealCard.tsx

@@ -6,9 +6,18 @@ import {
   CardFooter,
   CardHeader,
   Heading,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
   Stack,
   StackDivider,
   Text,
+  Textarea,
+  useDisclosure,
+  useToast,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
@@ -16,13 +25,70 @@ export default function (props: AppealCardProps) {
   const [dateString, setDateString] = useState(
     new Date(props.createdAt).toUTCString()
   );
+  const [action, setAction] = useState("");
+  const [feedback, setFeedback] = useState("");
 
   useEffect(() => {
     setDateString(new Date(props.createdAt).toLocaleString());
   }, [props.createdAt]);
 
+  const { isOpen, onClose, onOpen } = useDisclosure();
+
+  function showModal(action: "Accept" | "Deny") {
+    setAction(action);
+    onOpen();
+  }
+
+  async function takeAction(action: string) {
+    const actionReq = await fetch(`/api/appeals/${props.id}/${action}`, {
+      body: feedback ? JSON.stringify({ feedback }) : "{}",
+      headers: {
+        "content-type": "application/json",
+      },
+      method: "POST",
+    });
+
+    if (actionReq.ok) {
+      useToast()({
+        description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
+        duration: 5000,
+        status: "success",
+        title: "Success",
+      });
+
+      document.getElementById(`appeal_${props.id}`)?.remove();
+    }
+
+    useToast()({
+      description: ((await actionReq.json()) as { error: string }).error,
+      duration: 10000,
+      status: "error",
+      title: "Oops!",
+    });
+  }
+
   return (
-    <Card w="100%">
+    <Card id={`appeal_${props.id}`} w="100%">
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>{action} this appeal?</ModalHeader>
+          <ModalBody>
+            <Text size="xs">Optionally provide feedback</Text>
+            <Textarea
+              onChange={(e) => setFeedback(e.target.value)}
+              placeholder="Your feedback"
+            />
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              onClick={async () => await takeAction(action.toLowerCase())}
+            >
+              Submit
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
       <CardHeader>
         <Heading size="md">
           Appeal for {props.username}#{props.discriminator}
@@ -49,8 +115,14 @@ export default function (props: AppealCardProps) {
       </CardBody>
       <CardFooter pb="4px">
         <Box>
-          <Button colorScheme="red">Deny</Button>
-          <Button colorScheme="blue" ml="8px">
+          <Button colorScheme="red" onClick={() => showModal("Deny")}>
+            Deny
+          </Button>
+          <Button
+            colorScheme="blue"
+            ml="8px"
+            onClick={() => showModal("Accept")}
+          >
             Accept
           </Button>
         </Box>