Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Create event booking page
  • Loading branch information
regalijan committed Feb 5, 2024
1 parent 456598f commit 3cc797e
Showing 1 changed file with 118 additions and 0 deletions.
118 changes: 118 additions & 0 deletions 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>
);
}

0 comments on commit 3cc797e

Please sign in to comment.