Merge pull request #42 from LucidKobold/calender-nav

Calender nav

components/calender/CalenderNav.tsx

@@ -2,29 +2,29 @@ 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 { format, isSameMonth, addMonths, subMonths } from "date-fns";
+import findValidDateRange from "../../lib/findValidDateRange";
 import DatePicker from "./DatePicker";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
 const CalenderNav = (): JSX.Element => {
   const { selectedDate } = useContext(CalenderContext);
 
+  const validDateRange = findValidDateRange();
+  const { start: validStart, end: validEnd } = validDateRange;
+
   const router = useRouter();
 
   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");
@@ -33,22 +33,17 @@ const CalenderNav = (): JSX.Element => {
     }
   };
 
-  /**
-   * TODO: Add logic to remove the nav buttons.
-   * Do not show next button for current month.
-   * Do not show prev when there is nothing left to see in the past.
-   * (Creation date of a chart)
-   */
-
   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")}

components/calender/DatePicker.tsx

@@ -24,6 +24,8 @@ import {
   Field,
   FieldProps
 } from "formik";
+import { format } from "date-fns"
+import findValidDateRange from "../../lib/findValidDateRange"
 import FormValidateEmoji from "./FormValidateEmoji";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
@@ -34,6 +36,8 @@ const DatePicker = (): JSX.Element => {
 
   const [valid, setValid] = useState<boolean>(false);
 
+  const validDateRange = findValidDateRange();
+
   const validateDate = (
     dateString?: string | undefined
   ): string | undefined => {
@@ -212,6 +216,8 @@ const DatePicker = (): JSX.Element => {
                               {...field}
                               id="date"
                               textAlign="center"
+                              min={format(validDateRange.start, "yyyy-MM-dd")}
+                              max={format(validDateRange.end, "yyyy-MM-dd")}
                               {...(!form.errors.date && form.touched.date
                                 ? {
                                   borderColor: "brand.valid",

components/calender/index.tsx

@@ -11,7 +11,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
   const { stickersMonth } = useContext(StickersContext);
 
   useEffect(() => {
-    if (newDate) {
+    if (newDate && newDate.year && newDate.month && newDate.day) {
       const { year, month, day } = newDate;
 
       if (year > 0 && month > 0 && day > 0) {

contexts/CalenderContext.tsx

@@ -206,8 +206,6 @@ const CalenderContextProvider = ({
     setSelectedMonthInfo(output);
   };
 
-  // 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).
-
   // 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.

lib/findValidDateRange.ts

@@ -0,0 +1,23 @@
+import { startOfMonth, endOfMonth } from "date-fns";
+
+interface ValidDateRange {
+  start: Date;
+  end: Date;
+}
+
+/**
+ * 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 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 {
+    start: startDate,
+    end: endDate
+  };
+};
+
+export default findValidDateRange;

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "v0.0.7.5-alpha",
+  "version": "v0.0.8.0-alpha",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",

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

@@ -1,6 +1,16 @@
 import React, { useEffect, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import {
+  endOfMonth,
+  getDate
+  // getMonth,
+  // getYear,
+  // isAfter,
+  // isBefore,
+  // isSameMonth
+} from "date-fns";
+// import findValidDateRange from "../../lib/findValidDateRange";
 import ErrorPage from "next/error";
 import Calender from "../../components/calender";
 import { CalenderContextProvider } from "../../contexts/CalenderContext";
@@ -12,6 +22,11 @@ const DateRoute: React.FC<unknown> = () => {
 
   const [date, setDate] = useState<UpdateCalendarProps | null>(null);
 
+  const [error, setError] = useState<boolean>(false);
+
+  // const dateRange = useRef(findValidDateRange());
+  // const validDateRange = Object.assign({}, dateRange.current);
+
   const validateDateInput = (dateArr: number[]): UpdateCalendarProps => {
     if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) {
       return {
@@ -31,34 +46,144 @@ const DateRoute: React.FC<unknown> = () => {
       date.year = dateArr[0];
     }
 
-    if (dateArr[1] > 0 || dateArr[1] <= 12) {
+    if (dateArr[1] > 0 && dateArr[1] <= 12) {
       date.month = dateArr[1];
     }
 
-    if (dateArr[2] && (dateArr[2] > 0 || dateArr[2] <= 31)) {
+    if (date.month && date.year) {
+      const lastDay = getDate(
+        endOfMonth(new Date(date.year, date.month - 1, 1))
+      );
+      if (dateArr[2] && dateArr[2] > 0 && dateArr[2] <= lastDay) {
         date.day = dateArr[2];
       } else if (!dateArr[2]) {
         date.day = 1;
       }
+    } else {
+      return date;
+    }
 
     return date;
   };
 
-  useEffect(() => {
+  /**
-    if (slug && slug.length === 1 && slug[0] !== "now") {
+   * ! This function does not work as is. It is causing infinite loops whe used within the useEffect.
-      return console.warn("improper date input");
+   */
-    }
+  // const validateDateRange = (
+  //   slugDate: Date
+  // ): [Date, "after" | "before" | "valid"] => {
+  //   const { start: validStart, end: validEnd } = validDateRange;
 
-    if (slug && Array.isArray(slug) && slug.length >= 2 && slug.length <= 3) {
+  //   // 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!!!"
+  //     );
+  //     return [validEnd, "after"];
+  //     // 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!!!"
+  //     );
+  //     return [validStart, "before"];
+  //     // router.push(`/${getYear(validStart)}/${getMonth(validStart) + 1}`);
+  //   } else {
+  //     console.info(
+  //       "Slug date is within the valid date range for this calendar."
+  //     );
+  //     return [slugDate, "valid"];
+  //   }
+  // };
+
+  useEffect(() => {
+    // Checking if the slug exists and is an array.
+    if (slug && Array.isArray(slug)) {
+      console.log(slug);
+      // Grabbing the slug length
+      const length = slug.length;
+
+      // Parsing the slug to convert it from strings to numbers.
       const parsedSlug = slug.map((e) => {
         return parseInt(e);
       });
+
+      // Checking if the slug has 2 to 3 numbers within the array. year/month/day.
+      if (length >= 2 && length <= 3) {
+        // Validate that the date is valid.
+        const newDate = validateDateInput(parsedSlug);
+
+        // If anything is invalid the year/day/month would be set to 0. This checks for the invalid condition.
+        if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) {
+          setError(true);
+          // Set the date to the valid date.
+        } else {
+          // TODO: Make sure the date is within the valid range using the validateDateRange function.
+          // const validDate = new Date(
+          //   newDate.year,
+          //   newDate.month - 1,
+          //   newDate.day
+          // );
+
+          // const validDateWithinRange = validateDateRange(validDate)[0];
+
+          // setDate({
+          //   ...{
+          //     year: getYear(validDateWithinRange),
+          //     month: getMonth(validDateWithinRange) + 1,
+          //     day: getDate(validDateWithinRange)
+          //   }
+          // });
+
           setDate({
-        ...validateDateInput(parsedSlug)
+            ...newDate
           });
         }
+      } else if (length === 1) {
+        // Checking if the slug is not "now".
+        // ! Update this to include a check for "today".
+        if (slug[0] !== "now") {
+          setError(true);
+          return console.warn("improper date input:", slug);
+        }
+      }
+    }
   }, [slug]);
 
+  /**
+   * ? Pushing into the router within the use effect does not create the infinite loop.
+   * ? The way the validate date range or the way it is being used within a useEffect is what is creating the infinite loop.
+   */
+
+  // useEffect(() => {
+  //   // Check is slug and date are valid.
+  //   if (slug && date && date !== null) {
+  //     // Check if the slug is an array and has a length of 2.
+  //     if (Array.isArray(slug) && slug.length === 2) {
+  //       const dateState = new Date(date.year, date.month - 1, date.day);
+
+  //       const parsedSlug = slug.map((e) => {
+  //         return parseInt(e);
+  //       });
+  //       const slugDate = new Date(parsedSlug[0], parsedSlug[1] - 1, 1);
+
+  //       if (!isSameMonth(dateState, slugDate)) {
+  //         const validDateWithinRange = validateDateRange(dateState);
+
+  //         if (validDateRange[1] === "after") {
+  //           router.push("/now");
+  //         } else {
+  //           router.push(
+  //             `/${getYear(validDateWithinRange[0])}/${getMonth(
+  //               validDateWithinRange[0]
+  //             )}`
+  //           );
+  //         }
+  //       }
+  //     }
+  //   }
+  // }, [date]);
+
   if (router.isFallback) {
     return <ErrorPage statusCode={404} />;
   }
@@ -70,7 +195,9 @@ const DateRoute: React.FC<unknown> = () => {
    * last month that has stickers within it (When filter is enabled) or to the creation date of the chart..
    */
 
-  return (
+  return error ? (
+    <ErrorPage statusCode={404} />
+  ) : (
     <Box textAlign="center" w="100%" h="auto" pt="50px" pb="10vh">
       <CalenderContextProvider>
         <StickersContextProvider>

theme/layout/Header.tsx

@@ -15,7 +15,7 @@ import appLogo from "../../public/images/logo.svg";
 
 const Header = (): JSX.Element => {
   const appName = "LCM Potty Chart";
-  const appVersion = "v0.0.7.5-alpha";
+  const appVersion = "v0.0.8.0-alpha";
 
   // Add transparency while not at the top of the page.
   const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);