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, {
+      const newMonth = addMonths(selectedDate, 1);
-        months: 1
-      });
 
       const year = format(newMonth, "y");
       const month = format(newMonth, "L");
 
       router.push(`/calendar/${year}/${month}`);
     } else if (direction === "prev") {
-      const newMonth = sub(selectedDate, {
+      const newMonth = subMonths(selectedDate, 1);
-        months: 1
-      });
 
       const year = format(newMonth, "y");
       const month = format(newMonth, "L");

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;

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<unknown> = () => {
   const router = useRouter();
   const { date: slug } = router.query;
 
-  // const validDateRange = findValidDateRange();
-  // const { start: validStart, end: validEnd } = validDateRange;
-
   const [date, setDate] = useState<UpdateCalendarProps | null>(null);
 
   const [error, setError] = useState<boolean>(false);
@@ -58,18 +62,42 @@ const DateRoute: React.FC<unknown> = () => {
     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;
+    console.log("Use Effect");
-    if (slug && slug.length === 1 && slug[0] !== "now") {
+
+    if (slug && Array.isArray(slug)) {
+      const length = slug.length;
+      if (length === 1 && slug[0] !== "now") {
         setError(true);
-      return console.warn("improper date input");
+        return console.warn("improper date input:", slug);
       }
 
-    if (slug && Array.isArray(slug) && slug.length >= 2 && slug.length <= 3) {
+      if (length >= 2 && slug.length <= 3) {
         const parsedSlug = slug.map((e) => {
           return parseInt(e);
         });
@@ -79,9 +107,19 @@ const DateRoute: React.FC<unknown> = () => {
         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]);

types/CalenderContext.d.ts

@@ -58,6 +58,5 @@ interface CalenderContextState {
   selectedDate: Date;
   title: string;
   layout: MonthLayout;
-  validDateRange: ValidDateRange;
   updateDate: (input: UpdateCalendarProps) => void;
 }