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

Commented out all date range validation.

Browse Source
This commit is contained in:
Lucid Kobold
2022-03-26 20:33:04 -05:00
parent 734a3e85ec
commit aaf42cca57
1 changed files with 76 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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