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

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} />;