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

Added todos. Refactored month component to use the day component.

Browse Source
This commit is contained in:
Lucid Kobold
2022-01-04 11:55:19 -06:00
parent c5490e1502
commit f25fbdcbc4
3 changed files with 104 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
components/calender/Day.tsx
View File

@@ -1,33 +1,23 @@
import { Box, Text } from "@chakra-ui/react";
import { add, getYear, getMonth, sub, getDate,format } from "date-fns";
import { add, getYear, getMonth, sub, getDate } from "date-fns";
import router from "next/router";
import React, { Fragment } from "react";
import AddSticker from "./modals/AddSticker";
const Day = (
isOverflow: boolean,
date: Date,
overflowDirection: "next" | "prev" | null,
selectedDate: Date
) => {
return (
<Fragment>
{isOverflow && (
<Box
bg="transparent"
color={isOverflow ? "gray.600" : "whiteAlpha"}
border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
w="100%"
h="100%"
key={format(date, "P")}
{...(isOverflow && {
_hover: {
cursor: "pointer"
interface DayProps {
isOverflow?: boolean;
overflowDirection?: "next" | "prev" | null;
sticker: -2 | -1 | 0 | 1 | 2 | null;
date: Date;
selectedDate: Date;
}
})}
{...(isOverflow && {
onClick: () => {
if (overflowDirection === "next") {
const Day = (props: DayProps): JSX.Element => {
const { isOverflow, overflowDirection, /*sticker,*/ date, selectedDate } =
props;
const handleNav = (direction: "next" | "prev") => {
if (direction === "next") {
console.log(overflowDirection);
const newMonth = add(selectedDate, { months: 1 });
@@ -35,7 +25,7 @@ const Day = (
const month = getMonth(newMonth) + 1;
router.push(`/calendar/${year}/${month}`);
} else if (overflowDirection === "prev") {
} else if (direction === "prev") {
const newMonth = sub(selectedDate, { months: 1 });
const year = getYear(newMonth);
@@ -43,15 +33,43 @@ const Day = (
router.push(`/calendar/${year}/${month}`);
}
}
})}
};
return (
<Fragment>
{isOverflow && (
<Box
bg="transparent"
color="gray.600"
border="2px solid #181d8f"
w="100%"
h="100%"
_hover={{
cursor: "pointer"
}}
onClick={() => handleNav(overflowDirection)}
>
<Text w="100%" h="100%">
{!isOverflow && <AddSticker />}
{`Day ${getDate(date)}`}
</Text>
</Box>
)}
{!isOverflow && (
<Box
bg="transparent"
color="whiteAlpha"
border="2px solid #0068ff"
w="100%"
h="100%"
/**
* TODO: Add an onClick that will trigger the opening of a modal.
* Update the modal to take in an isOpen bool that will handle the open state.
*/
>
<Text>{`Day ${getDate(date)}`}</Text>
<AddSticker />
</Box>
)}
</Fragment>
);
};

86
components/calender/index.tsx
View File

@@ -2,9 +2,8 @@ import React, { useContext, useEffect } from "react";
import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
import CalenderNav from "./CalenderNav";
import { CalenderContext } from "../../contexts/CalenderContext";
import { getDate, sub, add, getYear, getMonth } from "date-fns";
import { useRouter } from "next/router";
import AddSticker from "./modals/AddSticker";
import { format } from "date-fns";
import Day from "./Day";
// TODO: import types
interface UpdateCalendarProps {
@@ -15,7 +14,6 @@ interface UpdateCalendarProps {
const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
const { selectedDate, layout, updateDate } = useContext(CalenderContext);
const router = useRouter();
useEffect(() => {
if (newDate) {
@@ -82,48 +80,56 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
{Object.keys(month).map((week) => {
const thisWeek = month[week];
return thisWeek.map((day) => {
const { date, isOverflow, overflowDirection } = day;
return thisWeek.map((day: MonthDay) => {
const { sticker, date, isOverflow, overflowDirection } = day;
return (
<Box
bg="transparent"
color={isOverflow ? "gray.600" : "whiteAlpha"}
border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
w="100%"
h="100%"
key={date}
{...(isOverflow && {
_hover: {
cursor: "pointer"
}
})}
{...(isOverflow && {
onClick: () => {
if (overflowDirection === "next") {
console.log(overflowDirection);
const newMonth = add(selectedDate, { months: 1 });
<Day
isOverflow={isOverflow}
overflowDirection={overflowDirection}
sticker={sticker}
date={date}
selectedDate={selectedDate}
key={format(date, "P")}
/>
// <Box
// bg="transparent"
// color={isOverflow ? "gray.600" : "whiteAlpha"}
// border={isOverflow ? "2px solid #181d8f" : "2px solid #0068ff"}
// w="100%"
// h="100%"
// key={date}
// {...(isOverflow && {
// _hover: {
// cursor: "pointer"
// }
// })}
// {...(isOverflow && {
// onClick: () => {
// if (overflowDirection === "next") {
// console.log(overflowDirection);
// const newMonth = add(selectedDate, { months: 1 });
const year = getYear(newMonth);
const month = getMonth(newMonth) + 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 });
// router.push(`/calendar/${year}/${month}`);
// } else if (overflowDirection === "prev") {
// const newMonth = sub(selectedDate, { months: 1 });
const year = getYear(newMonth);
const month = getMonth(newMonth) + 1;
// const year = getYear(newMonth);
// const month = getMonth(newMonth) + 1;
router.push(`/calendar/${year}/${month}`);
}
}
})}
>
<Text w="100%" h="100%">
{!isOverflow && <AddSticker />}
{`Day ${getDate(date)}`}
</Text>
</Box>
// router.push(`/calendar/${year}/${month}`);
// }
// }
// })}
// >
// <Text w="100%" h="100%">
// {!isOverflow && <AddSticker />}
// {`Day ${getDate(date)}`}
// </Text>
// </Box>
);
});
})}

5
components/calender/modals/AddSticker.tsx
View File

@@ -16,7 +16,10 @@ const AddSticker = (): JSX.Element => {
return (
<Fragment>
<Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
{/**
* TODO: Add prop that will be the trigger for opening the modal.
* <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
*/}
<Modal isOpen={isOpen} onClose={() => setIsOpen(!isOpen)}>
<ModalOverlay />