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

src/components/calender/modals/AddUpdateSticker.tsx

@@ -13,18 +13,18 @@ import {
   SimpleGrid,
   Box
 } from "@chakra-ui/react";
-import React, { useState, useContext, useRef } from "react";
+import React, { useState, useRef } from "react";
 import { format, isSameDay } from "date-fns";
 import { Icon } from "@iconify/react";
-import { StickersContext } from "../../../../contexts/StickerContext";
 import StickerSelector from "./StickerSelector";
 import DemoStickers from "../stickers/DemoStickers";
+import { useAppDispatch } from "../../../app/hooks";
+import { addEditSticker } from "../../../features/calender/stickers";
 
 interface AddStickerProps {
   isOpen: boolean;
   updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  date: Date;
-  updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  date: string;
   currSticker: StickerVal;
   step: number;
   updateStep: React.Dispatch<React.SetStateAction<number>>;
@@ -37,8 +37,7 @@ interface AddStickerProps {
  * Handles adding and modifying the stickers for the given month.
  * @param {boolean} isOpen Tells the component when the modal should be open.
  * @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen Used to close the modal.
- * @param {date} date The date for which the sticker will be added or modified.
- * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the sticker.
+ * @param {date} string The date for which the sticker will be added or modified.
  * @param {StickerVal} currSticker The current sticker for the date.
  * @param {number} step A numerical variable that represents the page the modal should be at.
  * @param {React.Dispatch<React.SetStateAction<number>>} updateStep Used to navigate the pages of the modal by updating the step the modal is on.
@@ -48,7 +47,6 @@ const AddUpdateSticker = ({
   isOpen,
   updateIsOpen,
   date,
-  updateSticker,
   currSticker,
   step,
   updateStep,
@@ -56,14 +54,13 @@ const AddUpdateSticker = ({
   updateSelectedSticker,
   currDate
 }: AddStickerProps): JSX.Element => {
-  // TODO: Import the stickers array from the calender context.
-
-  const { addEditSticker } = useContext(StickersContext);
+  const dispatch = useAppDispatch();
+  const currDateObj = new Date(date);
 
   // ! Update these states to say "add" and "edit" for easier reading.
 
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
-    isSameDay(date, currDate) ? "currDate" : "notCurrDate"
+    isSameDay(currDateObj, currDate) ? "currDate" : "notCurrDate"
   );
 
   const handleClose = () => {
@@ -71,9 +68,8 @@ const AddUpdateSticker = ({
   };
 
   // TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted.
-  const handleSubmit = (sticker) => {
-    const newSticker: Sticker = addEditSticker(date, sticker);
-    updateSticker(newSticker.sticker);
+  const handleSubmit = (sticker: StickerVal) => {
+    dispatch(addEditSticker({ date, sticker }));
     handleClose();
   };
 
@@ -85,7 +81,10 @@ const AddUpdateSticker = ({
   const variants = {
     currDate: [
       {
-        header: `Which sticker did you earn for ${format(date, "LLL d, y")}?`,
+        header: `Which sticker did you earn for ${format(
+          currDateObj,
+          "LLL d, y"
+        )}?`,
         body: (
           <VStack
             w="100%"
@@ -122,7 +121,7 @@ const AddUpdateSticker = ({
     notCurrDate: [
       {
         header: `Which sticker did you want to update for ${format(
-          date,
+          currDateObj,
           "LLL d, y"
         )}?`,
         body: (
@@ -164,7 +163,7 @@ const AddUpdateSticker = ({
       },
       {
         header: `Are you sure you want to change the sticker for ${format(
-          date,
+          currDateObj,
           "M/d/y"
         )}?`,
         body: (