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

Calender nav #42

Merged
LucidKobold merged 20 commits from calender-nav into main 2022-03-27 02:48:04 -04:00
Conversation 1 Commits 20 Files Changed 8 +169 -32
6 changed files with 169 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit aaf42cca57 - Show all commits

149
pages/calendar/[...date].tsx
View File

@@ -1,17 +1,16 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useState } from "react";
import { Box } from "@chakra-ui/react"; import { Box } from "@chakra-ui/react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { import {
endOfMonth, endOfMonth,
getDate, getDate
getDay, // getMonth,
getMonth, // getYear,
getYear, // isAfter,
isAfter, // isBefore,
isBefore, // isSameMonth
isSameMonth
} from "date-fns"; } from "date-fns";
import findValidDateRange from "../../lib/findValidDateRange"; // import findValidDateRange from "../../lib/findValidDateRange";
import ErrorPage from "next/error"; import ErrorPage from "next/error";
import Calender from "../../components/calender"; import Calender from "../../components/calender";
import { CalenderContextProvider } from "../../contexts/CalenderContext"; import { CalenderContextProvider } from "../../contexts/CalenderContext";
@@ -25,8 +24,8 @@ const DateRoute: React.FC<unknown> = () => {
const [error, setError] = useState<boolean>(false); const [error, setError] = useState<boolean>(false);
const dateRange = useRef(findValidDateRange()); // const dateRange = useRef(findValidDateRange());
const validDateRange = Object.assign({}, dateRange.current); // const validDateRange = Object.assign({}, dateRange.current);
const validateDateInput = (dateArr: number[]): UpdateCalendarProps => { const validateDateInput = (dateArr: number[]): UpdateCalendarProps => {
if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) { if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) {
@@ -52,7 +51,7 @@ const DateRoute: React.FC<unknown> = () => {
} }
if (date.month && date.year) { if (date.month && date.year) {
const lastDay = getDay( const lastDay = getDate(
endOfMonth(new Date(date.year, date.month - 1, 1)) endOfMonth(new Date(date.year, date.month - 1, 1))
); );
if (dateArr[2] && dateArr[2] > 0 && dateArr[2] <= lastDay) { if (dateArr[2] && dateArr[2] > 0 && dateArr[2] <= lastDay) {
@@ -70,32 +69,32 @@ const DateRoute: React.FC<unknown> = () => {
/** /**
* ! This function does not work as is. It is causing infinite loops whe used within the useEffect. * ! This function does not work as is. It is causing infinite loops whe used within the useEffect.
*/ */
const validateDateRange = ( // const validateDateRange = (
slugDate: Date // slugDate: Date
): [Date, "after" | "before" | "valid"] => { // ): [Date, "after" | "before" | "valid"] => {
const { start: validStart, end: validEnd } = validDateRange; // const { start: validStart, end: validEnd } = validDateRange;
// Check if the slug date is beyond the valid end date. // // Check if the slug date is beyond the valid end date.
if (isAfter(slugDate, validEnd)) { // if (isAfter(slugDate, validEnd)) {
// router.push("/calender/now"); // // router.push("/calender/now");
console.warn( // console.warn(
"Slug date is after the valid date range for this calendar!!!" // "Slug date is after the valid date range for this calendar!!!"
); // );
return [validEnd, "after"]; // return [validEnd, "after"];
// Check if the slug is before the valid start date. // // Check if the slug is before the valid start date.
} else if (isBefore(slugDate, validStart)) { // } else if (isBefore(slugDate, validStart)) {
console.warn( // console.warn(
"Slug date is before the valid date range for this calendar!!!" // "Slug date is before the valid date range for this calendar!!!"
); // );
return [validStart, "before"]; // return [validStart, "before"];
// router.push(`/${getYear(validStart)}/${getMonth(validStart) + 1}`); // // router.push(`/${getYear(validStart)}/${getMonth(validStart) + 1}`);
} else { // } else {
console.info( // console.info(
"Slug date is within the valid date range for this calendar." // "Slug date is within the valid date range for this calendar."
); // );
return [slugDate, "valid"]; // return [slugDate, "valid"];
} // }
}; // };
useEffect(() => { useEffect(() => {
// Checking if the slug exists and is an array. // Checking if the slug exists and is an array.
@@ -126,54 +125,58 @@ const DateRoute: React.FC<unknown> = () => {
// Set the date to the valid date. // Set the date to the valid date.
} else { } else {
// TODO: Make sure the date is within the valid range using the validateDateRange function. // TODO: Make sure the date is within the valid range using the validateDateRange function.
const validDate = new Date( // const validDate = new Date(
newDate.year, // newDate.year,
newDate.month - 1, // newDate.month - 1,
newDate.day // newDate.day
); // );
const validDateWithinRange = validateDateRange(validDate)[0]; // const validDateWithinRange = validateDateRange(validDate)[0];
// setDate({
// ...{
// year: getYear(validDateWithinRange),
// month: getMonth(validDateWithinRange) + 1,
// day: getDate(validDateWithinRange)
// }
// });
setDate({ setDate({
...{ ...newDate
year: getYear(validDateWithinRange),
month: getMonth(validDateWithinRange) + 1,
day: getDate(validDateWithinRange)
}
}); });
} }
} }
} }
}, [slug]); }, [slug]);
useEffect(() => { // useEffect(() => {
// Check is slug and date are valid. // // Check is slug and date are valid.
if (slug && date && date !== null) { // if (slug && date && date !== null) {
// Check if the slug is an array and has a length of 2. // // Check if the slug is an array and has a length of 2.
if (Array.isArray(slug) && slug.length === 2) { // if (Array.isArray(slug) && slug.length === 2) {
const dateState = new Date(date.year, date.month - 1, date.day); // const dateState = new Date(date.year, date.month - 1, date.day);
const parsedSlug = slug.map((e) => { // const parsedSlug = slug.map((e) => {
return parseInt(e); // return parseInt(e);
}); // });
const slugDate = new Date(parsedSlug[0], parsedSlug[1] - 1, 1); // const slugDate = new Date(parsedSlug[0], parsedSlug[1] - 1, 1);
if (!isSameMonth(dateState, slugDate)) { // if (!isSameMonth(dateState, slugDate)) {
const validDateWithinRange = validateDateRange(dateState); // const validDateWithinRange = validateDateRange(dateState);
if (validDateRange[1] === "after") { // if (validDateRange[1] === "after") {
router.push("/now"); // router.push("/now");
} else { // } else {
router.push( // router.push(
`/${getYear(validDateWithinRange[0])}/${getMonth( // `/${getYear(validDateWithinRange[0])}/${getMonth(
validDateWithinRange[0] // validDateWithinRange[0]
)}` // )}`
); // );
} // }
} // }
} // }
} // }
}, [date]); // }, [date]);
if (router.isFallback) { if (router.isFallback) {
return <ErrorPage statusCode={404} />; return <ErrorPage statusCode={404} />;