From 077a38e89170a7c089bf3cf9e83e5e4be676e6af Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Mon, 11 Apr 2022 12:11:43 -0500
Subject: [PATCH] Attempting to fix and issue with the currDay highlight. Made
 a currDate in thecontext state rather than using new Date() accross the app.

---
 components/calender/Day.tsx                     | 17 ++++++++++-------
 components/calender/index.tsx                   |  3 ++-
 components/calender/modals/AddUpdateSticker.tsx |  6 ++++--
 contexts/CalenderContext.tsx                    |  6 +++++-
 types/CalenderContext.d.ts                      |  1 +
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index ac548fb..941c72c 100644
--- a/components/calender/Day.tsx
+++ b/components/calender/Day.tsx
@@ -21,6 +21,7 @@ interface DayProps {
   sticker: StickerVal;
   date: Date;
   selectedDate: Date;
+  currDate: Date;
 }
 
 /**
@@ -37,7 +38,8 @@ const Day = ({
   overflowDirection,
   sticker,
   date,
-  selectedDate
+  selectedDate,
+  currDate
 }: DayProps): JSX.Element => {
   const handleNav = (direction: "next" | "prev") => {
     if (direction === "next") {
@@ -90,7 +92,7 @@ const Day = ({
           w="100%"
           h="100%"
           _hover={{
-            cursor: isBefore(date, endOfDay(new Date()))
+            cursor: isBefore(date, endOfDay(currDate))
               ? "pointer"
               : "default",
             background: "gray.700",
@@ -131,7 +133,7 @@ const Day = ({
           justifyContent="flex-start"
           pt={2}
           _hover={{
-            cursor: isBefore(date, endOfDay(new Date()))
+            cursor: isBefore(date, endOfDay(currDate))
               ? "pointer"
               : "default",
             background: "gray.700",
@@ -140,7 +142,7 @@ const Day = ({
         >
           <Text
             p={
-              isSameDay(new Date(), date)
+              isSameDay(currDate, date)
                 ? getDate(date) > 10
                   ? "0px 6px 3px 6px"
                   : "0px 9px 3px 9px"
@@ -148,8 +150,8 @@ const Day = ({
             }
             h="auto"
             w="auto"
-            border={isSameDay(new Date(), date) ? "1px solid #0068ff" : "0px"}
-            borderRadius={isSameDay(new Date(), date) ? "100px" : "0px"}
+            border={isSameDay(currDate, date) ? "1px solid #0068ff" : "0px"}
+            borderRadius={isSameDay(currDate, date) ? "100px" : "0px"}
           >
             {`${getDate(date)}`}
           </Text>
@@ -162,7 +164,7 @@ const Day = ({
             />
           </Box>
           <StickersContextProvider>
-            {isBefore(date, endOfDay(new Date())) && (
+            {isBefore(date, endOfDay(currDate)) && (
               <AddUpdateSticker
                 date={date}
                 isOpen={isOpen}
@@ -173,6 +175,7 @@ const Day = ({
                 updateStep={setStep}
                 selectedSticker={selectedSticker}
                 updateSelectedSticker={setSelectedSticker}
+                currDate={currDate}
               />
             )}
           </StickersContextProvider>
diff --git a/components/calender/index.tsx b/components/calender/index.tsx
index c25f481..ec727d6 100644
--- a/components/calender/index.tsx
+++ b/components/calender/index.tsx
@@ -7,7 +7,7 @@ import CalenderNav from "./CalenderNav";
 import Day from "./Day";
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
-  const { selectedDate, layout, updateDate } = useContext(CalenderContext);
+  const { selectedDate, layout, updateDate, currDate } = useContext(CalenderContext);
   const { stickersMonth } = useContext(StickersContext);
 
   useEffect(() => {
@@ -91,6 +91,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                   sticker={sticker}
                   date={date}
                   selectedDate={selectedDate}
+                  currDate={currDate}
                   key={
                     id.length
                       ? id
diff --git a/components/calender/modals/AddUpdateSticker.tsx b/components/calender/modals/AddUpdateSticker.tsx
index 9bda161..44ebcee 100644
--- a/components/calender/modals/AddUpdateSticker.tsx
+++ b/components/calender/modals/AddUpdateSticker.tsx
@@ -30,6 +30,7 @@ interface AddStickerProps {
   updateStep: React.Dispatch<React.SetStateAction<number>>;
   selectedSticker: StickerVal;
   updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  currDate: Date;
 }
 
 /**
@@ -52,7 +53,8 @@ const AddUpdateSticker = ({
   step,
   updateStep,
   selectedSticker,
-  updateSelectedSticker
+  updateSelectedSticker,
+  currDate
 }: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
@@ -61,7 +63,7 @@ const AddUpdateSticker = ({
   // ! Update these states to say "add" and "edit" for easier reading.
 
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
-    isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
+    isSameDay(date, currDate) ? "currDate" : "notCurrDate"
   );
 
   const handleClose = () => {
diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx
index 6feecc2..a558f80 100644
--- a/contexts/CalenderContext.tsx
+++ b/contexts/CalenderContext.tsx
@@ -240,7 +240,11 @@ const CalenderContextProvider = ({
     }
   };
 
-  const calenderContextValues = {
+    // * Attempting to fix an issue with static generation where the date does not appear to be updating after initial generation.
+    const [currDate] = useState<Date>(new Date);
+
+  const calenderContextValues: CalenderContextState = {
+    currDate,
     selectedDate,
     title: selectedDateInfo.title,
     layout: selectedDateInfo.layout,
diff --git a/types/CalenderContext.d.ts b/types/CalenderContext.d.ts
index 76df92d..a3e0f71 100644
--- a/types/CalenderContext.d.ts
+++ b/types/CalenderContext.d.ts
@@ -55,6 +55,7 @@ interface UpdateCalendarProps {
 }
 
 interface CalenderContextState {
+  currDate: Date;
   selectedDate: Date;
   title: string;
   layout: MonthLayout;