Calender Navigation #13

Merged
LucidKobold merged 15 commits from context into main 2021-12-01 15:34:58 -05:00
6 changed files with 168 additions and 55 deletions
Showing only changes of commit f7a35bc3f5 - Show all commits

View File

@@ -5,15 +5,16 @@ import { format } from "date-fns";
import { CalenderContext } from "../../contexts/CalenderContext"; import { CalenderContext } from "../../contexts/CalenderContext";
const CalenderNav = (): JSX.Element => { const CalenderNav = (): JSX.Element => {
const { today } = useContext(CalenderContext); const { selectedMonth, prevMonth, nextMonth } = useContext(CalenderContext);
const currentMonth = format(today, "LLLL uuuu"); const currentMonth = format(selectedMonth, "LLLL uuuu");
return ( return (
<HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center"> <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
<IconButton <IconButton
aria-label="Previous Month" aria-label="Previous Month"
icon={<Icon icon="akar-icons:chevron-left" />} icon={<Icon icon="akar-icons:chevron-left" />}
onClick={() => prevMonth()}
/> />
<Heading w="100%" h="auto"> <Heading w="100%" h="auto">
{currentMonth} {currentMonth}
@@ -21,6 +22,7 @@ const CalenderNav = (): JSX.Element => {
<IconButton <IconButton
aria-label="Next Month" aria-label="Next Month"
icon={<Icon icon="akar-icons:chevron-right" />} icon={<Icon icon="akar-icons:chevron-right" />}
onClick={() => nextMonth()}
/> />
</HStack> </HStack>
); );

View File

@@ -19,7 +19,6 @@ type days =
} }
interface CalenderContextState { interface CalenderContextState {
today: Date;
selectedMonth: Date; selectedMonth: Date;
daysOfMonth: [number] | [null]; daysOfMonth: [number] | [null];
daysOfWeek: DaysOfWeek; daysOfWeek: DaysOfWeek;
@@ -65,7 +64,7 @@ const CalenderContextProvider = ({
setDaysOfMonth(newDaysOfMonth); setDaysOfMonth(newDaysOfMonth);
} }
}, [selectedMonth, lastDayOfCurrMonth]); }, [selectedMonth, lastDayOfSelectedMonth]);
// Update selected month sates when the selected month is updated. // Update selected month sates when the selected month is updated.
useEffect(() => { useEffect(() => {
@@ -106,23 +105,22 @@ const CalenderContextProvider = ({
// Navigation // Navigation
const prevMonth = (): void => { const prevMonth = (): void => {
const newMonth = sub(today, { const newMonth = sub(selectedMonth, {
years: 1, months: 1,
}); });
setSelectedMonth(newMonth); setSelectedMonth(newMonth);
}; };
const nextMonth = (): void => { const nextMonth = (): void => {
const newMonth = add(today, { const newMonth = add(selectedMonth, {
years: 1, months: 1,
}); });
setSelectedMonth(newMonth); setSelectedMonth(newMonth);
}; };
const calenderContextValues = { const calenderContextValues = {
today,
selectedMonth, selectedMonth,
daysOfMonth, daysOfMonth,
daysOfWeek, daysOfWeek,