regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make dynamic updating work on events team page

Browse Source
This commit is contained in:
Regalijan 2024-03-02 03:07:02 -05:00
parent 997bf0bd54
commit de3d207bad
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 95 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
app/routes/events-team.tsx
View File

@ -23,7 +23,7 @@ import {
VStack, VStack,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react"; import { useLoaderData } from "@remix-run/react";
import { type ReactNode, useState } from "react"; import { useState } from "react";
export async function loader({ context }: { context: RequestContext }) { export async function loader({ context }: { context: RequestContext }) {
if (!context.data.current_user) if (!context.data.current_user)
@ -83,7 +83,6 @@ export default function () {
members: { id: string; name: string }[]; members: { id: string; name: string }[];
} = useLoaderData<typeof loader>(); } = useLoaderData<typeof loader>();
const [eventData, setEventData] = useState(events); const [eventData, setEventData] = useState(events);
const eventCards: ReactNode[] = [];
const { isOpen, onClose, onOpen } = useDisclosure(); const { isOpen, onClose, onOpen } = useDisclosure();
const toast = useToast(); const toast = useToast();
const [selectedEvent, setSelectedEvent] = useState(""); const [selectedEvent, setSelectedEvent] = useState("");
@ -176,95 +175,6 @@ export default function () {
setEventData(newEventData); setEventData(newEventData);
} }
for (const event of eventData) {
const eventCreatorName = members.find(
(member) => member.id === event.created_by,
)?.name;
eventCards.push(
<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.approved &&
event.type === "gamenight" &&
!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>
</CardFooter>
</Card>,
);
}
return ( return (
<Container maxW="container.lg"> <Container maxW="container.lg">
<Modal isOpen={isOpen} onClose={onClose}> <Modal isOpen={isOpen} onClose={onClose}>
@ -295,7 +205,100 @@ export default function () {
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>
<VStack spacing="8">{eventCards}</VStack> <VStack spacing="8">
{eventData.map((event) => {
const eventCreatorName = members.find(
(member) => member.id === event.created_by,
)?.name;
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.approved &&
event.type === "gamenight" &&
!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>
</CardFooter>
</Card>
);
})}
</VStack>
<VStack alignItems="start" gap="8px" my="16px"> <VStack alignItems="start" gap="8px" my="16px">
<Link color="#646cff" href="/book-event" mt="16px"> <Link color="#646cff" href="/book-event" mt="16px">
Book an Event Book an Event