Calender Navigation #13
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user