import { Box, Button, Card, CardBody, CardFooter, Container, Flex, Heading, Link, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Stack, StackDivider, Text, useDisclosure, useToast, VStack, } from "@chakra-ui/react"; import { useLoaderData } from "@remix-run/react"; import { useState } from "react"; import stylesheet from "../styles/events-team.css"; import { type LinksFunction } from "@remix-run/cloudflare"; export const links: LinksFunction = () => { return [{ href: stylesheet, rel: "stylesheet" }]; }; export async function loader({ context }: { context: RequestContext }) { if (!context.data.current_user) throw new Response(null, { status: 401, }); if ( ![1 << 3, 1 << 4, 1 << 12].find( (p) => context.data.current_user.permissions & p, ) ) throw new Response(null, { status: 403, }); const now = new Date(); const monthEventList = await context.env.D1.prepare( "SELECT answer, approved, created_by, day, details, id, month, pending, performed_at, reached_minimum_player_count, type, year FROM events WHERE month = ? AND year = ? AND (day >= ? OR pending = 1) ORDER BY day ASC;", ) .bind(now.getUTCMonth() + 1, now.getUTCFullYear(), now.getUTCDate()) .all(); if (monthEventList.error) throw new Response(null, { status: 500, }); const membersList = await context.env.D1.prepare( "SELECT id, name FROM et_members WHERE id IN (SELECT created_by FROM events WHERE month = ? AND year = ?);", ) .bind(now.getUTCMonth() + 1, now.getUTCFullYear()) .all(); if (membersList.error) throw new Response(null, { status: 500, }); return { can_approve: Boolean( [1 << 4, 1 << 12].find((p) => context.data.current_user.permissions & p), ), events: monthEventList.results, members: membersList.results as { id: string; name: string }[], }; } export default function () { const { can_approve, events, members, }: { can_approve: boolean; events: { [k: string]: any }[]; members: { id: string; name: string }[]; } = useLoaderData<typeof loader>(); const [eventData, setEventData] = useState(events); const { isOpen, onClose, onOpen } = useDisclosure(); const { isOpen: isCompleteOpen, onClose: closeComplete, onOpen: openComplete, } = useDisclosure(); const { isOpen: isAnsweredOpen, onClose: closeAnswered, onOpen: openAnswered, } = useDisclosure(); const toast = useToast(); const [selectedEvent, setSelectedEvent] = useState(""); 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"}`, status: "success", title: "Success", }); const newEventData = eventData; const eventIdx = eventData.findIndex((e) => e.id === eventId); newEventData[eventIdx].approved = approved; newEventData[eventIdx].pending = false; setEventData([...newEventData]); } async function certify(eventId: string) { const certifyResp = await fetch( `/api/events-team/events/${eventId}/certify`, { body: "{}", headers: { "content-type": "application/json", }, method: "POST", }, ); if (!certifyResp.ok) { let errorMsg = "Unknown error"; try { errorMsg = ((await certifyResp.json()) as { error: string }).error; } catch {} toast({ description: errorMsg, status: "error", title: "Failed to certify game night", }); return; } toast({ description: "Game night certified", status: "success", title: "Success", }); const newEventData = eventData; newEventData[ eventData.findIndex((e) => e.id === eventId) ].reached_minimum_player_count = true; setEventData([...newEventData]); setSelectedEvent(""); } async function markAnswered(eventId: string) { const answerResp = await fetch(`/api/events-team/events/${eventId}/solve`, { body: "{}", headers: { "content-type": "application/json", }, method: "POST", }); closeAnswered(); if (!answerResp.ok) { toast({ description: "Failed to mark as solved", status: "error", title: "Oops", }); return; } const newEventData = eventData; newEventData[eventData.findIndex((e) => e.id === eventId)].answered_at = Date.now(); setEventData([...newEventData]); setSelectedEvent(""); } async function markComplete(eventId: string) { const completeResp = await fetch( `/api/events-team/events/${eventId}/complete`, { body: "{}", headers: { "content-type": "application/json", }, method: "POST", }, ); closeComplete(); if (!completeResp.ok) { let msg = "Unknown error"; try { msg = ((await completeResp.json()) as { error: string }).error; } catch {} toast({ description: msg, status: "error", title: "Failed to complete", }); return; } toast({ description: "Event marked as completed", status: "success", title: "Success", }); const newEventData = eventData; // Technically this won't be the same as the time in the db, but that doesn't matter since this is just to hide the button newEventData[eventData.findIndex((e) => e.id === eventId)].performed_at = Date.now(); setEventData([...newEventData]); setSelectedEvent(""); } return ( <Container maxW="container.lg"> <Modal isOpen={isOpen} onClose={onClose}> <ModalOverlay /> <ModalContent> <ModalHeader>Certify Game Night</ModalHeader> <ModalCloseButton /> <ModalBody> <Text> By certifying this game night, you confirm that the minimum number of players was met and you were provided proof. </Text> </ModalBody> <ModalFooter> <Button colorScheme="red" onClick={onClose}> Cancel </Button> <Button colorScheme="blue" ml="8px" onClick={async () => { await certify(selectedEvent); onClose(); }} > Certify </Button> </ModalFooter> </ModalContent> </Modal> <Modal isOpen={isCompleteOpen} onClose={closeComplete}> <ModalOverlay /> <ModalContent> <ModalHeader>Mark as Completed</ModalHeader> <ModalCloseButton /> <ModalBody> <Text> By marking this event as completed, you confirm that the event creator has performed this event </Text> </ModalBody> <ModalFooter> <Button onClick={closeComplete}>Cancel</Button> <Button colorScheme="blue" ml="8px" onClick={async () => await markComplete(selectedEvent)} > Mark as Complete </Button> </ModalFooter> </ModalContent> </Modal> <Modal isOpen={isAnsweredOpen} onClose={closeAnswered}> <ModalOverlay /> <ModalContent> <ModalHeader>Mark as Solved</ModalHeader> <ModalCloseButton /> <ModalBody> <Text>Are you sure you want to mark this riddle as solved?</Text> </ModalBody> <ModalFooter> <Button onClick={closeAnswered}>Cancel</Button> <Button colorScheme="blue" ml="8px" onClick={async () => await markAnswered(selectedEvent)} > Mark Answered </Button> </ModalFooter> </ModalContent> </Modal> <VStack spacing="8"> {eventData.map((event) => { const eventCreatorName = members.find( (member) => member.id === event.created_by, )?.name; const eventColors: { [k: string]: string } = { fotd: "cyan", gamenight: "blue", rotw: "magenta", qotd: "#9900FF", }; return ( <Card w="100%"> <CardBody> <Stack divider={<StackDivider />} spacing="4"> <Box> <Heading size="sm">Date</Heading> <Text fontSize="sm" pt="2"> {event.year}-{event.month}-{event.day} </Text> </Box> <Box> <Heading size="sm">Event Type</Heading> <Text fontSize="sm" pt="2"> {event.type.toUpperCase()} </Text> </Box> <Box> <Heading size="sm">Event Details</Heading> <Text fontSize="sm" pt="2"> {event.details} </Text> </Box> {event.type === "rotw" ? ( <Box> <Heading size="sm">Riddle Answer</Heading> <Text fontSize="sm" pt="2"> {event.answer} </Text> </Box> ) : null} <Box> <Heading size="sm">Host</Heading> <Text fontSize="sm" pt="2"> {eventCreatorName ? `${eventCreatorName} (${event.created_by})` : event.created_by} </Text> </Box> </Stack> </CardBody> <CardFooter> <Flex gap="8px" mr="8px"> {can_approve && event.pending ? ( <> <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} {can_approve && !event.pending && !event.performed_at ? ( <Button colorScheme="blue" onClick={() => { setSelectedEvent(event.id); openComplete(); }} > Mark as Completed </Button> ) : null} {can_approve && !event.pending && event.performed_at && event.type === "rotw" && !event.answered_at ? ( <Button colorScheme="blue" onClick={() => { setSelectedEvent(event.id); openAnswered(); }} > Mark as Solved </Button> ) : null} {can_approve && event.approved && event.type === "gamenight" && event.performed_at && !event.reached_minimum_player_count ? ( <Button colorScheme="blue" onClick={() => { setSelectedEvent(event.id); onOpen(); }} > Certify Game Night </Button> ) : null} </Flex> <Text alignSelf="center" fontSize="sm"> Status:{" "} {event.pending ? "Pending" : event.approved ? "Approved" : "Denied"} </Text> <span className="dot" style={{ backgroundColor: eventColors[event.type] }} ></span> </CardFooter> </Card> ); })} </VStack> <VStack alignItems="start" gap="8px" my="16px"> <Link color="#646cff" href="/book-event" mt="16px" target="_blank"> Book an Event </Link> {can_approve ? ( <Link color="#646cff" href="/et-members" mb="32px" mt="8px"> Events Team Member Management </Link> ) : null} </VStack> </Container> ); }