diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index db5add3..dd1ba50 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -1,5 +1,5 @@ import React, { createContext, useState, ReactNode, useEffect } from "react"; -import { endOfMonth, getDate } from "date-fns"; +import { endOfMonth, getDate, sub, add } from "date-fns"; // TODO: import types type days = @@ -46,6 +46,7 @@ const CalenderContextProvider = ({ const [daysOfMonth, setDaysOfMonth] = useState<[number] | [null]>([null]); + // Populate days of the month and update them when the month changes. useEffect(() => { if ( lastDayOfSelectedMonth !== daysOfMonth[daysOfMonth.length - 1] || @@ -64,6 +65,17 @@ const CalenderContextProvider = ({ } }, [selectedMonth, lastDayOfCurrMonth]); + // Update selected month sates when the selected month is updated. + useEffect(() => { + if (endOfSelectedMonth !== endOfMonth(selectedMonth)) { + SetEndOfSelectedDMonth(endOfMonth(selectedMonth)); + } + + if (lastDayOfSelectedMonth !== getDate(endOfSelectedMonth)) { + setLastDayOfSelectedMonth(getDate(endOfSelectedMonth)); + } + }, [selectedMonth]); + // Calender Layout const daysOfWeek = { startOfWeek: { @@ -91,7 +103,21 @@ const CalenderContextProvider = ({ //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting. // Navigation - const prevMonth = (): void => {}; + const prevMonth = (): void => { + const newMonth = sub(today, { + years: 1, + }); + + setSelectedMonth(newMonth); + }; + + const nextMonth = (): void => { + const newMonth = add(today, { + years: 1, + }); + + setSelectedMonth(newMonth); + }; const calenderContextValues = { today,