Skip to content
Permalink
48bcd0637e
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
138 lines (127 sloc) 3.54 KB
import {
Button,
Container,
Heading,
HStack,
Input,
Radio,
RadioGroup,
Textarea,
useToast,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";
import Success from "../../components/Success.js";
export default function () {
const toast = useToast();
const currentDate = new Date();
const currentMonth = currentDate.getUTCMonth() + 1;
const currentYear = currentDate.getUTCFullYear();
const [datePickerMax, setDatePickerMax] = useState("");
const [datePickerMin, setDatePickerMin] = useState("");
const [eventDay, setEventDay] = useState("0");
const [eventDetails, setEventDetails] = useState("");
const [eventType, setEventType] = useState("");
const [riddleAnswer, setRiddleAnswer] = useState("");
const [submitSuccess, setSubmitSuccess] = useState(false);
useEffect(() => {
currentDate.setUTCDate(0);
setDatePickerMin(`${currentYear}-${currentMonth}-01`);
setDatePickerMax(
`${currentYear}-${currentMonth}-${currentDate.getUTCDate()}`,
);
}, []);
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 mb="8px" 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
max={datePickerMax}
min={datePickerMin}
onChange={(e) => setEventDay(e.target.value.split("-")[2])}
type="date"
/>
<Heading mb="8px" 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}
mb="8px"
pt="16px"
size="md"
>
Riddle Answer
</Heading>
<Input
onChange={(e) => setRiddleAnswer(e.target.value)}
placeholder="Riddle answer"
/>
<Button mt="16px" onClick={async () => await submit()}>
Book
</Button>
</Container>
);
}