Make event calendar display by what is already booked

regalijan · Jan 24, 2024 · 34b46e9 · 34b46e9
1 parent 58f56b7
commit 34b46e9
Showing 1 changed file with 20 additions and 36 deletions.
diff --git a/app/routes/events-team.tsx b/app/routes/events-team.tsx
@@ -31,57 +31,41 @@ export async function loader({ context }: { context: RequestContext }) {
 }
 
 export default function () {
-  const data = useLoaderData<typeof loader>();
-  const daysInThisMonth = new Date().setUTCDate(0);
-  const dayCards: ReactNode[] = [];
+  const data: { [k: string]: any }[] = useLoaderData<typeof loader>();
+  const eventCards: ReactNode[] = [];
 
-  for (let i = 0; i < daysInThisMonth; i++) {
-    const dayData: { [k: string]: any }[] = data.filter(
-      (row) => row.day === i + 1,
-    );
-
-    if (!dayData.length) continue;
-
-    const fotd = dayData.find((d) => d.type === "fotd");
-    const gamenight = dayData.find((d) => d.type === "gamenight");
-    const qotd = dayData.find((d) => d.type === "qotd");
-
-    const dayCard = (
-      <Card width="100%">
-        <CardHeader>
-          <Heading size="md">
-            {new Date(
-              dayData[0].year,
-              dayData[0].month,
-              dayData[0].day,
-            ).toDateString()}
-          </Heading>
-        </CardHeader>
+  for (const event of data) {
+    eventCards.push(
+      <Card w="100%">
         <CardBody>
-          <Stack divider={<StackDivider />} spacing={4}>
+          <Stack divider={<StackDivider />} spacing="4">
             <Box>
-              <Heading size="xs">FACT OF THE DAY</Heading>
-              <Text pt="2">{fotd ? "" : "Not"} Booked</Text>
+              <Heading size="sm">Date</Heading>
+              <Text fontSize="sm" pt="2">
+                {event.year}-{event.month}-{event.day}
+              </Text>
             </Box>
             <Box>
-              <Heading size="xs">GAMENIGHT</Heading>
-              <Text pt="2">{gamenight ? "" : "Not"} Booked</Text>
+              <Heading size="sm">Event Type</Heading>
+              <Text fontSize="sm" pt="2">
+                {event.type.toUpperCase()}
+              </Text>
             </Box>
             <Box>
-              <Heading size="xs">QUESTION OF THE DAY</Heading>
-              <Text pt="2">{qotd ? "" : "Not"} Booked</Text>
+              <Heading size="sm">Host</Heading>
+              <Text fontSize="sm" pt="2">
+                {event.created_by}
+              </Text>
             </Box>
           </Stack>
         </CardBody>
-      </Card>
+      </Card>,
     );
-
-    dayCards.push(dayCard);
   }
 
   return (
     <Container maxW="container.lg">
-      <VStack>{dayCards}</VStack>
+      <VStack spacing="8">{eventCards}</VStack>
     </Container>
   );
 }