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

81
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,12 +175,43 @@ export default function () {
setEventData(newEventData); setEventData(newEventData);
} }
for (const event of eventData) { 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>
<VStack spacing="8">
{eventData.map((event) => {
const eventCreatorName = members.find( const eventCreatorName = members.find(
(member) => member.id === event.created_by, (member) => member.id === event.created_by,
)?.name; )?.name;
eventCards.push( return (
<Card w="100%"> <Card w="100%">
<CardBody> <CardBody>
<Stack divider={<StackDivider />} spacing="4"> <Stack divider={<StackDivider />} spacing="4">
@ -258,44 +288,17 @@ export default function () {
</Flex> </Flex>
<Text alignSelf="center" fontSize="sm"> <Text alignSelf="center" fontSize="sm">
Status:{" "} Status:{" "}
{event.pending ? "Pending" : event.approved ? "Approved" : "Denied"} {event.pending
? "Pending"
: event.approved
? "Approved"
: "Denied"}
</Text> </Text>
</CardFooter> </CardFooter>
</Card>, </Card>
); );
} })}
</VStack>
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>
<VStack spacing="8">{eventCards}</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