From d8c9db9475890cbeef1dab217d3de1188380f57b Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 02:49:14 -0500 Subject: [PATCH] Attempted to force the app to stay within the valid date ranges. This caused app crashed due to infinite useEffect loops. Added documentation. --- components/calender/CalenderNav.tsx | 10 ++-- lib/findValidDateRange.ts | 10 ++-- pages/calendar/[...date].tsx | 82 +++++++++++++++++++++-------- types/CalenderContext.d.ts | 1 - 4 files changed, 70 insertions(+), 33 deletions(-) diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index d7430a2..1c45265 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -2,7 +2,7 @@ import React, { useContext } from "react"; import { useRouter } from "next/router"; import { HStack, IconButton } from "@chakra-ui/react"; import { Icon } from "@iconify/react"; -import { sub, add, format, isSameMonth } from "date-fns"; +import { format, isSameMonth, addMonths, subMonths } from "date-fns"; import findValidDateRange from "../../lib/findValidDateRange"; import DatePicker from "./DatePicker"; import { CalenderContext } from "../../contexts/CalenderContext"; @@ -17,18 +17,14 @@ const CalenderNav = (): JSX.Element => { const handleNavButtons = (direction: "next" | "prev") => { if (direction === "next") { - const newMonth = add(selectedDate, { - months: 1 - }); + const newMonth = addMonths(selectedDate, 1); const year = format(newMonth, "y"); const month = format(newMonth, "L"); router.push(`/calendar/${year}/${month}`); } else if (direction === "prev") { - const newMonth = sub(selectedDate, { - months: 1 - }); + const newMonth = subMonths(selectedDate, 1); const year = format(newMonth, "y"); const month = format(newMonth, "L"); diff --git a/lib/findValidDateRange.ts b/lib/findValidDateRange.ts index d255119..51e5cbd 100644 --- a/lib/findValidDateRange.ts +++ b/lib/findValidDateRange.ts @@ -5,9 +5,13 @@ interface ValidDateRange { end: Date; } -const validDateRange = (): ValidDateRange => { +/** + * A function that will determine the valid date range for the navigation of the charts. + * @returns An object with a start and end key with the given date for the start and end of the range. + */ +const findValidDateRange = (): ValidDateRange => { const currDate = new Date(); // Current date. - const startDate = startOfMonth(currDate); // Will eventually be the creation date of the account or the creation date of the oldest chart within the account. Whichever is older. + const startDate = startOfMonth(currDate); // Will eventually be the creation date of the account or the creation date the selected chart. Whichever is older. const endDate = endOfMonth(currDate); // Always needs to be the last day on the current month within the current year. return { @@ -16,4 +20,4 @@ const validDateRange = (): ValidDateRange => { }; }; -export default validDateRange; +export default findValidDateRange; diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index fc05e23..0523717 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -1,7 +1,14 @@ import React, { useEffect, useState } from "react"; import { Box } from "@chakra-ui/react"; import { useRouter } from "next/router"; -import { endOfMonth, getDay } from "date-fns"; +import { + endOfMonth, + getDay + // getMonth, + // getYear, + // isAfter, + // isBefore +} from "date-fns"; // import findValidDateRange from "../../lib/findValidDateRange"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; @@ -12,9 +19,6 @@ const DateRoute: React.FC = () => { const router = useRouter(); const { date: slug } = router.query; - // const validDateRange = findValidDateRange(); - // const { start: validStart, end: validEnd } = validDateRange; - const [date, setDate] = useState(null); const [error, setError] = useState(false); @@ -58,30 +62,64 @@ const DateRoute: React.FC = () => { return date; }; - // const validateDateRange = () => { + /** + * ! This function does not work as is. It is causing infinite loops whe used within the useEffect. + */ + // const validateDateRange = (slugDate: Date): void => { + // 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!!!" + // ); + // // 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!!!" + // ); + // router.push(`/${getYear(validStart)}/${getMonth(validStart) + 1}`); + // } else { + // console.info( + // "Slug date is within the valid date range for this calendar." + // ); + // } + // }; useEffect(() => { - 2; - if (slug && slug.length === 1 && slug[0] !== "now") { - setError(true); - return console.warn("improper date input"); - } + console.log("Use Effect"); - if (slug && Array.isArray(slug) && slug.length >= 2 && slug.length <= 3) { - const parsedSlug = slug.map((e) => { - return parseInt(e); - }); - - const newDate = validateDateInput(parsedSlug); - - if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) { + if (slug && Array.isArray(slug)) { + const length = slug.length; + if (length === 1 && slug[0] !== "now") { setError(true); - } else { - setDate({ - ...validateDateInput(parsedSlug) + return console.warn("improper date input:", slug); + } + + if (length >= 2 && slug.length <= 3) { + const parsedSlug = slug.map((e) => { + return parseInt(e); }); + + const newDate = validateDateInput(parsedSlug); + + if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) { + setError(true); + } else { + // const slugDate = new Date( + // newDate.year, + // newDate.month - 1, + // newDate.day + // ); + // console.info("Slug date:", slugDate); + // validateDateRange(slugDate); + + setDate({ + ...validateDateInput(parsedSlug) + }); + 2; + } } } }, [slug]); diff --git a/types/CalenderContext.d.ts b/types/CalenderContext.d.ts index 2f31de4..76df92d 100644 --- a/types/CalenderContext.d.ts +++ b/types/CalenderContext.d.ts @@ -58,6 +58,5 @@ interface CalenderContextState { selectedDate: Date; title: string; layout: MonthLayout; - validDateRange: ValidDateRange; updateDate: (input: UpdateCalendarProps) => void; }