Make event approval buttons do something

app/routes/events-team.tsx

@@ -11,6 +11,7 @@ import {
   Stack,
   StackDivider,
   Text,
+  useToast,
   VStack,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
@@ -19,7 +20,7 @@ import { type ReactNode } from "react";
 export async function loader({ context }: { context: RequestContext }) {
   const now = new Date();
   const monthEventList = await context.env.D1.prepare(
-    "SELECT approved, created_by, day, month, pending, type, year FROM events WHERE month = ? AND year = ?;",
+    "SELECT approved, created_by, day, id, month, pending, type, year FROM events WHERE month = ? AND year = ?;",
   )
     .bind(now.getUTCMonth() + 1, now.getUTCFullYear())
     .all();
@@ -46,6 +47,41 @@ export default function () {
     events: { [k: string]: any }[];
   } = useLoaderData<typeof loader>();
   const eventCards: ReactNode[] = [];
+  const toast = useToast();
+
+  async function decide(approved: boolean, eventId: string) {
+    const decisionResp = await fetch(
+      `/api/events-team/events/${eventId}/decision`,
+      {
+        body: JSON.stringify({ approved }),
+        headers: {
+          "content-type": "application/json",
+        },
+        method: "POST",
+      },
+    );
+
+    if (!decisionResp.ok) {
+      let errorMsg = "Unknown error";
+
+      try {
+        errorMsg = ((await decisionResp.json()) as { error: string }).error;
+      } catch {}
+
+      toast({
+        description: errorMsg,
+        status: "error",
+        title: "Oops!",
+      });
+
+      return;
+    }
+
+    toast({
+      description: `Event ${approved ? "approved" : "rejected"}`,
+      title: "Success",
+    });
+  }
 
   for (const event of events) {
     eventCards.push(
@@ -76,8 +112,18 @@ export default function () {
           <Flex gap="16px">
             {can_approve && event.pending ? (
               <>
-                <Button colorScheme="red">Deny</Button>
-                <Button colorScheme="blue">Approve</Button>
+                <Button
+                  colorScheme="red"
+                  onClick={async () => await decide(false, event.id)}
+                >
+                  Reject
+                </Button>
+                <Button
+                  colorScheme="blue"
+                  onClick={async () => await decide(true, event.id)}
+                >
+                  Approve
+                </Button>
               </>
             ) : null}
           </Flex>