140 lines
3.7 KiB
TypeScript
140 lines
3.7 KiB
TypeScript
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: parseInt(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 {}
|
|
|
|
toast({
|
|
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 value="fotd">FoTD</Radio>
|
|
<Radio value="gamenight">Gamenight</Radio>
|
|
<Radio value="qotd">QoTD</Radio>
|
|
<Radio value="rotw">RoTW</Radio>
|
|
</HStack>
|
|
</RadioGroup>
|
|
<br />
|
|
<Heading pb="8px" 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" ? undefined : "none"}
|
|
mb="8px"
|
|
pt="16px"
|
|
size="md"
|
|
>
|
|
Riddle Answer
|
|
</Heading>
|
|
<Input
|
|
display={eventType === "rotw" ? undefined : "none"}
|
|
onChange={(e) => setRiddleAnswer(e.target.value)}
|
|
placeholder="Riddle answer"
|
|
/>
|
|
<Button mt="16px" onClick={async () => await submit()}>
|
|
Book
|
|
</Button>
|
|
</Container>
|
|
);
|
|
}
|