Calender context moved into redux.

src/components/calender/CalenderNav.tsx

@@ -1,14 +1,19 @@
-import React, { useContext } from "react";
+import React from "react";
 import { useRouter } from "next/router";
 import { HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";
 import { format, isSameMonth, addMonths, subMonths } from "date-fns";
 import findValidDateRange from "../../../lib/findValidDateRange";
 import DatePicker from "./DatePicker";
-import { CalenderContext } from "../../../contexts/CalenderContext";
+import { useAppSelector } from "../../app/hooks";
 
 const CalenderNav = (): JSX.Element => {
-  const { selectedDate } = useContext(CalenderContext);
+  const selectedDate = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
+  const { date } = selectedDate;
+
+  const selectedDateObj = new Date(date);
 
   const validDateRange = findValidDateRange();
   const { start: validStart, end: validEnd } = validDateRange;
@@ -17,14 +22,14 @@ const CalenderNav = (): JSX.Element => {
 
   const handleNavButtons = (direction: "next" | "prev") => {
     if (direction === "next") {
-      const newMonth = addMonths(selectedDate, 1);
+      const newMonth = addMonths(selectedDateObj, 1);
 
       const year = format(newMonth, "y");
       const month = format(newMonth, "L");
 
       router.push(`/calendar/${year}/${month}`);
     } else if (direction === "prev") {
-      const newMonth = subMonths(selectedDate, 1);
+      const newMonth = subMonths(selectedDateObj, 1);
 
       const year = format(newMonth, "y");
       const month = format(newMonth, "L");
@@ -36,14 +41,14 @@ const CalenderNav = (): JSX.Element => {
   return (
     <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
       <IconButton
-        isDisabled={isSameMonth(selectedDate, validStart)}
+        isDisabled={isSameMonth(selectedDateObj, validStart)}
         aria-label="Previous Month"
         icon={<Icon icon="akar-icons:chevron-left" />}
         onClick={() => handleNavButtons("prev")}
       />
       <DatePicker />
       <IconButton
-        isDisabled={isSameMonth(selectedDate, validEnd)}
+        isDisabled={isSameMonth(selectedDateObj, validEnd)}
         aria-label="Next Month"
         icon={<Icon icon="akar-icons:chevron-right" />}
         onClick={() => handleNavButtons("next")}

src/components/calender/DatePicker.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { useRouter } from "next/router";
 import {
   Button,
@@ -27,10 +27,12 @@ import {
 import { format } from "date-fns";
 import findValidDateRange from "../../../lib/findValidDateRange";
 import FormValidateEmoji from "./FormValidateEmoji";
-import { CalenderContext } from "../../../contexts/CalenderContext";
+import { useAppSelector } from "../../app/hooks";
 
 const DatePicker = (): JSX.Element => {
-  const { title } = useContext(CalenderContext);
+  const selectedDate = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
 
   const router = useRouter();
 
@@ -129,7 +131,7 @@ const DatePicker = (): JSX.Element => {
       <PopoverTrigger>
         <Button border="none" variant="outline">
           <Heading w="100%" h="auto">
-            {title}
+            {selectedDate.title}
           </Heading>
         </Button>
       </PopoverTrigger>

src/components/calender/Day.tsx

@@ -19,7 +19,7 @@ interface DayProps {
   overflowDirection?: "next" | "prev" | null;
   sticker: StickerVal;
   date: Date;
-  selectedDate: Date;
+  selectedDate: string;
   currDate: Date;
   isToday: boolean;
 }
@@ -42,17 +42,19 @@ const Day = ({
   currDate,
   isToday
 }: DayProps): JSX.Element => {
+  const selectedDateObj = new Date(selectedDate);
+
   const handleNav = (direction: "next" | "prev") => {
     if (direction === "next") {
       console.log(overflowDirection);
-      const newMonth = add(selectedDate, { months: 1 });
+      const newMonth = add(selectedDateObj, { months: 1 });
 
       const year = getYear(newMonth);
       const month = getMonth(newMonth) + 1;
 
       router.push(`/calendar/${year}/${month}`);
     } else if (direction === "prev") {
-      const newMonth = sub(selectedDate, { months: 1 });
+      const newMonth = sub(selectedDateObj, { months: 1 });
 
       const year = getYear(newMonth);
       const month = getMonth(newMonth) + 1;

src/components/calender/index.tsx

@@ -1,41 +1,50 @@
 import React, { useContext, useEffect } from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { isSameDay, format } from "date-fns";
-import { useAppDiscpatch, useAppSelector } from "../../app/hooks";
-import { updateCurrDate, updateMonth } from '../../features/calender/calender';
-import { CalenderContext } from "../../../contexts/CalenderContext";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { updateCurrDate, updateMonth } from "../../features/calender/calender";
 import { StickersContext } from "../../../contexts/StickerContext";
 import CalenderNav from "./CalenderNav";
 import Day from "./Day";
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
-  const currDate: Date = useAppSelector(state => state.calender.currDate);
-  const seletedMonth = useAppSelector(state => state.calender.selectedDateInfo);
+  const currDate: string = useAppSelector((state) => state.calender.currDate);
+  const selectedDate = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
+  const { layout } = selectedDate;
 
+  const dispatch = useAppDispatch();
 
-  const { selectedDate, layout, updateDate,/* currDate, */setCurrDate } =
-    useContext(CalenderContext);
   const { stickersMonth } = useContext(StickersContext);
 
+  const currDateObj = new Date(currDate);
+
   useEffect(() => {
     if (newDate && newDate.year && newDate.month && newDate.day) {
       const { year, month, day } = newDate;
 
       if (year > 0 && month > 0 && day > 0) {
-        updateDate(newDate);
+        const generatedDate: Date = new Date(year, month - 1, day);
+        const dateString: string = generatedDate.toJSON();
+
+        dispatch(updateMonth(dateString));
       } else {
         console.warn("Invalid date format: ", newDate);
       }
     }
-  }, [newDate, updateDate]);
+  }, [dispatch, newDate]);
 
   useEffect(() => {
     console.info("Check to update date.");
-    if (!isSameDay(currDate, new Date())) {
+
+    const currDateObj = new Date(currDate);
+
+    if (!isSameDay(currDateObj, new Date())) {
       console.info("Updated date.");
-      setCurrDate(new Date());
+      dispatch(updateCurrDate());
     }
-  }, [currDate, setCurrDate]);
+  }, [currDate, dispatch]);
 
   // Simulated user settings context
   const userSettings = {
@@ -87,12 +96,14 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
             return thisWeek.map((day: MonthDay) => {
               const { date, isOverflow, overflowDirection } = day;
 
+              const toDateObj: Date = new Date(date);
+
               let sticker = null;
 
               let id = "";
 
               stickersMonth.map((stickerDay) => {
-                if (isSameDay(stickerDay.date, date)) {
+                if (isSameDay(stickerDay.date, toDateObj)) {
                   sticker = stickerDay.sticker;
 
                   id = stickerDay.id;
@@ -104,15 +115,15 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                   isOverflow={isOverflow}
                   overflowDirection={overflowDirection}
                   sticker={sticker}
-                  date={date}
-                  selectedDate={selectedDate}
-                  currDate={currDate}
-                  isToday={isSameDay(currDate, date)}
+                  date={toDateObj}
+                  selectedDate={selectedDate.date}
+                  currDate={currDateObj}
+                  isToday={isSameDay(currDateObj, toDateObj)}
                   key={
                     id.length
                       ? id
-                      : format(date, "yyyyddLL") +
-                      `/${sticker === null ? 0 : sticker}`
+                      : format(toDateObj, "yyyyddLL") +
+                        `/${sticker === null ? 0 : sticker}`
                   }
                 />
               );