diff --git a/components/calender/index.tsx b/components/calender/index.tsx index 8c3ac88..7cec863 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -2,11 +2,13 @@ import React, { useContext, useEffect } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import CalenderNav from "./CalenderNav"; import { CalenderContext } from "../../contexts/CalenderContext"; -import { format } from "date-fns"; +import { StickersContext } from "../../contexts/StickerContext"; +import { format, isSameDay } from "date-fns"; import Day from "./Day"; const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { const { selectedDate, layout, updateDate } = useContext(CalenderContext); + const { stickersMonth } = useContext(StickersContext); useEffect(() => { if (newDate) { @@ -31,6 +33,10 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { // TODO: Move the weekdays into it's own component for responsiveness. + useEffect(() => { + console.log("Stickers month updated"); + }, [stickersMonth]); + return ( @@ -67,7 +73,19 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { const thisWeek = month[week]; return thisWeek.map((day: MonthDay) => { - const { sticker, date, isOverflow, overflowDirection } = day; + const { date, isOverflow, overflowDirection } = day; + + let sticker = null; + + let id = ""; + + stickersMonth.map((stickerDay) => { + if (isSameDay(stickerDay.date, date)) { + sticker = stickerDay.sticker; + + id = stickerDay.id; + } + }); return ( { sticker={sticker} date={date} selectedDate={selectedDate} - key={format(date, "P")} + key={id} /> ); });