wkc/lcm-potty-chart
Archived
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Calender nav #42

Merged
LucidKobold merged 20 commits from calender-nav into main 2022-03-27 02:48:04 -04:00
Conversation 1 Commits 20 Files Changed 8 +187 -38
8 changed files with 187 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/calender/CalenderNav.tsx
View File

@@ -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 (
<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")}

16
components/calender/DatePicker.tsx
View File

@@ -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,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 && (

2
components/calender/index.tsx
View File

@@ -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) {

2
contexts/CalenderContext.tsx
View File

@@ -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.

23
lib/findValidDateRange.ts Normal file
View File

@@ -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;

2
package.json
View File

@@ -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",

155
pages/calendar/[...date].tsx
View File

@@ -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)) {
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 <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>

2
theme/layout/Header.tsx
View File

@@ -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);