Calender context moved into redux.

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}`
                   }
                 />
               );