Invalidated the next and prev nav buttons for the calender component when compared to a new valid date range state withing the calender context.

components/calender/CalenderNav.tsx

@@ -2,12 +2,13 @@ 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 } from "date-fns";
+import { sub, add, format, isSameMonth } from "date-fns";
 import DatePicker from "./DatePicker";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
 const CalenderNav = (): JSX.Element => {
-  const { selectedDate } = useContext(CalenderContext);
+  const { selectedDate, validDateRange } = useContext(CalenderContext);
+  const { start: validStart, end: validEnd } = validDateRange;
 
   const router = useRouter();
 
@@ -43,12 +44,14 @@ const CalenderNav = (): JSX.Element => {
   return (
     <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
       <IconButton
+        isDisabled={isSameMonth(selectedDate, validStart)}
         aria-label="Previous Month"
         icon={<Icon icon="akar-icons:chevron-left" />}
         onClick={() => handleNavButtons("prev")}
       />
       <DatePicker />
       <IconButton
+        isDisabled={isSameMonth(selectedDate, validEnd)}
         aria-label="Next Month"
         icon={<Icon icon="akar-icons:chevron-right" />}
         onClick={() => handleNavButtons("next")}

contexts/CalenderContext.tsx

@@ -208,6 +208,19 @@ const CalenderContextProvider = ({
 
   // TODO: Make a function that will give the valid date range for the front end. Either starting at the chart creation date or the oldest month with stickers (when enabled in filters).
 
+  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.
@@ -246,6 +259,7 @@ const CalenderContextProvider = ({
     selectedDate,
     title: selectedDateInfo.title,
     layout: selectedDateInfo.layout,
+    validDateRange,
     updateDate
   };
 

types/CalenderContext.d.ts

@@ -48,6 +48,11 @@ interface MonthContext extends MonthInfo {
   layout: MonthLayout;
 }
 
+interface ValidDateRange {
+  start: Date;
+  end: Date;
+}
+
 interface UpdateCalendarProps {
   year: number;
   month: number;
@@ -58,5 +63,6 @@ interface CalenderContextState {
   selectedDate: Date;
   title: string;
   layout: MonthLayout;
+  validDateRange: ValidDateRange;
   updateDate: (input: UpdateCalendarProps) => void;
 }