Moved valid date range function into it's own file to be accessibly within the dynamic pages.

components/calender/CalenderNav.tsx

@@ -3,11 +3,14 @@ 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 findValidDateRange from "../../lib/findValidDateRange"
 import DatePicker from "./DatePicker";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
 const CalenderNav = (): JSX.Element => {
-  const { selectedDate, validDateRange } = useContext(CalenderContext);
+  const { selectedDate } = useContext(CalenderContext);
+
+  const validDateRange = findValidDateRange();
   const { start: validStart, end: validEnd } = validDateRange;
 
   const router = useRouter();

contexts/CalenderContext.tsx

@@ -206,19 +206,6 @@ const CalenderContextProvider = ({
     setSelectedMonthInfo(output);
   };
 
-  const setValidDateRange = (): 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 endDate = endOfMonth(currDate); // Always needs to be the last day on the current month within the current year.
-
-    return {
-      start: startDate,
-      end: endDate
-    };
-  };
-
-  const [validDateRange] = useState<ValidDateRange>(setValidDateRange());
-
   // TODO: Add a function that validated if a date has at least one sticker in it. Use that within the nav function (when filter is enabled).
 
   // TODO: Add a function that will give the closest date, if available, when the nav func detects an empty month.
@@ -257,7 +244,6 @@ const CalenderContextProvider = ({
     selectedDate,
     title: selectedDateInfo.title,
     layout: selectedDateInfo.layout,
-    validDateRange,
     updateDate
   };
 

lib/findValidDateRange.ts

@@ -0,0 +1,22 @@
+import {
+  startOfMonth,
+  endOfMonth
+} from "date-fns";
+
+interface ValidDateRange {
+  start: Date;
+  end: Date;
+}
+
+const validDateRange = (): 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 endDate = endOfMonth(currDate); // Always needs to be the last day on the current month within the current year.
+
+  return {
+    start: startDate,
+    end: endDate
+  };
+};
+
+export default validDateRange

pages/calendar/[...date].tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { Box } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { endOfMonth, getDay } from "date-fns";
+import findValidDateRange from "../../lib/findValidDateRange"
 import ErrorPage from "next/error";
 import Calender from "../../components/calender";
 import { CalenderContextProvider } from "../../contexts/CalenderContext";
@@ -11,6 +12,9 @@ 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);
@@ -54,7 +58,11 @@ const DateRoute: React.FC<unknown> = () => {
     return date;
   };
 
-  useEffect(() => {
+  // const validateDateRange = () => {
+
+  // }
+
+  useEffect(() => {2
     if (slug && slug.length === 1 && slug[0] !== "now") {
       setError(true);
       return console.warn("improper date input");
@@ -75,7 +83,9 @@ const DateRoute: React.FC<unknown> = () => {
         });
       }
     }
-  }, [slug]);
+
+    console.info("Context:", calenderContext)
+  }, [slug, calenderContext]);
 
   if (router.isFallback) {
     return <ErrorPage statusCode={404} />;

types/CalenderContext.d.ts

@@ -48,11 +48,6 @@ interface MonthContext extends MonthInfo {
   layout: MonthLayout;
 }
 
-interface ValidDateRange {
-  start: Date;
-  end: Date;
-}
-
 interface UpdateCalendarProps {
   year: number;
   month: number;