diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index 9cc88c4..a52921b 100644
--- a/components/calender/Day.tsx
+++ b/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)}
>
- {`Day ${getDate(date)}`}
+ {`${getDate(date)}`}
+ {sticker !== null ? (
+
+
+
+ ) : (
+
+
+
+ )}
)}
{!isOverflow && (
@@ -81,7 +94,16 @@ const Day = (props: DayProps): JSX.Element => {
h="100%"
onClick={() => setIsOpen(true)}
>
- {`Day ${getDate(date)}`}
+ {`${getDate(date)}`}
+ {sticker !== null ? (
+
+
+
+ ) : (
+
+
+
+ )}
)}
diff --git a/components/calender/index.tsx b/components/calender/index.tsx
index 5d59a1f..f633573 100644
--- a/components/calender/index.tsx
+++ b/components/calender/index.tsx
@@ -86,44 +86,6 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
selectedDate={selectedDate}
key={format(date, "P")}
/>
- // {
- // 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}`);
- // }
- // }
- // })}
- // >
- //
- // {!isOverflow && }
- // {`Day ${getDate(date)}`}
- //
- //
);
});
})}
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index 378a404..da267e3 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -25,9 +25,11 @@ interface AddStickerProps {
* @param {React.Dispatch>} 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.
diff --git a/components/calender/stickers/DemoStickers.tsx b/components/calender/stickers/DemoStickers.tsx
new file mode 100644
index 0000000..6741aa0
--- /dev/null
+++ b/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 = ({
+ 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": (
+
+ ☀️
+
+ ),
+ "0": (
+
+ ☁️
+
+ ),
+ "-1": (
+
+ 🌧️
+
+ )
+ };
+
+ return stickerToEmoji[`${key}`];
+};
+
+export default DemoStickers;