From 1eef28377de3340450beec4cbd3e796913e7d8ea Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 24 Feb 2022 10:20:22 -0600 Subject: [PATCH 01/16] Fixed bug where calender will generate with dates out of range. --- pages/calendar/[...date].tsx | 43 ++++++++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 12 deletions(-) diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 939704a..bde7f58 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -1,10 +1,12 @@ import React, { useEffect, useState } from "react"; import { Box } from "@chakra-ui/react"; import { useRouter } from "next/router"; +import { endOfMonth, getDay } from "date-fns"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; import { CalenderContextProvider } from "../../contexts/CalenderContext"; import { StickersContextProvider } from "../../contexts/StickerContext"; +import { es } from "date-fns/locale"; const DateRoute: React.FC = () => { const router = useRouter(); @@ -12,6 +14,8 @@ const DateRoute: React.FC = () => { const [date, setDate] = useState(null); + const [error, setError] = useState(false); + const validateDateInput = (dateArr: number[]): UpdateCalendarProps => { if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) { return { @@ -31,21 +35,28 @@ 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 = getDay(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") { + setError(true); return console.warn("improper date input"); } @@ -53,9 +64,16 @@ const DateRoute: React.FC = () => { const parsedSlug = slug.map((e) => { return parseInt(e); }); - setDate({ - ...validateDateInput(parsedSlug) - }); + + const newDate = validateDateInput(parsedSlug); + + if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) { + setError(true); + } else { + setDate({ + ...validateDateInput(parsedSlug) + }); + } } }, [slug]); @@ -70,15 +88,16 @@ 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 ? + () + : + ( - - ); + ) }; export default DateRoute; From b3ba7b2d662defc3e1f6c51398ded59170f39761 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 24 Feb 2022 20:43:08 -0600 Subject: [PATCH 02/16] Removed unused imports. --- pages/calendar/[...date].tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index bde7f58..38d136d 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -6,7 +6,6 @@ import ErrorPage from "next/error"; import Calender from "../../components/calender"; import { CalenderContextProvider } from "../../contexts/CalenderContext"; import { StickersContextProvider } from "../../contexts/StickerContext"; -import { es } from "date-fns/locale"; const DateRoute: React.FC = () => { const router = useRouter(); @@ -40,8 +39,10 @@ const DateRoute: React.FC = () => { } if (date.month && date.year) { - const lastDay = getDay(endOfMonth(new Date(date.year, date.month - 1, 1))) - if (dateArr[2] && (dateArr[2] > 0 && dateArr[2] <= lastDay)) { + const lastDay = getDay( + 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; @@ -50,7 +51,6 @@ const DateRoute: React.FC = () => { return date; } - return date; }; @@ -88,16 +88,17 @@ const DateRoute: React.FC = () => { * last month that has stickers within it (When filter is enabled) or to the creation date of the chart.. */ - return error ? - () - : - ( + return error ? ( + + ) : ( + - ) + + ); }; export default DateRoute; From a32159b8be27d273992022f6706472739295feed Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 15 Mar 2022 19:05:43 -0500 Subject: [PATCH 03/16] Merging main --- package.json | 2 +- theme/layout/Header.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 681314d..355b36b 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.3-alpha", + "version": "v0.0.8.0-alpha", "author": { "name": "Lucid Creations Media", "url": "https://lucidcreations.media", diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx index f834972..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.3-alpha"; + const appVersion = "v0.0.8.0-alpha"; // Add transparency while not at the top of the page. const [transparentNavbar, setTransparentNavbar] = useState(false); From 827441ca1e936e4663ab57384ecc73b0b3b4762a Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 25 Mar 2022 23:50:07 -0500 Subject: [PATCH 04/16] 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 | 7 +++++-- contexts/CalenderContext.tsx | 14 ++++++++++++++ types/CalenderContext.d.ts | 6 ++++++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index 74ea796..82b7220 100644 --- a/components/calender/CalenderNav.tsx +++ b/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 ( } onClick={() => handleNavButtons("prev")} /> } onClick={() => handleNavButtons("next")} diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index acb60fb..5de9dba 100644 --- a/contexts/CalenderContext.tsx +++ b/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(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 }; diff --git a/types/CalenderContext.d.ts b/types/CalenderContext.d.ts index 76df92d..1072376 100644 --- a/types/CalenderContext.d.ts +++ b/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; } From 94ffe42325a8f631e11e014f9fae1db99f9606a6 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 25 Mar 2022 23:58:59 -0500 Subject: [PATCH 05/16] Remove outdated todos --- components/calender/CalenderNav.tsx | 7 ------- contexts/CalenderContext.tsx | 2 -- 2 files changed, 9 deletions(-) diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index 82b7220..a73e63a 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -34,13 +34,6 @@ 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 ( { 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. From 5071d5a6baf2d7a57c2162e0b45ca375290d4ace Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 00:43:22 -0500 Subject: [PATCH 06/16] Moved valid date range function into it's own file to be accessibly within the dynamic pages. --- components/calender/CalenderNav.tsx | 5 ++++- contexts/CalenderContext.tsx | 14 -------------- lib/findValidDateRange.ts | 22 ++++++++++++++++++++++ pages/calendar/[...date].tsx | 16 +++++++++++++--- types/CalenderContext.d.ts | 5 ----- 5 files changed, 39 insertions(+), 23 deletions(-) create mode 100644 lib/findValidDateRange.ts diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index a73e63a..bcd2e65 100644 --- a/components/calender/CalenderNav.tsx +++ b/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(); diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index 54b2fe9..6feecc2 100644 --- a/contexts/CalenderContext.tsx +++ b/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(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 }; diff --git a/lib/findValidDateRange.ts b/lib/findValidDateRange.ts new file mode 100644 index 0000000..6aa6359 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 38d136d..21108d6 100644 --- a/pages/calendar/[...date].tsx +++ b/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 = () => { const router = useRouter(); const { date: slug } = router.query; + const validDateRange = findValidDateRange(); + const { start: validStart, end: validEnd } = validDateRange; + const [date, setDate] = useState(null); const [error, setError] = useState(false); @@ -54,7 +58,11 @@ const DateRoute: React.FC = () => { 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 = () => { }); } } - }, [slug]); + + console.info("Context:", calenderContext) + }, [slug, calenderContext]); if (router.isFallback) { return ; diff --git a/types/CalenderContext.d.ts b/types/CalenderContext.d.ts index 1072376..2f31de4 100644 --- a/types/CalenderContext.d.ts +++ b/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; From 39b9a13e392de88fe08b164ffcdd6f350853ce7f Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 00:45:32 -0500 Subject: [PATCH 07/16] Removed references to the inaccesible contect within a dynamic page. --- components/calender/CalenderNav.tsx | 2 +- lib/findValidDateRange.ts | 7 ++----- pages/calendar/[...date].tsx | 15 +++++++-------- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index bcd2e65..d7430a2 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -3,7 +3,7 @@ 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 findValidDateRange from "../../lib/findValidDateRange"; import DatePicker from "./DatePicker"; import { CalenderContext } from "../../contexts/CalenderContext"; diff --git a/lib/findValidDateRange.ts b/lib/findValidDateRange.ts index 6aa6359..d255119 100644 --- a/lib/findValidDateRange.ts +++ b/lib/findValidDateRange.ts @@ -1,7 +1,4 @@ -import { - startOfMonth, - endOfMonth -} from "date-fns"; +import { startOfMonth, endOfMonth } from "date-fns"; interface ValidDateRange { start: Date; @@ -19,4 +16,4 @@ const validDateRange = (): ValidDateRange => { }; }; -export default validDateRange \ No newline at end of file +export default validDateRange; diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 21108d6..fc05e23 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -1,8 +1,8 @@ -import React, { useEffect, useState, useContext } from "react"; +import React, { useEffect, useState } 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 findValidDateRange from "../../lib/findValidDateRange"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; import { CalenderContextProvider } from "../../contexts/CalenderContext"; @@ -12,8 +12,8 @@ const DateRoute: React.FC = () => { const router = useRouter(); const { date: slug } = router.query; - const validDateRange = findValidDateRange(); - const { start: validStart, end: validEnd } = validDateRange; + // const validDateRange = findValidDateRange(); + // const { start: validStart, end: validEnd } = validDateRange; const [date, setDate] = useState(null); @@ -62,7 +62,8 @@ const DateRoute: React.FC = () => { // } - useEffect(() => {2 + useEffect(() => { + 2; if (slug && slug.length === 1 && slug[0] !== "now") { setError(true); return console.warn("improper date input"); @@ -83,9 +84,7 @@ const DateRoute: React.FC = () => { }); } } - - console.info("Context:", calenderContext) - }, [slug, calenderContext]); + }, [slug]); if (router.isFallback) { return ; From d8c9db9475890cbeef1dab217d3de1188380f57b Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 02:49:14 -0500 Subject: [PATCH 08/16] Attempted to force the app to stay within the valid date ranges. This caused app crashed due to infinite useEffect loops. Added documentation. --- components/calender/CalenderNav.tsx | 10 ++-- lib/findValidDateRange.ts | 10 ++-- pages/calendar/[...date].tsx | 82 +++++++++++++++++++++-------- types/CalenderContext.d.ts | 1 - 4 files changed, 70 insertions(+), 33 deletions(-) diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index d7430a2..1c45265 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -2,7 +2,7 @@ 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, isSameMonth } 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"; @@ -17,18 +17,14 @@ const CalenderNav = (): JSX.Element => { 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"); diff --git a/lib/findValidDateRange.ts b/lib/findValidDateRange.ts index d255119..51e5cbd 100644 --- a/lib/findValidDateRange.ts +++ b/lib/findValidDateRange.ts @@ -5,9 +5,13 @@ interface ValidDateRange { end: Date; } -const validDateRange = (): ValidDateRange => { +/** + * 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 of the oldest chart within the account. Whichever is older. + 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 { @@ -16,4 +20,4 @@ const validDateRange = (): ValidDateRange => { }; }; -export default validDateRange; +export default findValidDateRange; diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index fc05e23..0523717 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -1,7 +1,14 @@ import React, { useEffect, useState } from "react"; import { Box } from "@chakra-ui/react"; import { useRouter } from "next/router"; -import { endOfMonth, getDay } from "date-fns"; +import { + endOfMonth, + getDay + // getMonth, + // getYear, + // isAfter, + // isBefore +} from "date-fns"; // import findValidDateRange from "../../lib/findValidDateRange"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; @@ -12,9 +19,6 @@ const DateRoute: React.FC = () => { const router = useRouter(); const { date: slug } = router.query; - // const validDateRange = findValidDateRange(); - // const { start: validStart, end: validEnd } = validDateRange; - const [date, setDate] = useState(null); const [error, setError] = useState(false); @@ -58,30 +62,64 @@ const DateRoute: React.FC = () => { return date; }; - // const validateDateRange = () => { + /** + * ! This function does not work as is. It is causing infinite loops whe used within the useEffect. + */ + // const validateDateRange = (slugDate: Date): void => { + // const { start: validStart, end: validEnd } = validDateRange; - // } + // // 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!!!" + // ); + // // 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!!!" + // ); + // router.push(`/${getYear(validStart)}/${getMonth(validStart) + 1}`); + // } else { + // console.info( + // "Slug date is within the valid date range for this calendar." + // ); + // } + // }; useEffect(() => { - 2; - if (slug && slug.length === 1 && slug[0] !== "now") { - setError(true); - return console.warn("improper date input"); - } + console.log("Use Effect"); - if (slug && Array.isArray(slug) && slug.length >= 2 && slug.length <= 3) { - const parsedSlug = slug.map((e) => { - return parseInt(e); - }); - - const newDate = validateDateInput(parsedSlug); - - if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) { + if (slug && Array.isArray(slug)) { + const length = slug.length; + if (length === 1 && slug[0] !== "now") { setError(true); - } else { - setDate({ - ...validateDateInput(parsedSlug) + return console.warn("improper date input:", slug); + } + + if (length >= 2 && slug.length <= 3) { + const parsedSlug = slug.map((e) => { + return parseInt(e); }); + + const newDate = validateDateInput(parsedSlug); + + if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) { + setError(true); + } else { + // const slugDate = new Date( + // newDate.year, + // newDate.month - 1, + // newDate.day + // ); + // console.info("Slug date:", slugDate); + // validateDateRange(slugDate); + + setDate({ + ...validateDateInput(parsedSlug) + }); + 2; + } } } }, [slug]); diff --git a/types/CalenderContext.d.ts b/types/CalenderContext.d.ts index 2f31de4..76df92d 100644 --- a/types/CalenderContext.d.ts +++ b/types/CalenderContext.d.ts @@ -58,6 +58,5 @@ interface CalenderContextState { selectedDate: Date; title: string; layout: MonthLayout; - validDateRange: ValidDateRange; updateDate: (input: UpdateCalendarProps) => void; } From 7ee83fc5468059b38fb8e43ae3cbda09a953c09f Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 03:06:19 -0500 Subject: [PATCH 09/16] merging main --- package.json | 4 ---- theme/layout/Header.tsx | 4 ---- 2 files changed, 8 deletions(-) diff --git a/package.json b/package.json index 7cbadd8..7e808bb 100644 --- a/package.json +++ b/package.json @@ -2,11 +2,7 @@ "private": true, "name": "lucid-creations-media-potty-chart", "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/", -<<<<<<< HEAD "version": "v0.0.8.0-alpha", -======= - "version": "v0.0.7.5-alpha", ->>>>>>> main "author": { "name": "Lucid Creations Media", "url": "https://lucidcreations.media", diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx index a42bd75..7a17399 100644 --- a/theme/layout/Header.tsx +++ b/theme/layout/Header.tsx @@ -15,11 +15,7 @@ import appLogo from "../../public/images/logo.svg"; const Header = (): JSX.Element => { const appName = "LCM Potty Chart"; -<<<<<<< HEAD const appVersion = "v0.0.8.0-alpha"; -======= - const appVersion = "v0.0.7.5-alpha"; ->>>>>>> main // Add transparency while not at the top of the page. const [transparentNavbar, setTransparentNavbar] = useState(false); From 23d86034add0143c87aa7e4581aed1a21ff5242b Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Sat, 26 Mar 2022 17:00:42 -0500 Subject: [PATCH 10/16] Added a new check new slug funtion and added documentation. --- pages/calendar/[...date].tsx | 79 ++++++++++++++++++++++++------------ 1 file changed, 53 insertions(+), 26 deletions(-) diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 0523717..15798f3 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { Box } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { @@ -87,38 +87,65 @@ const DateRoute: React.FC = () => { // } // }; + // Keeping track of the slug, if it is valid. + const parsedSlug = useRef(null); + + const checkNewSlug = ( + currSlug: number[], + prevSlug: number[] + ): boolean | null => { + if (currSlug[0] === prevSlug[0] && currSlug[1] === prevSlug[1]) { + return false; + } else if (currSlug[0] !== prevSlug[0] || currSlug[1] !== prevSlug[1]) { + return true; + } else { + return null; + } + }; + useEffect(() => { - console.log("Use Effect"); - + // Checking if the slug exists and is an array. if (slug && Array.isArray(slug)) { + // Grabbing the slug length const length = slug.length; - if (length === 1 && slug[0] !== "now") { - setError(true); - return console.warn("improper date input:", slug); - } - if (length >= 2 && slug.length <= 3) { - const parsedSlug = slug.map((e) => { - return parseInt(e); - }); + // Parsing the slug to convert it from strings to numbers. + const newParsedSlug = slug.map((e) => { + return parseInt(e); + }); - const newDate = validateDateInput(parsedSlug); - - if (newDate.year === 0 || newDate.month === 0 || newDate.day === 0) { + // Checking if the new slug is different from the previous slug. + if (checkNewSlug(newParsedSlug, parsedSlug.current)) { + // Checking if the slug is not "now" when the length is 1. + // ! Update this to include a check for "today". + if (length === 1 && slug[0] !== "now") { setError(true); - } else { - // const slugDate = new Date( - // newDate.year, - // newDate.month - 1, - // newDate.day - // ); - // console.info("Slug date:", slugDate); - // validateDateRange(slugDate); + return console.warn("improper date input:", slug); + } - setDate({ - ...validateDateInput(parsedSlug) - }); - 2; + // Checking if the slug has 2 to 3 numbers within the array. year/month/day. + if (length >= 2 && slug.length <= 3) { + // Validate that the date is valid. + const newDate = validateDateInput(newParsedSlug); + + // 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 slugDate = new Date( + // newDate.year, + // newDate.month - 1, + // newDate.day + // ); + // console.info("Slug date:", slugDate); + // validateDateRange(slugDate); + + setDate({ + ...validateDateInput(newParsedSlug) + }); + } } } } From 734a3e85ecdee0498aed3de70c3341a8ccc3df31 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Sat, 26 Mar 2022 18:05:19 -0500 Subject: [PATCH 11/16] Removed validate new slug and it's dependencies. --- lib/findValidDateRange.ts | 4 +- pages/calendar/[...date].tsx | 162 ++++++++++++++++++++--------------- 2 files changed, 95 insertions(+), 71 deletions(-) diff --git a/lib/findValidDateRange.ts b/lib/findValidDateRange.ts index 51e5cbd..dec096a 100644 --- a/lib/findValidDateRange.ts +++ b/lib/findValidDateRange.ts @@ -1,4 +1,4 @@ -import { startOfMonth, endOfMonth } from "date-fns"; +import { startOfMonth, endOfMonth, subMonths } from "date-fns"; interface ValidDateRange { start: Date; @@ -11,7 +11,7 @@ interface ValidDateRange { */ 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 startDate = subMonths(startOfMonth(currDate), 1); // 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 { diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 15798f3..027e326 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -3,13 +3,15 @@ import { Box } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { endOfMonth, - getDay - // getMonth, - // getYear, - // isAfter, - // isBefore + getDate, + getDay, + getMonth, + getYear, + isAfter, + isBefore, + isSameMonth } from "date-fns"; -// import findValidDateRange from "../../lib/findValidDateRange"; +import findValidDateRange from "../../lib/findValidDateRange"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; import { CalenderContextProvider } from "../../contexts/CalenderContext"; @@ -23,6 +25,9 @@ const DateRoute: React.FC = () => { 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 { @@ -65,41 +70,30 @@ const DateRoute: React.FC = () => { /** * ! This function does not work as is. It is causing infinite loops whe used within the useEffect. */ - // const validateDateRange = (slugDate: Date): void => { - // const { start: validStart, end: validEnd } = validDateRange; + const validateDateRange = ( + slugDate: Date + ): [Date, "after" | "before" | "valid"] => { + const { start: validStart, end: validEnd } = validDateRange; - // // 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!!!" - // ); - // // 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!!!" - // ); - // router.push(`/${getYear(validStart)}/${getMonth(validStart) + 1}`); - // } else { - // console.info( - // "Slug date is within the valid date range for this calendar." - // ); - // } - // }; - - // Keeping track of the slug, if it is valid. - const parsedSlug = useRef(null); - - const checkNewSlug = ( - currSlug: number[], - prevSlug: number[] - ): boolean | null => { - if (currSlug[0] === prevSlug[0] && currSlug[1] === prevSlug[1]) { - return false; - } else if (currSlug[0] !== prevSlug[0] || currSlug[1] !== prevSlug[1]) { - return true; + // 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 { - return null; + console.info( + "Slug date is within the valid date range for this calendar." + ); + return [slugDate, "valid"]; } }; @@ -110,47 +104,77 @@ const DateRoute: React.FC = () => { const length = slug.length; // Parsing the slug to convert it from strings to numbers. - const newParsedSlug = slug.map((e) => { + const parsedSlug = slug.map((e) => { return parseInt(e); }); - // Checking if the new slug is different from the previous slug. - if (checkNewSlug(newParsedSlug, parsedSlug.current)) { - // Checking if the slug is not "now" when the length is 1. - // ! Update this to include a check for "today". - if (length === 1 && slug[0] !== "now") { + // Checking if the slug is not "now" when the length is 1. + // ! Update this to include a check for "today". + if (length === 1 && slug[0] !== "now") { + setError(true); + return console.warn("improper date input:", slug); + } + + // Checking if the slug has 2 to 3 numbers within the array. year/month/day. + if (length >= 2 && slug.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); - return console.warn("improper date input:", slug); - } + // 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 + ); - // Checking if the slug has 2 to 3 numbers within the array. year/month/day. - if (length >= 2 && slug.length <= 3) { - // Validate that the date is valid. - const newDate = validateDateInput(newParsedSlug); + const validDateWithinRange = validateDateRange(validDate)[0]; - // 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 slugDate = new Date( - // newDate.year, - // newDate.month - 1, - // newDate.day - // ); - // console.info("Slug date:", slugDate); - // validateDateRange(slugDate); - - setDate({ - ...validateDateInput(newParsedSlug) - }); - } + setDate({ + ...{ + year: getYear(validDateWithinRange), + month: getMonth(validDateWithinRange) + 1, + day: getDate(validDateWithinRange) + } + }); } } } }, [slug]); + 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 ; } From aaf42cca57d83f5244620c42748fbd250886e3ef Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 20:33:04 -0500 Subject: [PATCH 12/16] Commented out all date range validation. --- pages/calendar/[...date].tsx | 149 ++++++++++++++++++----------------- 1 file changed, 76 insertions(+), 73 deletions(-) diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 027e326..3ed6fa6 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -1,17 +1,16 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useState } from "react"; import { Box } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { endOfMonth, - getDate, - getDay, - getMonth, - getYear, - isAfter, - isBefore, - isSameMonth + getDate + // getMonth, + // getYear, + // isAfter, + // isBefore, + // isSameMonth } from "date-fns"; -import findValidDateRange from "../../lib/findValidDateRange"; +// import findValidDateRange from "../../lib/findValidDateRange"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; import { CalenderContextProvider } from "../../contexts/CalenderContext"; @@ -25,8 +24,8 @@ const DateRoute: React.FC = () => { const [error, setError] = useState(false); - const dateRange = useRef(findValidDateRange()); - const validDateRange = Object.assign({}, dateRange.current); + // const dateRange = useRef(findValidDateRange()); + // const validDateRange = Object.assign({}, dateRange.current); const validateDateInput = (dateArr: number[]): UpdateCalendarProps => { if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) { @@ -52,7 +51,7 @@ const DateRoute: React.FC = () => { } if (date.month && date.year) { - const lastDay = getDay( + const lastDay = getDate( endOfMonth(new Date(date.year, date.month - 1, 1)) ); if (dateArr[2] && dateArr[2] > 0 && dateArr[2] <= lastDay) { @@ -70,32 +69,32 @@ const DateRoute: React.FC = () => { /** * ! 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; + // const validateDateRange = ( + // slugDate: Date + // ): [Date, "after" | "before" | "valid"] => { + // const { start: validStart, end: validEnd } = validDateRange; - // 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"]; - } - }; + // // 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. @@ -126,54 +125,58 @@ const DateRoute: React.FC = () => { // 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 validDate = new Date( + // newDate.year, + // newDate.month - 1, + // newDate.day + // ); - const validDateWithinRange = validateDateRange(validDate)[0]; + // const validDateWithinRange = validateDateRange(validDate)[0]; + + // setDate({ + // ...{ + // year: getYear(validDateWithinRange), + // month: getMonth(validDateWithinRange) + 1, + // day: getDate(validDateWithinRange) + // } + // }); setDate({ - ...{ - year: getYear(validDateWithinRange), - month: getMonth(validDateWithinRange) + 1, - day: getDate(validDateWithinRange) - } + ...newDate }); } } } }, [slug]); - 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); + // 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); + // 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 (!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 (validDateRange[1] === "after") { + // router.push("/now"); + // } else { + // router.push( + // `/${getYear(validDateWithinRange[0])}/${getMonth( + // validDateWithinRange[0] + // )}` + // ); + // } + // } + // } + // } + // }, [date]); if (router.isFallback) { return ; From 4973bdbdd06ceb0f636ec047a8286d22ec39f000 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 20:46:38 -0500 Subject: [PATCH 13/16] Fixed false positive console warn. --- components/calender/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) { From 317d9a710099e27396ad4ccb58a9c74d6f4d0c8a Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 20:54:35 -0500 Subject: [PATCH 14/16] Added documentation about manipulating the router within the useEffect. --- pages/calendar/[...date].tsx | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 3ed6fa6..db7501a 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -99,6 +99,7 @@ const DateRoute: React.FC = () => { 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; @@ -107,15 +108,8 @@ const DateRoute: React.FC = () => { return parseInt(e); }); - // Checking if the slug is not "now" when the length is 1. - // ! Update this to include a check for "today". - if (length === 1 && slug[0] !== "now") { - setError(true); - return console.warn("improper date input:", slug); - } - // Checking if the slug has 2 to 3 numbers within the array. year/month/day. - if (length >= 2 && slug.length <= 3) { + if (length >= 2 && length <= 3) { // Validate that the date is valid. const newDate = validateDateInput(parsedSlug); @@ -145,10 +139,22 @@ const DateRoute: React.FC = () => { ...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) { From 78abdc7e4112380f5344c2cfc4d85a7f24087a83 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sat, 26 Mar 2022 23:15:37 -0500 Subject: [PATCH 15/16] Set the min and max range for the date picker input. --- components/calender/DatePicker.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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 && ( From 2f686125dcedd361f407a5be084d3d029d0b3952 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Sun, 27 Mar 2022 01:42:33 -0500 Subject: [PATCH 16/16] Fixed valid date range function. The start date was behind 1 month for testing purposes. --- lib/findValidDateRange.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/findValidDateRange.ts b/lib/findValidDateRange.ts index dec096a..51e5cbd 100644 --- a/lib/findValidDateRange.ts +++ b/lib/findValidDateRange.ts @@ -1,4 +1,4 @@ -import { startOfMonth, endOfMonth, subMonths } from "date-fns"; +import { startOfMonth, endOfMonth } from "date-fns"; interface ValidDateRange { start: Date; @@ -11,7 +11,7 @@ interface ValidDateRange { */ const findValidDateRange = (): ValidDateRange => { const currDate = new Date(); // Current date. - const startDate = subMonths(startOfMonth(currDate), 1); // Will eventually be the creation date of the account or the creation date the selected chart. Whichever is older. + 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 {