Stickers now updating in local state, the context state is not.

components/calender/Day.tsx

@@ -61,6 +61,8 @@ const Day = ({
   // This handles the modal for this date.
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  const [stickerState, setStickerState] = useState<StickerVal>(sticker);
+
   /**
    * TODO: Add logic to remove the onClick within overflow dates.
    * Do not give dates for the next month an onClick.
@@ -96,15 +98,12 @@ const Day = ({
           <Text w="auto" h="auto">
             {`${getDate(date)}`}
           </Text>
-          {sticker !== null ? (
-            <Box fontSize="1.5rem">
-              <DemoStickers stickerVal={sticker} />
-            </Box>
-          ) : (
-            <Box fontSize="1.5rem">
-              <span aria-label="spacer">&nbsp;</span>
-            </Box>
-          )}
+          <Box
+            key={stickerState === null ? Math.random() : stickerState}
+            fontSize="1.5rem"
+          >
+            <DemoStickers stickerVal={stickerState} />
+          </Box>
         </VStack>
       )}
       {!isOverflow && (
@@ -140,21 +139,19 @@ const Day = ({
           >
             {`${getDate(date)}`}
           </Text>
-          {sticker !== null ? (
-            <Box fontSize="1.5rem">
-              <DemoStickers stickerVal={sticker} />
-            </Box>
-          ) : (
-            <Box fontSize="1.5rem">
-              <span aria-label="spacer">&nbsp;</span>
-            </Box>
-          )}
+          <Box
+            key={stickerState === null ? Math.random() : stickerState}
+            fontSize="1.5rem"
+          >
+            <DemoStickers stickerVal={stickerState} />
+          </Box>
           <StickersContextProvider>
             {isBefore(date, endOfDay(new Date())) && (
               <AddSticker
                 date={date}
                 isOpen={isOpen}
                 updateIsOpen={setIsOpen}
+                updateSticker={setStickerState}
               />
             )}
           </StickersContextProvider>

components/calender/index.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useEffect } from "react";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
-import CalenderNav from "./CalenderNav";
+import { isSameDay, format } from "date-fns";
 import { CalenderContext } from "../../contexts/CalenderContext";
 import { StickersContext } from "../../contexts/StickerContext";
-import { isSameDay } from "date-fns";
+import CalenderNav from "./CalenderNav";
 import Day from "./Day";
 
 const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
@@ -28,15 +28,12 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
     startOfWeek: "Sunday"
   };
 
-  const currMonth = layout[`${userSettings.startOfWeek.toLowerCase()}`];
+  const currMonth: WeekLayout =
+    layout[`${userSettings.startOfWeek.toLowerCase()}`];
   const { month, weekdays } = currMonth;
 
   // TODO: Move the weekdays into it's own component for responsiveness.
 
-  useEffect(() => {
-    console.log("Stickers month updated");
-  }, [stickersMonth]);
-
   return (
     <VStack h="91vh" w="100%">
       <CalenderNav />
@@ -94,7 +91,12 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                   sticker={sticker}
                   date={date}
                   selectedDate={selectedDate}
-                  key={id}
+                  key={
+                    id.length
+                      ? id
+                      : format(date, "yyyyddLL") +
+                        `/${sticker === null ? 0 : sticker}`
+                  }
                 />
               );
             });

components/calender/modals/AddSticker.tsx

@@ -20,6 +20,7 @@ interface AddStickerProps {
   isOpen: boolean;
   updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   date: Date;
+  updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
 }
 
 /**
@@ -28,11 +29,13 @@ interface AddStickerProps {
  * @param {boolean} props.isOpen tells the component when the modal should be open.
  * @param {React.Dispatch<React.SetStateAction<boolean>>} props.updateIsOpen used to close the modal.
  * @param {date} props.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.
  */
 const AddSticker = ({
   isOpen,
   updateIsOpen,
-  date
+  date,
+  updateSticker
 }: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
@@ -51,13 +54,13 @@ const AddSticker = ({
   const handleClose = () => {
     setSelectedSticker(null);
     updateIsOpen(false);
-  }
-
-  const handleSubmit = (sticker) => {
-    addEditSticker(date, sticker);
-    handleClose();
   };
 
+  const handleSubmit = (sticker) => {
+    const newSticker: Sticker = addEditSticker(date, sticker);
+    updateSticker(newSticker.sticker);
+    handleClose();
+  };
 
   // useEffect(() => {
   //   if (selectedSticker !== null) {

components/calender/stickers/DemoStickers.tsx

@@ -9,6 +9,9 @@ interface DemoStickersProps {
 const DemoStickers: FC<DemoStickersProps> = ({
   stickerVal
 }: DemoStickersProps) => {
+  if (stickerVal === null) {
+    return <span aria-label="spacer">&nbsp;</span>;
+  }
   interface StickerToEmoji {
     [key: string]: JSX.Element;
   }

contexts/StickerContext.tsx

@@ -14,8 +14,8 @@ const StickersContextProvider = ({
   );
 
   // TODO: Add stickers functions here. (Add and edit stickers).
-  const addEditSticker = (date: Date, sticker: ValidStickerVal): void => {
-    const newStickersMonth = [...stickersMonth];
+  const addEditSticker = (date: Date, sticker: ValidStickerVal): Sticker => {
+    const newStickersMonth = stickersMonth.slice();
     const index = getDate(date) - 1;
     const currDate = newStickersMonth[index];
 
@@ -35,11 +35,13 @@ const StickersContextProvider = ({
       sticker: sticker,
       edited: edited,
       manual: false
-    }
+    };
 
     newStickersMonth[index] = newSticker;
 
-    setStickersMonth(newStickersMonth);
+    setStickersMonth(newStickersMonth.slice());
+
+    return newSticker;
   };
 
   // TODO: Add stickers validation function here.

types/CalenderContext.d.ts

@@ -34,15 +34,14 @@ interface MonthInfo {
   title: string;
 }
 
+interface WeekLayout {
+  weekdays: DaysOfWeek;
+  month: Month;
+}
+
 interface MonthLayout {
-  sunday: {
-    weekdays: DaysOfWeek;
-    month: Month;
-  };
-  monday: {
-    weekdays: DaysOfWeek;
-    month: Month;
-  };
+  sunday: WeekLayout;
+  monday: WeekLayout;
 }
 
 interface MonthContext extends MonthInfo {

types/StickerContext.d.ts

@@ -1,6 +1,6 @@
 interface StickersContextState {
   stickersMonth: StickerDays;
-  addEditSticker: (date: Date, sticker: ValidStickerVal) => void;
+  addEditSticker: (date: Date, sticker: ValidStickerVal) => Sticker;
 }
 
 type StickerVal = -2 | -1 | 0 | 1 | 2 | null;