Formatting. Added demo stickers as emojis. Added TODOs.

components/calender/Day.tsx

@@ -3,6 +3,7 @@ import { add, getYear, getMonth, sub, getDate } from "date-fns";
 import router from "next/router";
 import React, { Fragment, useState } from "react";
 import AddSticker from "./modals/AddSticker";
+import DemoStickers from "./stickers/DemoStickers";
 
 interface DayProps {
   isOverflow?: boolean;
@@ -21,10 +22,13 @@ interface DayProps {
  * @param {date} props.date the date for this day.
  * @param {date} props.selectedDate the date for the selected month.
  */
-const Day = (props: DayProps): JSX.Element => {
-  const { isOverflow, overflowDirection, /*sticker,*/ date, selectedDate } =
-    props;
-
+const Day = ({
+  isOverflow,
+  overflowDirection,
+  sticker,
+  date,
+  selectedDate
+}: DayProps): JSX.Element => {
   const handleNav = (direction: "next" | "prev") => {
     if (direction === "next") {
       console.log(overflowDirection);
@@ -68,8 +72,17 @@ const Day = (props: DayProps): JSX.Element => {
           onClick={() => handleNav(overflowDirection)}
         >
           <Text w="100%" h="100%">
-            {`Day ${getDate(date)}`}
+            {`${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>
       )}
       {!isOverflow && (
@@ -81,7 +94,16 @@ const Day = (props: DayProps): JSX.Element => {
           h="100%"
           onClick={() => setIsOpen(true)}
         >
-          <Text>{`Day ${getDate(date)}`}</Text>
+          <Text>{`${getDate(date)}`}</Text>
+          {sticker !== null ? (
+            <Box fontSize="1.5rem">
+              <DemoStickers stickerVal={sticker} />
+            </Box>
+          ) : (
+            <Box fontSize="1.5rem">
+              <span aria-label="spacer">&nbsp;</span>
+            </Box>
+          )}
           <AddSticker date={date} isOpen={isOpen} updateIsOpen={setIsOpen} />
         </Box>
       )}

components/calender/index.tsx

@@ -86,44 +86,6 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
                 selectedDate={selectedDate}
                 key={format(date, "P")}
               />
-              // <Box
-              //   bg="transparent"
-              //   color={isOverflow ? "gray.600" : "whiteAlpha"}
-              //   border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
-              //   w="100%"
-              //   h="100%"
-              //   key={date}
-              //   {...(isOverflow && {
-              //     _hover: {
-              //       cursor: "pointer"
-              //     }
-              //   })}
-              //   {...(isOverflow && {
-              //     onClick: () => {
-              //       if (overflowDirection === "next") {
-              //         console.log(overflowDirection);
-              //         const newMonth = add(selectedDate, { months: 1 });
-
-              //         const year = getYear(newMonth);
-              //         const month = getMonth(newMonth) + 1;
-
-              //         router.push(`/calendar/${year}/${month}`);
-              //       } else if (overflowDirection === "prev") {
-              //         const newMonth = sub(selectedDate, { months: 1 });
-
-              //         const year = getYear(newMonth);
-              //         const month = getMonth(newMonth) + 1;
-
-              //         router.push(`/calendar/${year}/${month}`);
-              //       }
-              //     }
-              //   })}
-              // >
-              //   <Text w="100%" h="100%">
-              //     {!isOverflow && <AddSticker />}
-              //     {`Day ${getDate(date)}`}
-              //   </Text>
-              // </Box>
             );
           });
         })}

components/calender/modals/AddSticker.tsx

@@ -25,9 +25,11 @@ interface AddStickerProps {
  * @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.
  */
-const AddSticker = (props: AddStickerProps): JSX.Element => {
-  const { isOpen, updateIsOpen, date } = props;
-
+const AddSticker = ({
+  isOpen,
+  updateIsOpen,
+  date
+}: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
   // TODO: Add a function that will add or update the sticker for the current date.

components/calender/stickers/DemoStickers.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react";
+
+// TODO: When themes are made import the theme from user settings context. Refactor to use whatever those SVGs are.
+
+interface DemoStickersProps {
+  stickerVal: 2 | 1 | 0 | -1 | -2;
+}
+
+const DemoStickers: FC<DemoStickersProps> = ({
+  stickerVal
+}: DemoStickersProps) => {
+  interface StickerToEmoji {
+    [key: string]: JSX.Element;
+  }
+
+  let key = "0";
+
+  if (stickerVal > 0) {
+    key = "1";
+  } else if (stickerVal < 0) {
+    key = "-1";
+  }
+
+  const stickerToEmoji: StickerToEmoji = {
+    "1": (
+      <span role="img" aria-label="Sun">
+        ☀️
+      </span>
+    ),
+    "0": (
+      <span role="img" aria-label="Cloud">
+        ☁️
+      </span>
+    ),
+    "-1": (
+      <span role="img" aria-label="Raining Cloud">
+        🌧️
+      </span>
+    )
+  };
+
+  return stickerToEmoji[`${key}`];
+};
+
+export default DemoStickers;