wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Updated calender nav functions.

Browse Source
This commit is contained in:
Lucid Kobold
2021-12-05 16:48:14 -06:00
parent 00d6d8edb4
commit e6b190c3cd
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
contexts/CalenderContext.tsx
View File

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