Moved stickers state to redux. Removed unneded type definitions. Refactored components to accomdate changes in types and interfaces.

src/components/calender/Day.tsx

@@ -10,15 +10,16 @@ import {
 } from "date-fns";
 import router from "next/router";
 import React, { Fragment, useState } from "react";
-import { StickersContextProvider } from "../../../contexts/StickerContext";
 import AddUpdateSticker from "./modals/AddUpdateSticker";
 import DemoStickers from "./stickers/DemoStickers";
+import { Provider } from "react-redux";
+import { store } from "../../app/store";
 
 interface DayProps {
   isOverflow?: boolean;
   overflowDirection?: "next" | "prev" | null;
   sticker: StickerVal;
-  date: Date;
+  date: string;
   selectedDate: string;
   currDate: Date;
   isToday: boolean;
@@ -26,12 +27,11 @@ interface DayProps {
 
 /**
  * The individual days in the calender component.
- * @param props the props for this component.
- * @param {boolean} props.isOverflow is the current date being given before or after the current month.
- * @param {"next" | "prev" | null} props.overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month.
- * @param {StickerVal} props.sticker the sticker for this date.
- * @param {date} props.date the date for this day.
- * @param {date} props.selectedDate the date for the selected month.
+ * @param {boolean} isOverflow is the current date being given before or after the current month.
+ * @param {"next" | "prev" | null} overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month.
+ * @param {StickerVal} sticker the sticker for this date.
+ * @param {date} string the date for this day.
+ * @param {date} selectedDate the date for the selected month.
  */
 const Day = ({
   isOverflow,
@@ -43,6 +43,7 @@ const Day = ({
   isToday
 }: DayProps): JSX.Element => {
   const selectedDateObj = new Date(selectedDate);
+  const currDateObj = new Date(date);
 
   const handleNav = (direction: "next" | "prev") => {
     if (direction === "next") {
@@ -66,10 +67,6 @@ const Day = ({
   // This handles the modal for the day.
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  // The current sticker to be displayed on the current date.
-  // * This is temporary. There should be no need for this once persistent storage is used. This is being used as a workaround to a bug.
-  const [stickerState, setStickerState] = useState<StickerVal>(sticker);
-
   // The step the modal is at.
   const [step, setStep] = useState<number>(0);
 
@@ -95,7 +92,9 @@ const Day = ({
           w="100%"
           h="100%"
           _hover={{
-            cursor: isBefore(date, endOfDay(currDate)) ? "pointer" : "default",
+            cursor: isBefore(currDateObj, endOfDay(currDate))
+              ? "pointer"
+              : "default",
             background: "gray.700",
             border: "1px solid #FFF",
             color: "whiteAlpha.900"
@@ -107,15 +106,10 @@ const Day = ({
           pt={2}
         >
           <Text w="auto" h="auto">
-            {`${getDate(date)}`}
+            {`${getDate(currDateObj)}`}
           </Text>
-          <Box
-            key={stickerState === null ? Math.random() : stickerState}
-            fontSize="1.5rem"
-          >
-            <DemoStickers
-              stickerVal={stickerState === null ? null : stickerState}
-            />
+          <Box key={sticker} fontSize="1.5rem">
+            <DemoStickers stickerVal={sticker} />
           </Box>
         </VStack>
       )}
@@ -134,7 +128,9 @@ const Day = ({
           justifyContent="flex-start"
           pt={2}
           _hover={{
-            cursor: isBefore(date, endOfDay(currDate)) ? "pointer" : "default",
+            cursor: isBefore(currDateObj, endOfDay(currDate))
+              ? "pointer"
+              : "default",
             background: "gray.700",
             border: "1px solid #FFF"
           }}
@@ -142,7 +138,7 @@ const Day = ({
           <Text
             p={
               isToday
-                ? getDate(date) > 10
+                ? getDate(currDateObj) > 10
                   ? "0px 6px 3px 6px"
                   : "0px 9px 3px 9px"
                 : "auto"
@@ -152,24 +148,18 @@ const Day = ({
             border={isToday ? "1px solid #0068ff" : "0px"}
             borderRadius={isToday ? "100px" : "0px"}
           >
-            {`${getDate(date)}`}
+            {`${getDate(currDateObj)}`}
           </Text>
-          <Box
-            key={stickerState === null ? Math.random() : stickerState}
-            fontSize="1.5rem"
-          >
-            <DemoStickers
-              stickerVal={stickerState === null ? null : stickerState}
-            />
+          <Box key={sticker} fontSize="1.5rem">
+            <DemoStickers stickerVal={sticker} />
           </Box>
-          <StickersContextProvider>
-            {isBefore(date, endOfDay(currDate)) && (
+          <Provider store={store}>
+            {isBefore(currDateObj, endOfDay(currDate)) && (
               <AddUpdateSticker
                 date={date}
                 isOpen={isOpen}
                 updateIsOpen={setIsOpen}
-                updateSticker={setStickerState}
-                currSticker={stickerState}
+                currSticker={sticker}
                 step={step}
                 updateStep={setStep}
                 selectedSticker={selectedSticker}
@@ -177,7 +167,7 @@ const Day = ({
                 currDate={currDate}
               />
             )}
-          </StickersContextProvider>
+          </Provider>
         </VStack>
       )}
     </Fragment>