Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Make dynamic updating work on events team page
  • Loading branch information
@regalijan
regalijan committed Mar 2, 2024
1 parent 997bf0b commit de3d207
Showing 1 changed file with 95 additions and 92 deletions.
187 changes: 95 additions & 92 deletions app/routes/events-team.tsx
View file
Expand Up @@ -23,7 +23,7 @@ import {
VStack,
} from "@chakra-ui/react";
import { useLoaderData } from "@remix-run/react";
import { type ReactNode, useState } from "react";
import { useState } from "react";

export async function loader({ context }: { context: RequestContext }) {
if (!context.data.current_user)
Expand Down Expand Up @@ -83,7 +83,6 @@ export default function () {
members: { id: string; name: string }[];
} = useLoaderData<typeof loader>();
const [eventData, setEventData] = useState(events);
const eventCards: ReactNode[] = [];
const { isOpen, onClose, onOpen } = useDisclosure();
const toast = useToast();
const [selectedEvent, setSelectedEvent] = useState("");
Expand Down Expand Up @@ -176,95 +175,6 @@ export default function () {
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 (
<Container maxW="container.lg">
<Modal isOpen={isOpen} onClose={onClose}>
Expand Down Expand Up @@ -295,7 +205,100 @@ export default function () {
</ModalFooter>
</ModalContent>
</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">
<Link color="#646cff" href="/book-event" mt="16px">
Book an Event
Expand Down

0 comments on commit de3d207

Please sign in to comment.