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

Clicking on overflow dates activated navigation forward or backwards 1 month.

Browse Source
This commit is contained in:
Lucid Kobold
2021-12-29 18:15:53 -06:00
parent 12a1b3a54c
commit 1ea9e7ef46
3 changed files with 47 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/calender/index.tsx
View File

@@ -2,7 +2,8 @@ import React, { useContext, useEffect, useState } from "react";
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
import CalenderNav from "./CalenderNav";
import { CalenderContext } from "../../contexts/CalenderContext";
import { getDate } from "date-fns";
import { getDate, sub, add, getYear, getMonth } from "date-fns";
import { useRouter } from "next/router";
// TODO: import types
interface UpdateCalendarProps {
@@ -12,7 +13,8 @@ interface UpdateCalendarProps {
}
const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
const { layout, updateDate } = useContext(CalenderContext);
const { selectedDate, layout, updateDate } = useContext(CalenderContext);
const router = useRouter();
useEffect(() => {
if (newDate) {
@@ -42,7 +44,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
const height = window.innerHeight - 60;
setHeight(`${height}px`);
}
}, [])
}, []);
return (
<VStack h={height} w="100%">
@@ -89,7 +91,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
const thisWeek = month[week];
return thisWeek.map((day) => {
const { date, isOverflow } = day;
const { date, isOverflow, overflowDirection } = day;
return (
<Box
@@ -99,6 +101,26 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
w="100%"
h="100%"
key={date}
{...(isOverflow && {
onClick: () => {
if (overflowDirection === "next") {
console.log(overflowDirection);
const newMonth = add(selectedDate, { months: 1 });
const year = getYear(newMonth);
const month = getMonth(newMonth) + 1;
router.push(`/calendar/${year}/${month}`);
} else if (overflowDirection === "prev") {
const newMonth = sub(selectedDate, { months: 1 });
const year = getYear(newMonth);
const month = getMonth(newMonth) + 1;
router.push(`/calendar/${year}/${month}`);
}
}
})}
>
<Text w="100%" h="100%">
{`Day ${getDate(date)}`}