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

Calender Navigation #13

Merged
LucidKobold merged 15 commits from context into main 2021-12-01 15:34:58 -05:00
Conversation 1 Commits 15 Files Changed 9 +176 -56
7 changed files with 176 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 77a6bf777a - Show all commits

55
contexts/CalenderContext.tsx
View File

@@ -20,7 +20,7 @@ interface DaysOfWeek {
interface CalenderContextState { interface CalenderContextState {
selectedMonth: Date; selectedMonth: Date;
daysOfMonth: [number] | [null]; daysOfMonth: [number];
daysOfWeek: DaysOfWeek; daysOfWeek: DaysOfWeek;
prevMonth: () => void; prevMonth: () => void;
nextMonth: () => void; nextMonth: () => void;
@@ -38,42 +38,49 @@ const CalenderContextProvider = ({
// Selected month & year // Selected month & year
const [selectedMonth, setSelectedMonth] = useState<Date>(today); const [selectedMonth, setSelectedMonth] = useState<Date>(today);
const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState<Date>( const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState<number>(
endOfMonth(selectedMonth) getDate(endOfMonth(selectedMonth))
);
const [lastDayOfSelectedMonth, setLastDayOfSelectedMonth] = useState<number>(
getDate(endOfSelectedMonth)
); );
const [daysOfMonth, setDaysOfMonth] = useState<[number] | [null]>([null]); const [daysOfMonth, setDaysOfMonth] = useState<[number]>([0]);
// Populate days of the month and update them when the month changes. // Update or populate the days of the month.
useEffect(() => { const populateDays = (): void => {
if ( let newDaysOfMonth: [number] = [...daysOfMonth];
lastDayOfSelectedMonth !== daysOfMonth[daysOfMonth.length - 1] ||
daysOfMonth === null if (newDaysOfMonth.length > 1) {
) { newDaysOfMonth = [0];
const newDaysOfMonth: [number] = [0];
for (let i = daysOfMonth.length; i < lastDayOfSelectedMonth; i++) {
if (newDaysOfMonth.length === 1) {
newDaysOfMonth[0] = 1;
} }
newDaysOfMonth.push(newDaysOfMonth.length + 1); for (let i = 1; i < endOfSelectedMonth; i++) {
if (newDaysOfMonth[i - 1] === 0) {
newDaysOfMonth[i - 1] = i;
} else {
newDaysOfMonth.push(i + 1);
}
} }
setDaysOfMonth(newDaysOfMonth); setDaysOfMonth(newDaysOfMonth);
} };
}, [selectedMonth, lastDayOfSelectedMonth]);
// Update selected month sates when the selected month is updated. // Update selected month sates when the selected month is updated.
// Update days of month.
useEffect(() => { useEffect(() => {
if (endOfSelectedMonth !== endOfMonth(selectedMonth)) { if (daysOfMonth === null) {
SetEndOfSelectedDMonth(endOfMonth(selectedMonth)); populateDays();
} else {
if (daysOfMonth[daysOfMonth.length - 1] !== endOfSelectedMonth) {
populateDays();
}
} }
if (lastDayOfSelectedMonth !== getDate(endOfSelectedMonth)) { }, [selectedMonth, endOfSelectedMonth]);
setLastDayOfSelectedMonth(getDate(endOfSelectedMonth));
// Update end of month.
useEffect(() => {
if (endOfSelectedMonth !== getDate(endOfMonth(selectedMonth))) {
SetEndOfSelectedDMonth(getDate(endOfMonth(selectedMonth)));
} }
}, [selectedMonth]); }, [selectedMonth]);