diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index dc584fd..9ebd4b4 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -1,5 +1,5 @@ import React, { createContext, useState, ReactNode, useEffect } from "react"; -import { endOfMonth, getDate, sub, add } from "date-fns"; +import { endOfMonth, getDate, sub, add, compareAsc } from "date-fns"; // TODO: import types type days = @@ -18,12 +18,16 @@ interface DaysOfWeek { }; } +interface UpdateCalendarProps { + year: number; + month: number; + day: number; +} interface CalenderContextState { - selectedMonth: Date; + selectedDate: Date; daysOfMonth: [number]; daysOfWeek: DaysOfWeek; - prevMonth: () => void; - nextMonth: () => void; + setDate: (date: UpdateCalendarProps) => boolean; } const CalenderContext = createContext({} as CalenderContextState); @@ -34,9 +38,9 @@ const CalenderContextProvider = ({ children: ReactNode; }): JSX.Element => { // Selected month & year - const [selectedMonth, setSelectedMonth] = useState(new Date()); + const [selectedDate, setSelectedDate] = useState(new Date()); const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState( - getDate(endOfMonth(selectedMonth)) + getDate(endOfMonth(selectedDate)) ); const [daysOfMonth, setDaysOfMonth] = useState<[number]>([0]); @@ -71,14 +75,14 @@ const CalenderContextProvider = ({ populateDays(); } } - }, [selectedMonth, endOfSelectedMonth]); + }, [selectedDate, endOfSelectedMonth]); // Update end of month. useEffect(() => { - if (endOfSelectedMonth !== getDate(endOfMonth(selectedMonth))) { - SetEndOfSelectedDMonth(getDate(endOfMonth(selectedMonth))); + if (endOfSelectedMonth !== getDate(endOfMonth(selectedDate))) { + SetEndOfSelectedDMonth(getDate(endOfMonth(selectedDate))); } - }, [selectedMonth]); + }, [selectedDate]); // Calender Layout const daysOfWeek: DaysOfWeek = { @@ -107,28 +111,26 @@ 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 newMonth = sub(selectedMonth, { - months: 1, - }); + const setDate = (input: UpdateCalendarProps): boolean => { + const { year, month: inputMonth, day } = input; - setSelectedMonth(newMonth); - }; + if (!year || !inputMonth || day < 0 || day > 31) { + return false; + } else { + const month = inputMonth - 1; + const customDate: Date = new Date(year, month, day); - const nextMonth = (): void => { - const newMonth = add(selectedMonth, { - months: 1, - }); - - setSelectedMonth(newMonth); + if (compareAsc(customDate, selectedDate) !== 0) { + setSelectedDate(customDate); + } + } }; const calenderContextValues = { - selectedMonth, + selectedDate, daysOfMonth, daysOfWeek, - prevMonth, - nextMonth, + setDate, }; return (