Show more information on event click

app/routes/events-calendar.tsx

@@ -10,7 +10,16 @@ import {
   AccordionItem,
   AccordionPanel,
   Box,
+  Button,
   Container,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
 import { useState } from "react";
@@ -61,15 +70,24 @@ export async function loader({ context }: { context: RequestContext }) {
     };
   });
 
+  const memberData = 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();
+
   return {
     calendarData,
     eventList: eventsData.results,
+    memberData: memberData.results,
   };
 }
 
 export default function () {
   const data = useLoaderData<typeof loader>();
   const [selectedDate, setDate] = useState(new Date());
+  const [eventData, setEventDate] = useState({} as { [k: string]: any });
+  const { isOpen, onClose, onOpen } = useDisclosure();
   const getEventsOfDay = (date: Date) =>
     data.eventList.filter(
       (e) =>
@@ -83,6 +101,32 @@ export default function () {
 
   return (
     <Container maxW="container.lg" h="600px">
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Event Info</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            Host:{" "}
+            {
+              (
+                data.memberData.find((m) => m.id === eventData.created_by) as {
+                  [k: string]: any;
+                }
+              ).name
+            }
+            <br />
+            Event Type: {eventData.type.toUpperCase()}
+            <br />
+            Details: {eventData.details}
+            <br />
+            Answer: {eventData.type === "rotw" ? eventData.answer : "N/A"}
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={onClose}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
       <Calendar
         endAccessor={(event) => new Date(event.end)}
         events={data.calendarData}