Add game night certification to events team page

app/routes/events-team.tsx

@@ -8,14 +8,22 @@ import {
   Flex,
   Heading,
   Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
   Stack,
   StackDivider,
   Text,
+  useDisclosure,
   useToast,
   VStack,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
-import { type ReactNode } from "react";
+import { type ReactNode, useState } from "react";
 
 export async function loader({ context }: { context: RequestContext }) {
   const now = new Date();
@@ -47,7 +55,9 @@ export default function () {
     events: { [k: string]: any }[];
   } = useLoaderData<typeof loader>();
   const eventCards: ReactNode[] = [];
+  const { isOpen, onClose, onOpen } = useDisclosure();
   const toast = useToast();
+  const [selectedEvent, setSelectedEvent] = useState("");
 
   async function decide(approved: boolean, eventId: string) {
     const decisionResp = await fetch(
@@ -83,6 +93,40 @@ export default function () {
     });
   }
 
+  async function certify(eventId: string) {
+    const certifyResp = await fetch(
+      `/api/events-team/events/${eventId}/certify`,
+      {
+        body: "{}",
+        headers: {
+          "content-type": "application/json",
+        },
+        method: "POST",
+      },
+    );
+
+    if (!certifyResp.ok) {
+      let errorMsg = "Unknown error";
+
+      try {
+        errorMsg = ((await certifyResp.json()) as { error: string }).error;
+      } catch {}
+
+      toast({
+        description: errorMsg,
+        status: "error",
+        title: "Failed to certify game night",
+      });
+
+      return;
+    }
+
+    toast({
+      description: "Game night certified",
+      title: "Success",
+    });
+  }
+
   for (const event of events) {
     eventCards.push(
       <Card w="100%">
@@ -126,6 +170,22 @@ export default function () {
                 </Button>
               </>
             ) : null}
+            {can_approve &&
+            event.approved &&
+            event.type === "gamenight" &&
+            !event.reached_minimum_player_count ? (
+              <>
+                <Button
+                  colorScheme="blue"
+                  onClick={() => {
+                    setSelectedEvent(event.id);
+                    onOpen();
+                  }}
+                >
+                  Certify Game Night
+                </Button>
+              </>
+            ) : null}
           </Flex>
           <Text alignSelf="center" fontSize="sm">
             Status:{" "}
@@ -138,6 +198,31 @@ export default function () {
 
   return (
     <Container maxW="container.lg">
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Certify Game Night</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>
+              By certifying this game night, you confirm that the minimum number
+              of players was met and you were provided proof.
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="red" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              colorScheme="blue"
+              mr="8px"
+              onClick={async () => await certify(selectedEvent)}
+            >
+              Certify
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
       <VStack spacing="8">{eventCards}</VStack>
       <Link color="#646cff" href="/book-event" mt="16px">
         Book an Event