From 900a22af0bb0a75837cc3c03dbad8bdbb7a8eab4 Mon Sep 17 00:00:00 2001
From: Max <mrheffern@gmail.com>
Date: Sat, 23 Sep 2023 17:49:27 -0700
Subject: [PATCH] added dynamic dates to event modal

---
 app/CalendarPage.jsx         | 12 ++++++------
 components/MeetupDetails.jsx | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 components/MeetupDetails.jsx

diff --git a/app/CalendarPage.jsx b/app/CalendarPage.jsx
index b5a50fc..2d5125a 100644
--- a/app/CalendarPage.jsx
+++ b/app/CalendarPage.jsx
@@ -107,29 +107,29 @@ const MeetupDay = (props) => {
 /*
 
 The goal of the calendar is to be able to click on dates and have a popup that shows our meetup details. 
-*** 1. Perhaps the modal is actually seperate and is just passed the dates from a click event?
 3. Also need to change colors
 
 */
 
 const CalendarPage = () => {
   const [openMeetupDetails, setOpenMeetupDetails] = useState(false);
+  const [selectedMeetupDate, setSelectedMeetupDate] = useState();
 
   const closeMeetupDetails = () => {
     setOpenMeetupDetails(false);
   }
 
   const checkToOpenDetails = (value, selectionState) => {
-    console.log("Test");
-    console.log(value);
-    console.log(isFirstWednesday(value));
-    isFirstWednesday(value) ? setOpenMeetupDetails(true) : null;
+    if (isFirstWednesday(value)) {
+      setSelectedMeetupDate(value);
+      setOpenMeetupDetails(true);
+    }
   }
 
   return (
     <CustomDiv>
       <Container>
-        <MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} />
+        <MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} date={selectedMeetupDate} />
         <Grid container spacing={3}>
           <Grid item xs={6}>
             <Box sx={{display: "flex", justifyContent: "center"}}>
diff --git a/components/MeetupDetails.jsx b/components/MeetupDetails.jsx
new file mode 100644
index 0000000..57122e1
--- /dev/null
+++ b/components/MeetupDetails.jsx
@@ -0,0 +1,22 @@
+import { Dialog, DialogContent, DialogTitle, Typography } from '@mui/material'
+import React from 'react'
+
+const MeetupDetails = (props) => {
+    let date = new Date(props.date);
+  return (
+    <Dialog open={props.open} onClose={props.onClose}>
+        <DialogContent>
+            <DialogTitle>
+                <Typography variant='h4' align='center'>Caffeine and Coin</Typography>
+            </DialogTitle>
+            <DialogContent>
+                <Typography variant='h6'>Date & Time: {date.getMonth() + 1}/{date.getDay()}/{date.getFullYear()} at 6:00pm</Typography>
+                <Typography variant='h6'>Location: Sketchy railway tunnel on the North Side</Typography>
+                <Typography variant='h6'>Come hang out and dodge hobo knifings while discussing and learning about bitcoin!</Typography>
+            </DialogContent>
+        </DialogContent>
+    </Dialog>
+  )
+}
+
+export default MeetupDetails
\ No newline at end of file