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;