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"}
+            border={isSameDay(currDate, date) ? "1px solid #0068ff" : "0px"}
-            borderRadius={isSameDay(new Date(), date) ? "100px" : "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>

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

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 = () => {

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,

types/CalenderContext.d.ts

@@ -55,6 +55,7 @@ interface UpdateCalendarProps {
 }
 
 interface CalenderContextState {
+  currDate: Date;
   selectedDate: Date;
   title: string;
   layout: MonthLayout;