diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index 74ea796..1c45265 100644 --- a/components/calender/CalenderNav.tsx +++ b/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, { - months: 1 - }); + const newMonth = addMonths(selectedDate, 1); const year = format(newMonth, "y"); const month = format(newMonth, "L"); router.push(`/calendar/${year}/${month}`); } else if (direction === "prev") { - const newMonth = sub(selectedDate, { - months: 1 - }); + const newMonth = subMonths(selectedDate, 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 ( } onClick={() => handleNavButtons("prev")} /> } onClick={() => handleNavButtons("next")} diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx index 6df017d..2a346f5 100644 --- a/components/calender/DatePicker.tsx +++ b/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(false); + const validDateRange = findValidDateRange(); + const validateDate = ( dateString?: string | undefined ): string | undefined => { @@ -212,15 +216,17 @@ 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", + boxShadow: "0 0 0 1px #00c17c", + _hover: { borderColor: "brand.valid", - boxShadow: "0 0 0 1px #00c17c", - _hover: { - borderColor: "brand.valid", - boxShadow: "0 0 0 1px #00c17c" - } + boxShadow: "0 0 0 1px #00c17c" } + } : "")} /> {!form.touched.date && ( diff --git a/components/calender/index.tsx b/components/calender/index.tsx index 0bd1c6f..c25f481 100644 --- a/components/calender/index.tsx +++ b/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) { diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index acb60fb..6feecc2 100644 --- a/contexts/CalenderContext.tsx +++ b/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. diff --git a/lib/findValidDateRange.ts b/lib/findValidDateRange.ts new file mode 100644 index 0000000..51e5cbd --- /dev/null +++ b/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; diff --git a/package.json b/package.json index f8b3302..7e808bb 100644 --- a/package.json +++ b/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", diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 939704a..db7501a 100644 --- a/pages/calendar/[...date].tsx +++ b/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 = () => { const [date, setDate] = useState(null); + const [error, setError] = useState(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 = () => { 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)) { - date.day = dateArr[2]; - } else if (!dateArr[2]) { - date.day = 1; + 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") { - return console.warn("improper date input"); - } + /** + * ! This function does not work as is. It is causing infinite loops whe used within the useEffect. + */ + // 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); }); - setDate({ - ...validateDateInput(parsedSlug) - }); + + // 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({ + ...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 ; } @@ -70,7 +195,9 @@ const DateRoute: React.FC = () => { * last month that has stickers within it (When filter is enabled) or to the creation date of the chart.. */ - return ( + return error ? ( + + ) : ( diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx index 5cd3acd..7a17399 100644 --- a/theme/layout/Header.tsx +++ b/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(false);