Create event booking page

app/routes/book-event.tsx

@@ -0,0 +1,118 @@
+import {
+  Button,
+  Container,
+  Heading,
+  HStack,
+  Input,
+  Radio,
+  RadioGroup,
+  Textarea,
+  useToast,
+} from "@chakra-ui/react";
+import { useState } from "react";
+import Success from "../../components/Success.js";
+
+export default function () {
+  const toast = useToast();
+  const [eventDay, setEventDay] = useState("0");
+  const [eventDetails, setEventDetails] = useState("");
+  const [eventType, setEventType] = useState("");
+  const [riddleAnswer, setRiddleAnswer] = useState("");
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+
+  async function submit() {
+    let eventResp: Response;
+
+    try {
+      eventResp = await fetch("/api/events-team/events/new", {
+        body: JSON.stringify({
+          answer: riddleAnswer || undefined,
+          day: eventDay,
+          details: eventDetails,
+          type: eventType,
+        }),
+        headers: {
+          "content-type": "application/json",
+        },
+        method: "POST",
+      });
+    } catch {
+      toast({
+        description: "Please check your internet and try again",
+        isClosable: true,
+        status: "error",
+        title: "Unknown error",
+      });
+
+      return;
+    }
+
+    if (!eventResp.ok) {
+      let errorMessage = "Unknown error";
+
+      try {
+        errorMessage = ((await eventResp.json()) as { error: string }).error;
+      } catch {}
+
+      useToast({
+        description: errorMessage,
+        isClosable: true,
+        status: "error",
+        title: "Oops!",
+      });
+
+      return;
+    }
+
+    setSubmitSuccess(true);
+    await new Promise((r) => setTimeout(r, 7500));
+    location.assign("/events-team");
+  }
+
+  return submitSuccess ? (
+    <Success
+      heading="Event Booked"
+      message="You will be notified when it is approved"
+    />
+  ) : (
+    <Container maxW="container.md">
+      <Heading pb="32px">Book an Event</Heading>
+      <Heading size="md">Event Type</Heading>
+      <RadioGroup onChange={setEventType} value={eventType}>
+        <HStack>
+          <Radio>FoTD</Radio>
+          <Radio>Gamenight</Radio>
+          <Radio>QoTD</Radio>
+          <Radio>RoTW</Radio>
+        </HStack>
+      </RadioGroup>
+      <br />
+      <Heading pt="16px" size="md">
+        Event Date
+      </Heading>
+      <input
+        onChange={(e) => setEventDay(e.target.value.split("-")[2])}
+        type="date"
+      />
+      <Heading pt="16px" size="md">
+        Event Details
+      </Heading>
+      <Textarea
+        onChange={(e) => setEventDetails(e.target.value)}
+        placeholder="For gamenights, provide information about the game and the link. For all other events, type out the fact/question/riddle."
+      />
+      <Heading
+        display={eventType === "rotw" ? "none" : undefined}
+        pt="16px"
+        size="md"
+      >
+        Riddle Answer
+      </Heading>
+      <Input
+        onChange={(e) => setRiddleAnswer(e.target.value)}
+        placeholder="Riddle answer"
+      />
+      <Button onClick={async () => await submit()}>Book</Button>
+    </Container>
+  );
+}