From 9c4044a00183d72f6e0c0267db69d6dd54d78257 Mon Sep 17 00:00:00 2001
From: Max <mrheffern@gmail.com>
Date: Fri, 22 Sep 2023 23:02:33 -0700
Subject: [PATCH] first wednesday working on calendar

---
 app/CalendarPage.jsx | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/app/CalendarPage.jsx b/app/CalendarPage.jsx
index cb92619..e973e99 100644
--- a/app/CalendarPage.jsx
+++ b/app/CalendarPage.jsx
@@ -75,16 +75,15 @@ const CustomDiv = styled.div`
 
 `;
 
-const isFirstWednesday = (dateStr) => {
-  // console.log(JSON.stringify(dateStr))
-  let date = new Date(dateStr);
-  return date.getDay() === 3 && date.getDate() <= 7;
+const isFirstWednesday = (day) => {
+    let date = new Date(day);
+    return date.getDay() === 3 && date.getDate() <= 7;
 }
 
-const ServerDay = (props) => {
-  const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;
+const MeetupDay = (props) => {
+  const {day, outsideCurrentMonth, ...other } = props;
 
-  const isSelected = !props.outsideCurrentMonth && isFirstWednesday(props.day.date());
+  const isSelected = !props.outsideCurrentMonth && isFirstWednesday(day);
 
   return (
     <Badge
@@ -106,14 +105,13 @@ The goal of the calendar is to be able to click on dates and have a popup that s
 1. Perhaps the modal is actually seperate and is just passed the dates from a click event?
 *** 2. We also want to have the only badge be on the first wednesday of each month
         - onMonthChange has been added. Need to get this info to the day components to render badge
+        - Since there will be a default month, use that and onMonthChange to set badges
 3. Also need to change colors
 
 */
 
 const CalendarPage = () => {
 
-  const [highlightedDays, setHighlightedDays] = useState([11,20,9])
-
   return (
     <CustomDiv>
       <Container>
@@ -126,13 +124,7 @@ const CalendarPage = () => {
               <Paper>
                 <DateCalendar 
                   slots={{
-                    day: ServerDay
-                  }}
-                  onMonthChange={(month) => console.log(JSON.stringify(month))}
-                  slotProps={{
-                    day: {
-                      highlightedDays
-                    }
+                    day: MeetupDay
                   }}
                 />
               </Paper>