diff --git a/app/routes/events-calendar.tsx b/app/routes/events-calendar.tsx index ace4020..0d0da18 100644 --- a/app/routes/events-calendar.tsx +++ b/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(); 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 ( + + + + Event Info + + + Host:{" "} + { + ( + data.memberData.find((m) => m.id === eventData.created_by) as { + [k: string]: any; + } + ).name + } +
+ Event Type: {eventData.type.toUpperCase()} +
+ Details: {eventData.details} +
+ Answer: {eventData.type === "rotw" ? eventData.answer : "N/A"} +
+ + + +
+
new Date(event.end)} events={data.calendarData}