From 63eea634583af85fdafa9f9a0ade4ddca891daf4 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Mon, 13 Dec 2021 21:38:32 -0600 Subject: [PATCH 01/28] 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 9295bf7..32499d1 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.5.1-pre-alpha", + "version": "v0.0.6.0-pre-alpha", "author": { "name": "Lucid Creations Media", "url": "https://lucidcreations.media", diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx index 2d5007f..f5c7c69 100644 --- a/theme/layout/Header.tsx +++ b/theme/layout/Header.tsx @@ -13,7 +13,7 @@ import MobileNav from "./MobileNav"; const Header = (): JSX.Element => { const appName = "LCM Potty Chart"; - const appVersion = "v0.0.5.1-pre-alpha"; + const appVersion = "v0.0.6.0-pre-alpha"; // Add transparency while not at the top of the page. const [transparentNavbar, setTransparentNavbar] = useState(false); From 87e34cfe469e04017e3c2504e795c27211a66eed Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Mon, 13 Dec 2021 22:10:08 -0600 Subject: [PATCH 02/28] Added a new date context to work in. Added to dos. --- contexts/NewCalenderContext.tsx | 184 ++++++++++++++++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 contexts/NewCalenderContext.tsx diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx new file mode 100644 index 0000000..a3c2ad0 --- /dev/null +++ b/contexts/NewCalenderContext.tsx @@ -0,0 +1,184 @@ +import React, { createContext, useState, ReactNode } from "react"; +import { format, endOfMonth, getDate, compareAsc } from "date-fns"; +// TODO: import types + +type days = + | "Sunday" + | "Monday" + | "Tuesday" + | "Wednesday" + | "Thursday" + | "Friday" + | "Saturday"; + +interface DaysOfWeek { + startOfWeek: { + Sunday: days[]; + Monday: days[]; + }; +} + +interface UpdateCalendarProps { + direction: "next" | "prev"; + date: Date; +} + +interface Month { + week1: Date[]; + week2: Date[]; + week3: Date[]; + week4: Date[]; + week5: Date[]; + week6: Date[]; +} + +interface Calendar { + startOfWeek: { + Sunday: Month; + Monday: Month; + }; +} + +// Will replace all states and be used in redis as a form of memoization. +interface MonthInfo { + date: Date; + title: string; + layout: Calendar; + startWeekday: number; + endWeekday: number; + days: number; +} + +interface CurrentMonth { + prev: MonthInfo; + curr: MonthInfo; + next: MonthInfo; +} + +interface CalenderMemoize { + String: CurrentMonth; +} + +interface CalenderContextState { + selectedDate: Date; + monthInfo: MonthInfo; + setDate: (date: UpdateCalendarProps) => boolean; +} + +const CalenderContext = createContext({} as CalenderContextState); + +const CalenderContextProvider = ({ + children, +}: { + children: ReactNode; +}): JSX.Element => { + const indexToDay = { + startOfWeek: { + Sunday: { + 0: "Sunday", + 1: "Monday", + 2: "Tuesday", + 3: "Wednesday", + 4: "Thursday", + 5: "Friday", + 6: "Saturday", + }, + Monday: { + 0: "Monday", + 1: "Tuesday", + 2: "Wednesday", + 3: "Thursday", + 4: "Friday", + 5: "Saturday", + 6: "Sunday", + }, + }, + }; + + // Selected month & year + const [selectedDate, setSelectedDate] = useState(new Date()); + // All the info for the current month + const [monthInfo, setMonthInfo] = useState({ + date: new Date(), + title: format(selectedDate, "LLLL uuuu"), + layout: {} as Calendar, + startWeekday: 1, + endWeekday: 2, + days: getDate(endOfMonth(selectedDate)) + }) + + // TODO: Repalce this with the new date alignment algorithm. That adds the date weeks obj to the layout key in the monthInfo context. + // Update or populate the days of the month. + const populateDays = (): void => { + // let newDaysOfMonth: [number] = [...daysOfMonth]; + + // if (newDaysOfMonth.length > 1) { + // newDaysOfMonth = [1]; + // } + + // for (let i = 1; i < endOfSelectedMonth; i++) { + // newDaysOfMonth.push(i + 1); + // } + + // setDaysOfMonth(newDaysOfMonth); + }; + + // Calender Layout + const daysOfWeek: DaysOfWeek = { + startOfWeek: { + Sunday: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + ], + Monday: [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday", + ], + }, + }; + + //TODO: Update nav to switch between the prev and next date or take in a custom date. + + // Navigation + const setDate = (input: UpdateCalendarProps): boolean => { + // const { year, month: inputMonth, day } = input; + + // if (!year || !inputMonth || day < 0 || day > 31) { + // return false; + // } else { + // const month = inputMonth - 1; + // const customDate: Date = new Date(year, month, day); + + // if (compareAsc(customDate, selectedDate) !== 0) { + // setSelectedDate(customDate); + // } + // } + }; + + //TODO: Add some functions that will update the MonthInfo state when the month changes. Each function should take care of each key in the context. + + const calenderContextValues = { + selectedDate, + monthInfo, + daysOfWeek, + setDate, + }; + + return ( + + {children} + + ); +}; + +export { CalenderContextProvider, CalenderContext }; From 57056a550b3acbb6e952a5edd0ca2a497e6091ce Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 22 Dec 2021 15:01:49 -0600 Subject: [PATCH 03/28] Added new calender context. --- pages/index.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/pages/index.tsx b/pages/index.tsx index 5f76f49..dee6334 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,6 +3,7 @@ import { Box } from "@chakra-ui/react"; import Calender from "../components/calender"; import { CalenderContextProvider } from "../contexts/CalenderContext"; import { format } from "date-fns"; +import { NewCalenderContextProvider } from "../contexts/NewCalenderContext"; interface UpdateCalendarProps { year: number; @@ -19,7 +20,9 @@ const IndexPage = (): JSX.Element => { return ( - + + + ); From 07dbe966e750680607ebc594ac3606fb0acfd5ae Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 22 Dec 2021 15:02:21 -0600 Subject: [PATCH 04/28] Added new function that is pulling in the new calender context. --- components/calender/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/calender/index.tsx b/components/calender/index.tsx index 63e77b9..cb3945c 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -2,6 +2,7 @@ import React, { useContext, useEffect } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import CalenderNav from "./CalenderNav"; import { CalenderContext } from "../../contexts/CalenderContext"; +import NewContext from "./NewContext"; interface UpdateCalendarProps { year: number; @@ -32,6 +33,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { return ( + Date: Wed, 22 Dec 2021 15:02:40 -0600 Subject: [PATCH 05/28] New component to pull in the new context. --- components/calender/NewContext.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 components/calender/NewContext.tsx diff --git a/components/calender/NewContext.tsx b/components/calender/NewContext.tsx new file mode 100644 index 0000000..47d0cfd --- /dev/null +++ b/components/calender/NewContext.tsx @@ -0,0 +1,16 @@ +import React, { useContext } from "react"; +import { Box, Text } from "@chakra-ui/react"; +import { NewCalenderContext } from "../../contexts/NewCalenderContext"; + +const NewContext = (): JSX.Element => { + const { selectedMonthInfo } = useContext(NewCalenderContext); + const { date } = selectedMonthInfo; + + return ( + + {`New Context Was Provided. Selected date is ${date}`} + + ); +}; + +export default NewContext; From 13d643fa56b0a6af6eff1414bd50a7eb0b4e1f7a Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 22 Dec 2021 15:03:09 -0600 Subject: [PATCH 06/28] Rewritten from scratch. New todos. New interfaces. New States. --- contexts/NewCalenderContext.tsx | 232 +++++++++++++++----------------- 1 file changed, 109 insertions(+), 123 deletions(-) diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx index a3c2ad0..ed9d533 100644 --- a/contexts/NewCalenderContext.tsx +++ b/contexts/NewCalenderContext.tsx @@ -1,8 +1,15 @@ import React, { createContext, useState, ReactNode } from "react"; -import { format, endOfMonth, getDate, compareAsc } from "date-fns"; +import { + format, + startOfMonth, + endOfMonth, + getDate, + sub, + compareAsc, +} from "date-fns"; // TODO: import types -type days = +type Days = | "Sunday" | "Monday" | "Tuesday" @@ -11,16 +18,13 @@ type days = | "Friday" | "Saturday"; -interface DaysOfWeek { - startOfWeek: { - Sunday: days[]; - Monday: days[]; - }; -} +type DaysOfWeek = Days[]; -interface UpdateCalendarProps { - direction: "next" | "prev"; - date: Date; +interface WeekDays { + startOfWeek: { + sunday: DaysOfWeek; + monday: DaysOfWeek; + }; } interface Month { @@ -32,153 +36,135 @@ interface Month { week6: Date[]; } -interface Calendar { - startOfWeek: { - Sunday: Month; - Monday: Month; - }; -} - -// Will replace all states and be used in redis as a form of memoization. interface MonthInfo { date: Date; title: string; - layout: Calendar; - startWeekday: number; - endWeekday: number; + startDay: string; + endDay: string; days: number; + prevMonth: { + date: Date; + endDay: number; + days: number; + }; } -interface CurrentMonth { - prev: MonthInfo; - curr: MonthInfo; - next: MonthInfo; -} - -interface CalenderMemoize { - String: CurrentMonth; +interface MonthContext extends MonthInfo { + startOfWeek: { + sunday: { + layout: DaysOfWeek; + month: Month; + }; + monday: { + layout: DaysOfWeek; + month: Month; + }; + }; } interface CalenderContextState { - selectedDate: Date; - monthInfo: MonthInfo; - setDate: (date: UpdateCalendarProps) => boolean; + selectedMonth: MonthContext; } -const CalenderContext = createContext({} as CalenderContextState); +const NewCalenderContext = createContext({} as CalenderContextState); -const CalenderContextProvider = ({ +const NewCalenderContextProvider = ({ children, }: { children: ReactNode; }): JSX.Element => { - const indexToDay = { + const weekDays: WeekDays = { startOfWeek: { - Sunday: { - 0: "Sunday", - 1: "Monday", - 2: "Tuesday", - 3: "Wednesday", - 4: "Thursday", - 5: "Friday", - 6: "Saturday", + sunday: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + ], + monday: [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday", + ], + }, + }; + + const ISOToIndex = { + startOfWeek: { + sunday: { + Sun: 0, + Mon: 1, + Tue: 2, + Wed: 3, + Thu: 4, + Fri: 5, + Sat: 6, }, - Monday: { - 0: "Monday", - 1: "Tuesday", - 2: "Wednesday", - 3: "Thursday", - 4: "Friday", - 5: "Saturday", - 6: "Sunday", + monday: { + Mon: 0, + Tue: 1, + Wed: 2, + Thu: 3, + Fri: 4, + Sat: 5, + Sun: 6, }, }, }; - // Selected month & year - const [selectedDate, setSelectedDate] = useState(new Date()); - // All the info for the current month - const [monthInfo, setMonthInfo] = useState({ - date: new Date(), + const [selectedDate, setSelectedMonth] = useState(new Date()); + const [prevMonth, setPrevMonth] = useState( + sub(selectedDate, { months: 1 }) + ); + const [selectedMonthInfo, setSelectedMonthInfo] = useState({ + date: selectedDate, title: format(selectedDate, "LLLL uuuu"), - layout: {} as Calendar, - startWeekday: 1, - endWeekday: 2, - days: getDate(endOfMonth(selectedDate)) - }) - - // TODO: Repalce this with the new date alignment algorithm. That adds the date weeks obj to the layout key in the monthInfo context. - // Update or populate the days of the month. - const populateDays = (): void => { - // let newDaysOfMonth: [number] = [...daysOfMonth]; - - // if (newDaysOfMonth.length > 1) { - // newDaysOfMonth = [1]; - // } - - // for (let i = 1; i < endOfSelectedMonth; i++) { - // newDaysOfMonth.push(i + 1); - // } - - // setDaysOfMonth(newDaysOfMonth); - }; - - // Calender Layout - const daysOfWeek: DaysOfWeek = { - startOfWeek: { - Sunday: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - ], - Monday: [ - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - "Sunday", - ], + startDay: format(startOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences. + endDay: format(endOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences. + days: getDate(endOfMonth(selectedDate)), + prevMonth: { + date: prevMonth, + endDay: getDate(endOfMonth(prevMonth)), + days: getDate(endOfMonth(prevMonth)), }, - }; + startOfWeek: { + sunday: { + layout: weekDays.startOfWeek.sunday, + month: {} as Month, + }, + monday: { + layout: weekDays.startOfWeek.monday, + month: {} as Month, + }, + }, + }); - //TODO: Update nav to switch between the prev and next date or take in a custom date. + //TODO: Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. - // Navigation - const setDate = (input: UpdateCalendarProps): boolean => { - // const { year, month: inputMonth, day } = input; + //TODO: Update the MonthInfo to use the new month population function on first render. - // if (!year || !inputMonth || day < 0 || day > 31) { - // return false; - // } else { - // const month = inputMonth - 1; - // const customDate: Date = new Date(year, month, day); + //TODO: Add a new navigation function that will take in either a direction (next, prev) or a date to go directly to. That will update the selected month and trigger the use effects below. - // if (compareAsc(customDate, selectedDate) !== 0) { - // setSelectedDate(customDate); - // } - // } - }; + //TODO: Add a function that will update the MonthInfo state when the selected month changes. This should use the populate month function that will be made above. - //TODO: Add some functions that will update the MonthInfo state when the month changes. Each function should take care of each key in the context. + //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated. const calenderContextValues = { - selectedDate, - monthInfo, - daysOfWeek, - setDate, + selectedMonthInfo, }; return ( - + {children} - + ); }; -export { CalenderContextProvider, CalenderContext }; +export { NewCalenderContextProvider, NewCalenderContext }; From 74fcc950c6e765ca3c72b7e3398f9cbe01b6cc08 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 28 Dec 2021 16:01:18 -0600 Subject: [PATCH 07/28] Mondays and sundays populating correctly in the new populateDays function. --- contexts/NewCalenderContext.tsx | 132 +++++++++++++++++++++++++++----- 1 file changed, 112 insertions(+), 20 deletions(-) diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx index ed9d533..06db7af 100644 --- a/contexts/NewCalenderContext.tsx +++ b/contexts/NewCalenderContext.tsx @@ -4,8 +4,11 @@ import { startOfMonth, endOfMonth, getDate, + add, sub, - compareAsc, + set, + isAfter, + isBefore } from "date-fns"; // TODO: import types @@ -97,25 +100,23 @@ const NewCalenderContextProvider = ({ }; const ISOToIndex = { - startOfWeek: { - sunday: { - Sun: 0, - Mon: 1, - Tue: 2, - Wed: 3, - Thu: 4, - Fri: 5, - Sat: 6, - }, - monday: { - Mon: 0, - Tue: 1, - Wed: 2, - Thu: 3, - Fri: 4, - Sat: 5, - Sun: 6, - }, + sunday: { + Sun: 0, + Mon: 1, + Tue: 2, + Wed: 3, + Thu: 4, + Fri: 5, + Sat: 6, + }, + monday: { + Mon: -1, + Tue: 0, + Wed: 1, + Thu: 2, + Fri: 3, + Sat: 4, + Sun: 5, }, }; @@ -148,6 +149,97 @@ const NewCalenderContextProvider = ({ //TODO: Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. + const isOverflow = (selectedDate: Date, currDate: Date) => { + let flag = false; + const start = startOfMonth(selectedDate); + const end = endOfMonth(selectedDate); + + if (isBefore(currDate, start) || isAfter(currDate, end)) { + flag = true; + } + + return flag; + } + + const populateMonth = ( + selectedDate: Date, + startOfMonth: string, + prevMonth: { + date: Date; + endDay: number; + days: number; + } + ): void => { + const sundays = { + week1: new Array(7).fill(null), + week2: new Array(7).fill(null), + week3: new Array(7).fill(null), + week4: new Array(7).fill(null), + week5: new Array(7).fill(null), + week6: new Array(7).fill(null), + }; + + const sunStartDay = + prevMonth.endDay - (ISOToIndex.sunday[startOfMonth] - 1); + + let sunCurrDate = set(sub(selectedDate, { months: 1 }), { + date: sunStartDay, + }); + + for (let week in sundays) { + const thisWeek = sundays[week]; + + thisWeek.forEach((e, i, a) => { + const day = { + isOverflow: isOverflow(selectedDate, sunCurrDate), + date: sunCurrDate, + }; + sunCurrDate = add(sunCurrDate, { days: 1 }) + + sundays[week][i] = day; + }); + } + + const mondays = { + week1: new Array(7).fill(null), + week2: new Array(7).fill(null), + week3: new Array(7).fill(null), + week4: new Array(7).fill(null), + week5: new Array(7).fill(null), + week6: new Array(7).fill(null), + }; + + const monStartDay = + prevMonth.endDay - (ISOToIndex.monday[startOfMonth]); + // console.log(`Start date: ${monStartDay}`); + + let monCurrDate = set(sub(selectedDate, { months: 1 }), { + date: monStartDay, + }); + // console.log(`Start date: ${currDate}`); + + for (let week in mondays) { + const thisWeek = mondays[week]; + + thisWeek.forEach((e, i, a) => { + const day = { + isOverflow: isOverflow(selectedDate, monCurrDate), + date: monCurrDate, + }; + monCurrDate = add(monCurrDate, { days: 1 }) + + mondays[week][i] = day; + }); + } + console.log("mondays after loop and map", mondays); + }; + + populateMonth( + selectedDate, + format(startOfMonth(selectedDate), "iii"), + selectedMonthInfo.prevMonth + ); + //TODO: Update the MonthInfo to use the new month population function on first render. //TODO: Add a new navigation function that will take in either a direction (next, prev) or a date to go directly to. That will update the selected month and trigger the use effects below. From c56dbb96d496b32f03668fe0b7ed182baed0c014 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Tue, 28 Dec 2021 16:08:45 -0600 Subject: [PATCH 08/28] Destructring, comments, and typing. --- contexts/NewCalenderContext.tsx | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx index 06db7af..e3ac928 100644 --- a/contexts/NewCalenderContext.tsx +++ b/contexts/NewCalenderContext.tsx @@ -8,7 +8,7 @@ import { sub, set, isAfter, - isBefore + isBefore, } from "date-fns"; // TODO: import types @@ -147,9 +147,10 @@ const NewCalenderContextProvider = ({ }, }); - //TODO: Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. + //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. - const isOverflow = (selectedDate: Date, currDate: Date) => { + // Checks if the date is before or after the current month. + const isOverflow = (selectedDate: Date, currDate: Date): boolean => { let flag = false; const start = startOfMonth(selectedDate); const end = endOfMonth(selectedDate); @@ -159,17 +160,18 @@ const NewCalenderContextProvider = ({ } return flag; - } + }; + // Populates the month. const populateMonth = ( selectedDate: Date, startOfMonth: string, prevMonth: { - date: Date; endDay: number; - days: number; } ): void => { + const { endDay: endLastMonth } = prevMonth; + const sundays = { week1: new Array(7).fill(null), week2: new Array(7).fill(null), @@ -179,8 +181,7 @@ const NewCalenderContextProvider = ({ week6: new Array(7).fill(null), }; - const sunStartDay = - prevMonth.endDay - (ISOToIndex.sunday[startOfMonth] - 1); + const sunStartDay = endLastMonth - (ISOToIndex.sunday[startOfMonth] - 1); let sunCurrDate = set(sub(selectedDate, { months: 1 }), { date: sunStartDay, @@ -194,7 +195,7 @@ const NewCalenderContextProvider = ({ isOverflow: isOverflow(selectedDate, sunCurrDate), date: sunCurrDate, }; - sunCurrDate = add(sunCurrDate, { days: 1 }) + sunCurrDate = add(sunCurrDate, { days: 1 }); sundays[week][i] = day; }); @@ -209,14 +210,11 @@ const NewCalenderContextProvider = ({ week6: new Array(7).fill(null), }; - const monStartDay = - prevMonth.endDay - (ISOToIndex.monday[startOfMonth]); - // console.log(`Start date: ${monStartDay}`); + const monStartDay = endLastMonth - ISOToIndex.monday[startOfMonth]; let monCurrDate = set(sub(selectedDate, { months: 1 }), { date: monStartDay, }); - // console.log(`Start date: ${currDate}`); for (let week in mondays) { const thisWeek = mondays[week]; @@ -226,14 +224,15 @@ const NewCalenderContextProvider = ({ isOverflow: isOverflow(selectedDate, monCurrDate), date: monCurrDate, }; - monCurrDate = add(monCurrDate, { days: 1 }) + monCurrDate = add(monCurrDate, { days: 1 }); mondays[week][i] = day; }); } - console.log("mondays after loop and map", mondays); }; + //TODO: Add output typing and move the invocation into the monthInfo state, removing any unended info from the state. + populateMonth( selectedDate, format(startOfMonth(selectedDate), "iii"), From b44021effaf1f1e98419d148a2c9cc0a05d8d78c Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 09:03:35 -0600 Subject: [PATCH 09/28] New prittier rule. No trailing commas. --- .prettierrc | 3 + components/calender/CalenderNav.tsx | 4 +- components/calender/DatePicker.tsx | 26 ++++---- components/calender/FormValidateEmoji.tsx | 4 +- components/calender/index.tsx | 2 +- contexts/CalenderContext.tsx | 20 +++--- contexts/NewCalenderContext.tsx | 78 +++++++++++------------ pages/calendar/[...date].tsx | 4 +- pages/index.tsx | 2 +- theme/AppTheme.ts | 16 ++--- theme/components/buttonStyles.ts | 54 ++++++++-------- theme/layout/BackToTopButton.tsx | 2 +- theme/layout/Footer.tsx | 2 +- theme/layout/Header.tsx | 10 +-- theme/layout/MobileNav.tsx | 6 +- 15 files changed, 118 insertions(+), 115 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..36b3563 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "trailingComma": "none" +} diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index a01e89d..11a00ee 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -14,7 +14,7 @@ const CalenderNav = (): JSX.Element => { const handleNavButtons = (direction: "next" | "prev") => { if (direction === "next") { const newMonth = add(selectedDate, { - months: 1, + months: 1 }); const year = format(newMonth, "y"); @@ -23,7 +23,7 @@ const CalenderNav = (): JSX.Element => { router.push(`/calendar/${year}/${month}`); } else if (direction === "prev") { const newMonth = sub(selectedDate, { - months: 1, + months: 1 }); const year = format(newMonth, "y"); diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx index 1130b08..03d76ed 100644 --- a/components/calender/DatePicker.tsx +++ b/components/calender/DatePicker.tsx @@ -14,7 +14,7 @@ import { PopoverContent, PopoverHeader, PopoverTrigger, - VStack, + VStack } from "@chakra-ui/react"; import { Formik, @@ -22,7 +22,7 @@ import { FormikProps, Form, Field, - FieldProps, + FieldProps } from "formik"; import { format } from "date-fns"; import { CalenderContext } from "../../contexts/CalenderContext"; @@ -57,7 +57,7 @@ const DatePicker = (): JSX.Element => { const date: UpdateCalendarProps = { year: parseInt(dateArr[0]), month: parseInt(dateArr[1]), - day: parseInt(dateArr[2]), + day: parseInt(dateArr[2]) }; if (!/^(19|20)\d{2}$/.test(`${date.year}`)) { @@ -97,7 +97,7 @@ const DatePicker = (): JSX.Element => { const date: UpdateCalendarProps = { year: parseInt(dateArr[0]), month: parseInt(dateArr[1]), - day: parseInt(dateArr[2]), + day: parseInt(dateArr[2]) }; return resolve(router.push(`/calendar/${date.year}/${date.month}`)); @@ -116,15 +116,15 @@ const DatePicker = (): JSX.Element => { bg: "gray.900", borderColor: "white", _placeholder: { - color: "white", + color: "white" }, _focus: { bg: "#000", color: "#FFF", borderColor: "#63b3ed", boxShadow: "0 0 0 1px #63b3ed", - zIndex: "1", - }, + zIndex: "1" + } }; const initRef = useRef(); @@ -148,7 +148,7 @@ const DatePicker = (): JSX.Element => { { handleSubmit(data) @@ -156,8 +156,8 @@ const DatePicker = (): JSX.Element => { actions.setSubmitting(false); actions.resetForm({ values: { - date: "", - }, + date: "" + } }); }) .catch(() => { @@ -169,7 +169,7 @@ const DatePicker = (): JSX.Element => {
{ boxShadow: "0 0 0 1px #00c17c", _hover: { borderColor: "brand.valid", - boxShadow: "0 0 0 1px #00c17c", - }, + boxShadow: "0 0 0 1px #00c17c" + } } : "")} /> diff --git a/components/calender/FormValidateEmoji.tsx b/components/calender/FormValidateEmoji.tsx index 2edbd19..a231114 100644 --- a/components/calender/FormValidateEmoji.tsx +++ b/components/calender/FormValidateEmoji.tsx @@ -5,7 +5,7 @@ interface FormValidateEmojiProps { } const FormValidateEmoji: FC = ({ - type, + type }: FormValidateEmojiProps) => { interface Validations { [key: string]: JSX.Element; @@ -26,7 +26,7 @@ const FormValidateEmoji: FC = ({ ✔ - ), + ) }; return validations[`${type}`]; diff --git a/components/calender/index.tsx b/components/calender/index.tsx index cb3945c..0d3f179 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -28,7 +28,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { // Simulated user settings context const userSettings = { theme: "default", - startOfWeek: "Sunday", + startOfWeek: "Sunday" }; return ( diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index c16b2a3..fa14ab6 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -68,7 +68,7 @@ interface CalenderContextState { const CalenderContext = createContext({} as CalenderContextState); const CalenderContextProvider = ({ - children, + children }: { children: ReactNode; }): JSX.Element => { @@ -81,7 +81,7 @@ const CalenderContextProvider = ({ 3: "Wednesday", 4: "Thursday", 5: "Friday", - 6: "Saturday", + 6: "Saturday" }, Monday: { 0: "Monday", @@ -90,9 +90,9 @@ const CalenderContextProvider = ({ 3: "Thursday", 4: "Friday", 5: "Saturday", - 6: "Sunday", - }, - }, + 6: "Sunday" + } + } }; // Selected month & year @@ -157,7 +157,7 @@ const CalenderContextProvider = ({ "Wednesday", "Thursday", "Friday", - "Saturday", + "Saturday" ], Monday: [ "Monday", @@ -166,9 +166,9 @@ const CalenderContextProvider = ({ "Thursday", "Friday", "Saturday", - "Sunday", - ], - }, + "Sunday" + ] + } }; //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting. @@ -193,7 +193,7 @@ const CalenderContextProvider = ({ selectedDate, daysOfMonth, daysOfWeek, - setDate, + setDate }; return ( diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx index e3ac928..821a59f 100644 --- a/contexts/NewCalenderContext.tsx +++ b/contexts/NewCalenderContext.tsx @@ -8,7 +8,7 @@ import { sub, set, isAfter, - isBefore, + isBefore } from "date-fns"; // TODO: import types @@ -72,7 +72,7 @@ interface CalenderContextState { const NewCalenderContext = createContext({} as CalenderContextState); const NewCalenderContextProvider = ({ - children, + children }: { children: ReactNode; }): JSX.Element => { @@ -85,7 +85,7 @@ const NewCalenderContextProvider = ({ "Wednesday", "Thursday", "Friday", - "Saturday", + "Saturday" ], monday: [ "Monday", @@ -94,30 +94,9 @@ const NewCalenderContextProvider = ({ "Thursday", "Friday", "Saturday", - "Sunday", - ], - }, - }; - - const ISOToIndex = { - sunday: { - Sun: 0, - Mon: 1, - Tue: 2, - Wed: 3, - Thu: 4, - Fri: 5, - Sat: 6, - }, - monday: { - Mon: -1, - Tue: 0, - Wed: 1, - Thu: 2, - Fri: 3, - Sat: 4, - Sun: 5, - }, + "Sunday" + ] + } }; const [selectedDate, setSelectedMonth] = useState(new Date()); @@ -133,18 +112,18 @@ const NewCalenderContextProvider = ({ prevMonth: { date: prevMonth, endDay: getDate(endOfMonth(prevMonth)), - days: getDate(endOfMonth(prevMonth)), + days: getDate(endOfMonth(prevMonth)) }, startOfWeek: { sunday: { layout: weekDays.startOfWeek.sunday, - month: {} as Month, + month: {} as Month }, monday: { layout: weekDays.startOfWeek.monday, - month: {} as Month, - }, - }, + month: {} as Month + } + } }); //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. @@ -172,19 +151,40 @@ const NewCalenderContextProvider = ({ ): void => { const { endDay: endLastMonth } = prevMonth; + const ISOToIndex = { + sunday: { + Sun: 0, + Mon: 1, + Tue: 2, + Wed: 3, + Thu: 4, + Fri: 5, + Sat: 6 + }, + monday: { + Mon: -1, + Tue: 0, + Wed: 1, + Thu: 2, + Fri: 3, + Sat: 4, + Sun: 5 + } + }; + const sundays = { week1: new Array(7).fill(null), week2: new Array(7).fill(null), week3: new Array(7).fill(null), week4: new Array(7).fill(null), week5: new Array(7).fill(null), - week6: new Array(7).fill(null), + week6: new Array(7).fill(null) }; const sunStartDay = endLastMonth - (ISOToIndex.sunday[startOfMonth] - 1); let sunCurrDate = set(sub(selectedDate, { months: 1 }), { - date: sunStartDay, + date: sunStartDay }); for (let week in sundays) { @@ -193,7 +193,7 @@ const NewCalenderContextProvider = ({ thisWeek.forEach((e, i, a) => { const day = { isOverflow: isOverflow(selectedDate, sunCurrDate), - date: sunCurrDate, + date: sunCurrDate }; sunCurrDate = add(sunCurrDate, { days: 1 }); @@ -207,13 +207,13 @@ const NewCalenderContextProvider = ({ week3: new Array(7).fill(null), week4: new Array(7).fill(null), week5: new Array(7).fill(null), - week6: new Array(7).fill(null), + week6: new Array(7).fill(null) }; const monStartDay = endLastMonth - ISOToIndex.monday[startOfMonth]; let monCurrDate = set(sub(selectedDate, { months: 1 }), { - date: monStartDay, + date: monStartDay }); for (let week in mondays) { @@ -222,7 +222,7 @@ const NewCalenderContextProvider = ({ thisWeek.forEach((e, i, a) => { const day = { isOverflow: isOverflow(selectedDate, monCurrDate), - date: monCurrDate, + date: monCurrDate }; monCurrDate = add(monCurrDate, { days: 1 }); @@ -248,7 +248,7 @@ const NewCalenderContextProvider = ({ //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated. const calenderContextValues = { - selectedMonthInfo, + selectedMonthInfo }; return ( diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index aaa6945..1eb321f 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -22,14 +22,14 @@ const DateRoute: React.FC = () => { return { year: 0, month: 0, - day: 0, + day: 0 }; } const date = { year: 0, month: 0, - day: 0, + day: 0 }; if (/^(19|20)\d{2}$/.test(`${dateArr[0]}`)) { diff --git a/pages/index.tsx b/pages/index.tsx index dee6334..1872276 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -15,7 +15,7 @@ const IndexPage = (): JSX.Element => { const date = useRef({ year: parseInt(format(new Date(), "y")), month: parseInt(format(new Date(), "M")), - day: parseInt(format(new Date(), "d")), + day: parseInt(format(new Date(), "d")) }); return ( diff --git a/theme/AppTheme.ts b/theme/AppTheme.ts index 794cd3b..16de8ea 100644 --- a/theme/AppTheme.ts +++ b/theme/AppTheme.ts @@ -4,7 +4,7 @@ import buttons from "./components/buttonStyles"; const config: ThemeConfig = { initialColorMode: "dark", - useSystemColorMode: false, + useSystemColorMode: false }; // const breakpoints = createBreakpoints({ @@ -29,19 +29,19 @@ const AppTheme = extendTheme({ footer: "#0097a7", footerText: "black", content: "#2d3748", - patreon: "#FF424D", - }, + patreon: "#FF424D" + } }, styles: { global: { body: { - bg: "gray.900", - }, - }, + bg: "gray.900" + } + } }, components: { - Button: buttons, - }, + Button: buttons + } // breakpoints, }); diff --git a/theme/components/buttonStyles.ts b/theme/components/buttonStyles.ts index ca5c83a..1234830 100644 --- a/theme/components/buttonStyles.ts +++ b/theme/components/buttonStyles.ts @@ -3,7 +3,7 @@ import { darken, mode, StyleFunctionProps, - whiten, + whiten } from "@chakra-ui/theme-tools"; import { Dict } from "@chakra-ui/utils"; @@ -22,8 +22,8 @@ const buttonStyles = { bg: mode( whiten("brand.primary", 20), darken("brand.primary", 20) - )(props), - }, + )(props) + } }), contactSecondary: (props: Dict | StyleFunctionProps) => ({ bg: "brand.primary", @@ -33,8 +33,8 @@ const buttonStyles = { bg: mode( whiten("brand.primary", 20), darken("brand.primary", 20) - )(props), - }, + )(props) + } }), project: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", @@ -50,8 +50,8 @@ const buttonStyles = { darken("brand.secondary", 20) )(props), boxShadow: - "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px", - }, + "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px" + } }), nav: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", @@ -61,16 +61,16 @@ const buttonStyles = { bg: mode( whiten("brand.secondary", 20), darken("brand.secondary", 20) - )(props), - }, + )(props) + } }), stickyNav: (/* props: Dict | StyleFunctionProps */) => ({ bg: "transparent", fontSize: "md", px: "2", _hover: { - textDecoration: "underline", - }, + textDecoration: "underline" + } }), credits: (props: Dict | StyleFunctionProps) => ({ bg: "brand.main", @@ -78,8 +78,8 @@ const buttonStyles = { p: 3, color: "whiteAlpha", _hover: { - bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props), - }, + bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props) + } }), backToTop: (props: Dict | StyleFunctionProps) => ({ bg: "rgba(23, 25, 35, 0.5)", @@ -98,8 +98,8 @@ const buttonStyles = { boxShadow: "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px", color: "whiteAlpha.900", - border: "1px solid rgba(0, 134, 255, 1)", - }, + border: "1px solid rgba(0, 134, 255, 1)" + } }), collapse: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", @@ -114,8 +114,8 @@ const buttonStyles = { darken("brand.secondary", 20) )(props), color: "whiteAlpha.900", - textDecoration: "none", - }, + textDecoration: "none" + } }), submit: (props: Dict | StyleFunctionProps) => ({ fontSize: "lg", @@ -132,9 +132,9 @@ const buttonStyles = { )(props), boxShadow: "rgba(252, 129, 129, .95) 0px 0px 15px, rgba(252, 129, 129, 0.75) 0px 0px 3px 1px", - border: "1px solid #FC8181", - }, - }, + border: "1px solid #FC8181" + } + } }), mobileNav: (props: Dict | StyleFunctionProps) => ({ // bg: "transparent", @@ -148,14 +148,14 @@ const buttonStyles = { darken("brand.secondary", 20) )(props), boxShadow: - "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px", + "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px" }, _expanded: { bg: "brand.primary", boxShadow: "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px", - border: "1px solid #0068ff", - }, + border: "1px solid #0068ff" + } }), patreon: (props: Dict | StyleFunctionProps) => ({ bg: "brand.patreon", @@ -166,12 +166,12 @@ const buttonStyles = { bg: mode( whiten("brand.patreon", 20), darken("brand.patreon", 20) - )(props), - }, - }), + )(props) + } + }) }, // default values for `size` and `variant` - defaultProps: {}, + defaultProps: {} }; export default buttonStyles; diff --git a/theme/layout/BackToTopButton.tsx b/theme/layout/BackToTopButton.tsx index 930b203..c26a021 100644 --- a/theme/layout/BackToTopButton.tsx +++ b/theme/layout/BackToTopButton.tsx @@ -7,7 +7,7 @@ interface BackToTopButtonProps { } const BackToTopButton: FC = ({ - show, + show }: BackToTopButtonProps) => { return ( { const iconType = { default: , hover: , - open: , + open: }; if (open) { @@ -91,7 +91,7 @@ const Header = (): JSX.Element => { bg: "brand.main", boxShadow: open ? "none" - : "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px", + : "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px" }} h={open ? "125px" : "auto"} > @@ -107,7 +107,7 @@ const Header = (): JSX.Element => { d={{ base: "flex", lg: "none" }} spacing="5px" _hover={{ - cursor: "default", + cursor: "default" }} > @@ -140,7 +140,7 @@ const Header = (): JSX.Element => { height="auto" spacing="5px" _hover={{ - cursor: "default", + cursor: "default" }} > diff --git a/theme/layout/MobileNav.tsx b/theme/layout/MobileNav.tsx index 08ac873..fa43d21 100644 --- a/theme/layout/MobileNav.tsx +++ b/theme/layout/MobileNav.tsx @@ -4,7 +4,7 @@ import { Link, MenuDivider, MenuItem, - MenuList, + MenuList } from "@chakra-ui/react"; import navItems, { NavItem } from "./navItems"; @@ -33,10 +33,10 @@ const MobileNav: FC = ({ updateOpen }: MobileNavProps) => { h="auto" p={0} _hover={{ - backgroundColor: "none", + backgroundColor: "none" }} _focus={{ - backgroundColor: "none", + backgroundColor: "none" }} > updateOpen(false)} href={navItem[1]}> From 4b2aac3da20a639e7c303f9b64ddd28c9a0de9ad Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 09:14:14 -0600 Subject: [PATCH 10/28] Adding eslint rule danlge comma. --- .eslintrc.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/.eslintrc.json b/.eslintrc.json index aa20bf6..fd37a39 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,4 +1,16 @@ { + "rules": { + "comma-dangle": [ + "error", + { + "arrays": "never", + "objects": "never", + "imports": "never", + "exports": "never", + "functions": "never" + } + ] + }, "extends": [ "next", "next/core-web-vitals", From 40ebaec47cea67669a8fb3556502c005ee4a4964 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 09:36:16 -0600 Subject: [PATCH 11/28] Removing uneeded info from context. --- contexts/NewCalenderContext.tsx | 77 +++++++++++++++++---------------- 1 file changed, 40 insertions(+), 37 deletions(-) diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx index 821a59f..92314b6 100644 --- a/contexts/NewCalenderContext.tsx +++ b/contexts/NewCalenderContext.tsx @@ -24,19 +24,22 @@ type Days = type DaysOfWeek = Days[]; interface WeekDays { - startOfWeek: { - sunday: DaysOfWeek; - monday: DaysOfWeek; - }; + sunday: DaysOfWeek; + monday: DaysOfWeek; +} + +interface MonthDay { + isOverflow: boolean; + date: Date; } interface Month { - week1: Date[]; - week2: Date[]; - week3: Date[]; - week4: Date[]; - week5: Date[]; - week6: Date[]; + week1: MonthDay[]; + week2: MonthDay[]; + week3: MonthDay[]; + week4: MonthDay[]; + week5: MonthDay[]; + week6: MonthDay[]; } interface MonthInfo { @@ -48,18 +51,19 @@ interface MonthInfo { prevMonth: { date: Date; endDay: number; - days: number; }; } interface MonthContext extends MonthInfo { - startOfWeek: { + layout: { sunday: { layout: DaysOfWeek; + header: String; month: Month; }; monday: { layout: DaysOfWeek; + header: String; month: Month; }; }; @@ -77,26 +81,24 @@ const NewCalenderContextProvider = ({ children: ReactNode; }): JSX.Element => { const weekDays: WeekDays = { - startOfWeek: { - sunday: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday" - ], - monday: [ - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - "Sunday" - ] - } + sunday: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday" + ], + monday: [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday" + ] }; const [selectedDate, setSelectedMonth] = useState(new Date()); @@ -111,16 +113,17 @@ const NewCalenderContextProvider = ({ days: getDate(endOfMonth(selectedDate)), prevMonth: { date: prevMonth, - endDay: getDate(endOfMonth(prevMonth)), - days: getDate(endOfMonth(prevMonth)) + endDay: getDate(endOfMonth(prevMonth)) }, - startOfWeek: { + layout: { sunday: { - layout: weekDays.startOfWeek.sunday, + layout: weekDays.sunday, + header: "Month title here", month: {} as Month }, monday: { - layout: weekDays.startOfWeek.monday, + layout: weekDays.monday, + header: "Month title here", month: {} as Month } } From f8130f55c9dd60e7f006d3b84ba3e985af4fb2dc Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 10:47:05 -0600 Subject: [PATCH 12/28] Invoked populateMonth within the intialization of the month context. --- contexts/NewCalenderContext.tsx | 102 +++++++++++++++++--------------- 1 file changed, 55 insertions(+), 47 deletions(-) diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx index 92314b6..b612393 100644 --- a/contexts/NewCalenderContext.tsx +++ b/contexts/NewCalenderContext.tsx @@ -54,19 +54,19 @@ interface MonthInfo { }; } -interface MonthContext extends MonthInfo { - layout: { - sunday: { - layout: DaysOfWeek; - header: String; - month: Month; - }; - monday: { - layout: DaysOfWeek; - header: String; - month: Month; - }; +interface MonthLayout { + sunday: { + layout: DaysOfWeek; + month: Month; }; + monday: { + layout: DaysOfWeek; + month: Month; + }; +} + +interface MonthContext extends MonthInfo { + layout: MonthLayout; } interface CalenderContextState { @@ -101,34 +101,6 @@ const NewCalenderContextProvider = ({ ] }; - const [selectedDate, setSelectedMonth] = useState(new Date()); - const [prevMonth, setPrevMonth] = useState( - sub(selectedDate, { months: 1 }) - ); - const [selectedMonthInfo, setSelectedMonthInfo] = useState({ - date: selectedDate, - title: format(selectedDate, "LLLL uuuu"), - startDay: format(startOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences. - endDay: format(endOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences. - days: getDate(endOfMonth(selectedDate)), - prevMonth: { - date: prevMonth, - endDay: getDate(endOfMonth(prevMonth)) - }, - layout: { - sunday: { - layout: weekDays.sunday, - header: "Month title here", - month: {} as Month - }, - monday: { - layout: weekDays.monday, - header: "Month title here", - month: {} as Month - } - } - }); - //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. // Checks if the date is before or after the current month. @@ -151,7 +123,7 @@ const NewCalenderContextProvider = ({ prevMonth: { endDay: number; } - ): void => { + ): MonthLayout => { const { endDay: endLastMonth } = prevMonth; const ISOToIndex = { @@ -194,7 +166,7 @@ const NewCalenderContextProvider = ({ const thisWeek = sundays[week]; thisWeek.forEach((e, i, a) => { - const day = { + const day: MonthDay= { isOverflow: isOverflow(selectedDate, sunCurrDate), date: sunCurrDate }; @@ -223,7 +195,7 @@ const NewCalenderContextProvider = ({ const thisWeek = mondays[week]; thisWeek.forEach((e, i, a) => { - const day = { + const day: MonthDay = { isOverflow: isOverflow(selectedDate, monCurrDate), date: monCurrDate }; @@ -232,15 +204,51 @@ const NewCalenderContextProvider = ({ mondays[week][i] = day; }); } + + const output = { + sunday: { + layout: weekDays.sunday, + month: sundays + }, + monday: { + layout: weekDays.monday, + month: mondays + } + }; + + return output; }; //TODO: Add output typing and move the invocation into the monthInfo state, removing any unended info from the state. - populateMonth( - selectedDate, - format(startOfMonth(selectedDate), "iii"), - selectedMonthInfo.prevMonth + // populateMonth( + // selectedDate, + // format(startOfMonth(selectedDate), "iii"), + // selectedMonthInfo.prevMonth + // ); + + const [selectedDate, setSelectedMonth] = useState(new Date()); + const [prevMonth, setPrevMonth] = useState( + sub(selectedDate, { months: 1 }) ); + const [selectedMonthInfo, setSelectedMonthInfo] = useState({ + date: selectedDate, + title: format(selectedDate, "LLLL uuuu"), + startDay: format(startOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences. + endDay: format(endOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences. + days: getDate(endOfMonth(selectedDate)), + prevMonth: { + date: prevMonth, + endDay: getDate(endOfMonth(prevMonth)) + }, + layout: populateMonth( + selectedDate, + format(startOfMonth(selectedDate), "iii"), + { + endDay: getDate(endOfMonth(prevMonth)) + } + ) + }); //TODO: Update the MonthInfo to use the new month population function on first render. From eb097351072399e3a69c121c5d1816c79dba3ef7 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 11:25:29 -0600 Subject: [PATCH 13/28] Documentation for certain functions. --- contexts/NewCalenderContext.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx index b612393..67854bd 100644 --- a/contexts/NewCalenderContext.tsx +++ b/contexts/NewCalenderContext.tsx @@ -103,7 +103,12 @@ const NewCalenderContextProvider = ({ //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. - // Checks if the date is before or after the current month. + /** + * Using date-fns, this function checks if currDate is within the month of selectedDate or not. + * @param {Date} selectedDate The current month. + * @param {Date} currDate The date to be compared to the selected month. + * @returns True if currDate is outside of the month of selectedDate, false if otherwise. + */ const isOverflow = (selectedDate: Date, currDate: Date): boolean => { let flag = false; const start = startOfMonth(selectedDate); @@ -166,7 +171,7 @@ const NewCalenderContextProvider = ({ const thisWeek = sundays[week]; thisWeek.forEach((e, i, a) => { - const day: MonthDay= { + const day: MonthDay = { isOverflow: isOverflow(selectedDate, sunCurrDate), date: sunCurrDate }; @@ -219,7 +224,7 @@ const NewCalenderContextProvider = ({ return output; }; - //TODO: Add output typing and move the invocation into the monthInfo state, removing any unended info from the state. + //TODO Add output typing and move the invocation into the monthInfo state, removing any unended info from the state. // populateMonth( // selectedDate, @@ -234,8 +239,8 @@ const NewCalenderContextProvider = ({ const [selectedMonthInfo, setSelectedMonthInfo] = useState({ date: selectedDate, title: format(selectedDate, "LLLL uuuu"), - startDay: format(startOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences. - endDay: format(endOfMonth(selectedDate), "iii"), // TODO: Update to use the ISOToIndex dynamically with the user's start day preferences. + startDay: format(startOfMonth(selectedDate), "iii"), // TODO Update to use the ISOToIndex dynamically with the user's start day preferences. + endDay: format(endOfMonth(selectedDate), "iii"), // TODO Update to use the ISOToIndex dynamically with the user's start day preferences. days: getDate(endOfMonth(selectedDate)), prevMonth: { date: prevMonth, From 11c80105152cd93f83ab2c182c9f26d9e350ea37 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 11:40:08 -0600 Subject: [PATCH 14/28] Prittier rules. --- .prettierrc | 4 ++- components/calender/DatePicker.tsx | 6 +++- contexts/NewCalenderContext.tsx | 51 ++++++++++-------------------- pages/calendar/[...date].tsx | 4 ++- theme/layout/BackToTopButton.tsx | 6 +++- theme/layout/Header.tsx | 10 ++++-- 6 files changed, 41 insertions(+), 40 deletions(-) diff --git a/.prettierrc b/.prettierrc index 36b3563..d0ec4af 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,5 @@ { - "trailingComma": "none" + "trailingComma": "none", + "tabWidth": 2, + "bracketSameLine": false } diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx index 03d76ed..bf38209 100644 --- a/components/calender/DatePicker.tsx +++ b/components/calender/DatePicker.tsx @@ -165,7 +165,11 @@ const DatePicker = (): JSX.Element => { }); }} > - {(formProps: FormikProps<{ date: string }>) => ( + {( + formProps: FormikProps<{ + date: string; + }> + ) => ( { - const { endDay: endLastMonth } = prevMonth; + /** + * A function that will return a month layout when given a date. It produces an object with 6 weeks that include overflow from the previous and next month with all dates aligned with the day of the week. + * @param selectedDate The date of the month to generate a month layout for. + */ + const populateMonth = (selectedDate: Date): MonthLayout => { + const endLastMonth = getDate(endOfMonth(sub(selectedDate, { months: 1 }))); + const startOfSelectedMonth = format(startOfMonth(selectedDate), "iii"); const ISOToIndex = { sunday: { @@ -161,7 +152,8 @@ const NewCalenderContextProvider = ({ week6: new Array(7).fill(null) }; - const sunStartDay = endLastMonth - (ISOToIndex.sunday[startOfMonth] - 1); + const sunStartDay = + endLastMonth - (ISOToIndex.sunday[startOfSelectedMonth] - 1); let sunCurrDate = set(sub(selectedDate, { months: 1 }), { date: sunStartDay @@ -175,7 +167,9 @@ const NewCalenderContextProvider = ({ isOverflow: isOverflow(selectedDate, sunCurrDate), date: sunCurrDate }; - sunCurrDate = add(sunCurrDate, { days: 1 }); + sunCurrDate = add(sunCurrDate, { + days: 1 + }); sundays[week][i] = day; }); @@ -190,7 +184,7 @@ const NewCalenderContextProvider = ({ week6: new Array(7).fill(null) }; - const monStartDay = endLastMonth - ISOToIndex.monday[startOfMonth]; + const monStartDay = endLastMonth - ISOToIndex.monday[startOfSelectedMonth]; let monCurrDate = set(sub(selectedDate, { months: 1 }), { date: monStartDay @@ -204,7 +198,9 @@ const NewCalenderContextProvider = ({ isOverflow: isOverflow(selectedDate, monCurrDate), date: monCurrDate }; - monCurrDate = add(monCurrDate, { days: 1 }); + monCurrDate = add(monCurrDate, { + days: 1 + }); mondays[week][i] = day; }); @@ -239,20 +235,7 @@ const NewCalenderContextProvider = ({ const [selectedMonthInfo, setSelectedMonthInfo] = useState({ date: selectedDate, title: format(selectedDate, "LLLL uuuu"), - startDay: format(startOfMonth(selectedDate), "iii"), // TODO Update to use the ISOToIndex dynamically with the user's start day preferences. - endDay: format(endOfMonth(selectedDate), "iii"), // TODO Update to use the ISOToIndex dynamically with the user's start day preferences. - days: getDate(endOfMonth(selectedDate)), - prevMonth: { - date: prevMonth, - endDay: getDate(endOfMonth(prevMonth)) - }, - layout: populateMonth( - selectedDate, - format(startOfMonth(selectedDate), "iii"), - { - endDay: getDate(endOfMonth(prevMonth)) - } - ) + layout: populateMonth(selectedDate) }); //TODO: Update the MonthInfo to use the new month population function on first render. diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 1eb321f..83f8d88 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -58,7 +58,9 @@ const DateRoute: React.FC = () => { const parsedSlug = slug.map((e) => { return parseInt(e); }); - setDate({ ...validateDateInput(parsedSlug) }); + setDate({ + ...validateDateInput(parsedSlug) + }); } }, [slug]); diff --git a/theme/layout/BackToTopButton.tsx b/theme/layout/BackToTopButton.tsx index c26a021..ea0f080 100644 --- a/theme/layout/BackToTopButton.tsx +++ b/theme/layout/BackToTopButton.tsx @@ -14,7 +14,11 @@ const BackToTopButton: FC = ({ d={show ? "flex" : "none"} pos="fixed" top="85vh" - right={{ base: "1.25rem", sm: "2rem", md: "3rem" }} + right={{ + base: "1.25rem", + sm: "2rem", + md: "3rem" + }} > diff --git a/components/calender/index.tsx b/components/calender/index.tsx index 5a9a160..62913fc 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -1,7 +1,6 @@ import React, { useContext, useEffect } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import CalenderNav from "./CalenderNav"; -import { CalenderContext } from "../../contexts/CalenderContext"; import { NewCalenderContext } from "../../contexts/NewCalenderContext"; import { getDate } from "date-fns"; // TODO: import types @@ -13,20 +12,19 @@ interface UpdateCalendarProps { } const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { - const { daysOfMonth, daysOfWeek, setDate } = useContext(CalenderContext); - const { layout } = useContext(NewCalenderContext); + const { layout, updateDate } = useContext(NewCalenderContext); useEffect(() => { if (newDate) { const { year, month, day } = newDate; if (year > 0 && month > 0 && day > 0) { - setDate(newDate); + updateDate(newDate); } else { console.warn("Invalid date format: ", newDate); } } - }, [daysOfMonth, daysOfWeek, newDate, setDate]); + }, [newDate, updateDate]); // Simulated user settings context const userSettings = { @@ -39,7 +37,6 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { return ( - {/* */} void; } const NewCalenderContext = createContext({} as CalenderContextState); @@ -163,10 +173,10 @@ const NewCalenderContextProvider = ({ date: sunStartDay }); - for (let week in sundays) { + for (const week in sundays) { const thisWeek = sundays[week]; - thisWeek.forEach((e, i, a) => { + thisWeek.forEach((e, i) => { const day: MonthDay = { isOverflow: isOverflow(selectedDate, sunCurrDate), date: sunCurrDate @@ -194,10 +204,10 @@ const NewCalenderContextProvider = ({ date: monStartDay }); - for (let week in mondays) { + for (const week in mondays) { const thisWeek = mondays[week]; - thisWeek.forEach((e, i, a) => { + thisWeek.forEach((e, i) => { const day: MonthDay = { isOverflow: isOverflow(selectedDate, monCurrDate), date: monCurrDate @@ -224,33 +234,47 @@ const NewCalenderContextProvider = ({ return output; }; - //TODO Add output typing and move the invocation into the monthInfo state, removing any unended info from the state. - - // populateMonth( - // selectedDate, - // format(startOfMonth(selectedDate), "iii"), - // selectedMonthInfo.prevMonth - // ); - - const [selectedDate, setSelectedMonth] = useState(new Date()); + const [selectedDate, setSelectedDate] = useState(new Date()); const [selectedDateInfo, setSelectedMonthInfo] = useState({ date: selectedDate, title: format(selectedDate, "LLLL uuuu"), layout: populateMonth(selectedDate) }); - //TODO: Update the MonthInfo to use the new month population function on first render. + //TODO Update the MonthInfo to use the new month population function on first render. + + //TODO Add a function that will update the MonthInfo state when the selected month changes. This should use the populate month function that will be made above. + const updateDateInfo = (newDate: Date) => { + const output = { ...selectedDateInfo }; + output.date = newDate; + output.title = format(newDate, "LLLL uuuu"); + output.layout = populateMonth(newDate); + + setSelectedMonthInfo(output); + }; //TODO: Add a new navigation function that will take in either a direction (next, prev) or a date to go directly to. That will update the selected month and trigger the use effects below. + const updateDate = (input: UpdateCalendarProps) => { + const { year, month: inputMonth, day } = input; - //TODO: Add a function that will update the MonthInfo state when the selected month changes. This should use the populate month function that will be made above. + if (!year || !inputMonth || day < 0 || day > 31) { + return false; + } else { + const month = inputMonth - 1; + const customDate: Date = new Date(year, month, day); - //TODO: Add a useEffect that will trigger the update function(s) to run when the selected date is updated. + if (compareAsc(customDate, selectedDate) !== 0) { + setSelectedDate(customDate); + updateDateInfo(customDate); + } + } + }; const calenderContextValues = { - selectedDate: selectedDate, + selectedDate, title: selectedDateInfo.title, - layout: selectedDateInfo.layout + layout: selectedDateInfo.layout, + updateDate }; return ( diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 83f8d88..1ed49ba 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -4,6 +4,7 @@ import { useRouter } from "next/router"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; import { CalenderContextProvider } from "../../contexts/CalenderContext"; +import { NewCalenderContextProvider } from "../../contexts/NewCalenderContext"; interface UpdateCalendarProps { year: number; @@ -71,7 +72,9 @@ const DateRoute: React.FC = () => { return ( - + + + ); diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx index 7af79cc..0913fa2 100644 --- a/theme/layout/Header.tsx +++ b/theme/layout/Header.tsx @@ -84,8 +84,8 @@ const Header = (): JSX.Element => { open ? "brand.main" : transparentNavbar - ? "rgba(49, 56, 220, 0.9)" - : "brand.main" + ? "rgba(49, 56, 220, 0.9)" + : "brand.main" } transition=".5s ease" borderRadius="0px 0px 10px 10px" From 73b03afaab6a731a17d5fad8b05441ca8c3183f5 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 17:07:48 -0600 Subject: [PATCH 22/28] Removing old context file and cleaning up. --- components/calender/CalenderNav.tsx | 4 +- components/calender/DatePicker.tsx | 5 +- components/calender/index.tsx | 4 +- contexts/CalenderContext.tsx | 359 +++++++++++++++++----------- contexts/NewCalenderContext.tsx | 287 ---------------------- pages/calendar/[...date].tsx | 5 +- pages/index.tsx | 5 +- 7 files changed, 227 insertions(+), 442 deletions(-) delete mode 100644 contexts/NewCalenderContext.tsx diff --git a/components/calender/CalenderNav.tsx b/components/calender/CalenderNav.tsx index 817ac6f..1cc36c6 100644 --- a/components/calender/CalenderNav.tsx +++ b/components/calender/CalenderNav.tsx @@ -4,10 +4,10 @@ import { HStack, IconButton } from "@chakra-ui/react"; import { Icon } from "@iconify/react"; import { sub, add, format } from "date-fns"; import DatePicker from "./DatePicker"; -import { NewCalenderContext } from "../../contexts/NewCalenderContext"; +import { CalenderContext } from "../../contexts/CalenderContext"; const CalenderNav = (): JSX.Element => { - const { selectedDate } = useContext(NewCalenderContext); + const { selectedDate } = useContext(CalenderContext); const router = useRouter(); diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx index 9be5c4f..dfd62a6 100644 --- a/components/calender/DatePicker.tsx +++ b/components/calender/DatePicker.tsx @@ -24,9 +24,8 @@ import { Field, FieldProps } from "formik"; -import { format } from "date-fns"; import FormValidateEmoji from "./FormValidateEmoji"; -import { NewCalenderContext } from "../../contexts/NewCalenderContext"; +import { CalenderContext } from "../../contexts/CalenderContext"; interface UpdateCalendarProps { year: number; @@ -35,7 +34,7 @@ interface UpdateCalendarProps { } const DatePicker = (): JSX.Element => { - const { title } = useContext(NewCalenderContext); + const { title } = useContext(CalenderContext); const router = useRouter(); diff --git a/components/calender/index.tsx b/components/calender/index.tsx index 62913fc..f97437f 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import CalenderNav from "./CalenderNav"; -import { NewCalenderContext } from "../../contexts/NewCalenderContext"; +import { CalenderContext } from "../../contexts/CalenderContext"; import { getDate } from "date-fns"; // TODO: import types @@ -12,7 +12,7 @@ interface UpdateCalendarProps { } const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { - const { layout, updateDate } = useContext(NewCalenderContext); + const { layout, updateDate } = useContext(CalenderContext); useEffect(() => { if (newDate) { diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index fa14ab6..d0ebb69 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -1,8 +1,19 @@ -import React, { createContext, useState, ReactNode, useEffect } from "react"; -import { endOfMonth, getDate, sub, compareAsc } from "date-fns"; +import React, { createContext, useState, ReactNode } from "react"; +import { + format, + startOfMonth, + endOfMonth, + getDate, + add, + sub, + set, + isAfter, + isBefore, + compareAsc +} from "date-fns"; // TODO: import types -type days = +type Days = | "Sunday" | "Monday" | "Tuesday" @@ -10,11 +21,46 @@ type days = | "Thursday" | "Friday" | "Saturday"; -interface DaysOfWeek { - startOfWeek: { - Sunday: days[]; - Monday: days[]; + +type DaysOfWeek = Days[]; + +interface WeekDays { + sunday: DaysOfWeek; + monday: DaysOfWeek; +} + +interface MonthDay { + isOverflow: boolean; + date: Date; +} + +interface Month { + week1: MonthDay[]; + week2: MonthDay[]; + week3: MonthDay[]; + week4: MonthDay[]; + week5: MonthDay[]; + week6: MonthDay[]; +} + +interface MonthInfo { + date: Date; + title: string; +} + +interface MonthLayout { + sunday: { + weekdays: DaysOfWeek; + month: Month; }; + monday: { + weekdays: DaysOfWeek; + month: Month; + }; +} + +interface MonthContext extends MonthInfo { + layout: MonthLayout; } interface UpdateCalendarProps { @@ -23,46 +69,11 @@ interface UpdateCalendarProps { day: number; } -interface Month { - week1: Date[]; - week2: Date[]; - week3: Date[]; - week4: Date[]; - week5: Date[]; - week6: Date[]; -} - -interface Calendar { - startOfWeek: { - Sunday: Month; - Monday: Month; - }; -} - -// Will replace all states and be used in redis as a form of memoization. -interface MonthInfo { - date: Date; - layout: Calendar; - startWeekday: string; - endWeekday: string; - days: number; -} - -interface CurrentMonth { - prev: MonthInfo; - curr: MonthInfo; - next: MonthInfo; -} - -interface CalenderMemoize { - String: CurrentMonth; -} - interface CalenderContextState { selectedDate: Date; - daysOfMonth: [number]; - daysOfWeek: DaysOfWeek; - setDate: (date: UpdateCalendarProps) => boolean; + title: string; + layout: MonthLayout; + updateDate: (input: UpdateCalendarProps) => void; } const CalenderContext = createContext({} as CalenderContextState); @@ -72,109 +83,176 @@ const CalenderContextProvider = ({ }: { children: ReactNode; }): JSX.Element => { - const indexToDay = { - startOfWeek: { - Sunday: { - 0: "Sunday", - 1: "Monday", - 2: "Tuesday", - 3: "Wednesday", - 4: "Thursday", - 5: "Friday", - 6: "Saturday" + const weekDays: WeekDays = { + sunday: [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday" + ], + monday: [ + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", + "Sunday" + ] + }; + + //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. + + /** + * Using date-fns, this function checks if currDate is within the month of selectedDate or not. + * @param {Date} selectedDate The current month. + * @param {Date} currDate The date to be compared to the selected month. + * @returns True if currDate is outside of the month of selectedDate, false if otherwise. + */ + const isOverflow = (selectedDate: Date, currDate: Date): boolean => { + let flag = false; + const start = startOfMonth(selectedDate); + const end = endOfMonth(selectedDate); + + if (isBefore(currDate, start) || isAfter(currDate, end)) { + flag = true; + } + + return flag; + }; + + /** + * A function that will return a month layout when given a date. It produces + * an object with 6 weeks that include overflow from the previous and next month + * with all dates aligned with the day of the week. + * @param selectedDate The date of the month to generate a month layout for. + */ + const populateMonth = (selectedDate: Date): MonthLayout => { + const endLastMonth = getDate(endOfMonth(sub(selectedDate, { months: 1 }))); + const startOfSelectedMonth = format(startOfMonth(selectedDate), "iii"); + + const ISOToIndex = { + sunday: { + Sun: 0, + Mon: 1, + Tue: 2, + Wed: 3, + Thu: 4, + Fri: 5, + Sat: 6 }, - Monday: { - 0: "Monday", - 1: "Tuesday", - 2: "Wednesday", - 3: "Thursday", - 4: "Friday", - 5: "Saturday", - 6: "Sunday" + monday: { + Mon: -1, + Tue: 0, + Wed: 1, + Thu: 2, + Fri: 3, + Sat: 4, + Sun: 5 } + }; + + const sundays = { + week1: new Array(7).fill(null), + week2: new Array(7).fill(null), + week3: new Array(7).fill(null), + week4: new Array(7).fill(null), + week5: new Array(7).fill(null), + week6: new Array(7).fill(null) + }; + + const sunStartDay = + endLastMonth - (ISOToIndex.sunday[startOfSelectedMonth] - 1); + + let sunCurrDate = set(sub(selectedDate, { months: 1 }), { + date: sunStartDay + }); + + for (const week in sundays) { + const thisWeek = sundays[week]; + + thisWeek.forEach((e, i) => { + const day: MonthDay = { + isOverflow: isOverflow(selectedDate, sunCurrDate), + date: sunCurrDate + }; + sunCurrDate = add(sunCurrDate, { + days: 1 + }); + + sundays[week][i] = day; + }); } + + const mondays = { + week1: new Array(7).fill(null), + week2: new Array(7).fill(null), + week3: new Array(7).fill(null), + week4: new Array(7).fill(null), + week5: new Array(7).fill(null), + week6: new Array(7).fill(null) + }; + + const monStartDay = endLastMonth - ISOToIndex.monday[startOfSelectedMonth]; + + let monCurrDate = set(sub(selectedDate, { months: 1 }), { + date: monStartDay + }); + + for (const week in mondays) { + const thisWeek = mondays[week]; + + thisWeek.forEach((e, i) => { + const day: MonthDay = { + isOverflow: isOverflow(selectedDate, monCurrDate), + date: monCurrDate + }; + monCurrDate = add(monCurrDate, { + days: 1 + }); + + mondays[week][i] = day; + }); + } + + const output = { + sunday: { + weekdays: weekDays.sunday, + month: sundays + }, + monday: { + weekdays: weekDays.monday, + month: mondays + } + }; + + return output; }; - // Selected month & year const [selectedDate, setSelectedDate] = useState(new Date()); - // Update this to have the day of week and the last numerical day. - const [endOfSelectedMonth, SetEndOfSelectedDMonth] = useState( - getDate(endOfMonth(selectedDate)) - ); - // Update this to have the day of week and the last numerical day. - const [endOfPrevMonth, setEndOfPrevMonth] = useState( - getDate(endOfMonth(sub(selectedDate, { months: 1 }))) - ); - // Add start of selected month and start of next month, including day of week and numerical day. + const [selectedDateInfo, setSelectedMonthInfo] = useState({ + date: selectedDate, + title: format(selectedDate, "LLLL uuuu"), + layout: populateMonth(selectedDate) + }); - // TODO: Remove this state and all referenced to it once the date alignment algorithm is complete. - const [daysOfMonth, setDaysOfMonth] = useState<[number]>([1]); + //TODO Update the MonthInfo to use the new month population function on first render. - // TODO: Repalce this with the new date alignment algorithm. - // Update or populate the days of the month. - const populateDays = (): void => { - let newDaysOfMonth: [number] = [...daysOfMonth]; + //TODO Add a function that will update the MonthInfo state when the selected month changes. This should use the populate month function that will be made above. + const updateDateInfo = (newDate: Date) => { + const output = { ...selectedDateInfo }; + output.date = newDate; + output.title = format(newDate, "LLLL uuuu"); + output.layout = populateMonth(newDate); - if (newDaysOfMonth.length > 1) { - newDaysOfMonth = [1]; - } - - for (let i = 1; i < endOfSelectedMonth; i++) { - newDaysOfMonth.push(i + 1); - } - - setDaysOfMonth(newDaysOfMonth); + setSelectedMonthInfo(output); }; - // TODO: Update new referenced once they are added. - // Update selected month sates when the selected month is updated. - - // Update days of month. - useEffect(() => { - if (daysOfMonth === null) { - populateDays(); - } else { - if (daysOfMonth[daysOfMonth.length - 1] !== endOfSelectedMonth) { - populateDays(); - } - } - }, [selectedDate, endOfSelectedMonth]); - - // Update end of month. - useEffect(() => { - if (endOfSelectedMonth !== getDate(endOfMonth(selectedDate))) { - SetEndOfSelectedDMonth(getDate(endOfMonth(selectedDate))); - } - }, [selectedDate]); - - // Calender Layout - const daysOfWeek: DaysOfWeek = { - startOfWeek: { - Sunday: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday" - ], - Monday: [ - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - "Sunday" - ] - } - }; - - //TODO: Create an object of arrays that will align with the days on the week. Make two sets for each start of the week setting. - - // Navigation - const setDate = (input: UpdateCalendarProps): boolean => { + //TODO: Add a new navigation function that will take in either a direction (next, prev) or a date to go directly to. That will update the selected month and trigger the use effects below. + const updateDate = (input: UpdateCalendarProps) => { const { year, month: inputMonth, day } = input; if (!year || !inputMonth || day < 0 || day > 31) { @@ -185,15 +263,16 @@ const CalenderContextProvider = ({ if (compareAsc(customDate, selectedDate) !== 0) { setSelectedDate(customDate); + updateDateInfo(customDate); } } }; const calenderContextValues = { selectedDate, - daysOfMonth, - daysOfWeek, - setDate + title: selectedDateInfo.title, + layout: selectedDateInfo.layout, + updateDate }; return ( diff --git a/contexts/NewCalenderContext.tsx b/contexts/NewCalenderContext.tsx deleted file mode 100644 index 98c0604..0000000 --- a/contexts/NewCalenderContext.tsx +++ /dev/null @@ -1,287 +0,0 @@ -import React, { createContext, useState, ReactNode } from "react"; -import { - format, - startOfMonth, - endOfMonth, - getDate, - getMonth, - getYear, - add, - sub, - set, - isAfter, - isBefore, - compareAsc -} from "date-fns"; -// TODO: import types - -type Days = - | "Sunday" - | "Monday" - | "Tuesday" - | "Wednesday" - | "Thursday" - | "Friday" - | "Saturday"; - -type DaysOfWeek = Days[]; - -interface WeekDays { - sunday: DaysOfWeek; - monday: DaysOfWeek; -} - -interface MonthDay { - isOverflow: boolean; - date: Date; -} - -interface Month { - week1: MonthDay[]; - week2: MonthDay[]; - week3: MonthDay[]; - week4: MonthDay[]; - week5: MonthDay[]; - week6: MonthDay[]; -} - -interface MonthInfo { - date: Date; - title: string; -} - -interface MonthLayout { - sunday: { - weekdays: DaysOfWeek; - month: Month; - }; - monday: { - weekdays: DaysOfWeek; - month: Month; - }; -} - -interface MonthContext extends MonthInfo { - layout: MonthLayout; -} - -interface UpdateCalendarProps { - year: number; - month: number; - day: number; -} - -interface CalenderContextState { - selectedDate: Date; - title: string; - layout: MonthLayout; - updateDate: (input: UpdateCalendarProps) => void; -} - -const NewCalenderContext = createContext({} as CalenderContextState); - -const NewCalenderContextProvider = ({ - children -}: { - children: ReactNode; -}): JSX.Element => { - const weekDays: WeekDays = { - sunday: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday" - ], - monday: [ - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - "Sunday" - ] - }; - - //TODO Add a function that will populate the "MONTH" layout for the context. It should take in the start of the week (Sunday, Monday) and output the appropriate layout based on that preference. - - /** - * Using date-fns, this function checks if currDate is within the month of selectedDate or not. - * @param {Date} selectedDate The current month. - * @param {Date} currDate The date to be compared to the selected month. - * @returns True if currDate is outside of the month of selectedDate, false if otherwise. - */ - const isOverflow = (selectedDate: Date, currDate: Date): boolean => { - let flag = false; - const start = startOfMonth(selectedDate); - const end = endOfMonth(selectedDate); - - if (isBefore(currDate, start) || isAfter(currDate, end)) { - flag = true; - } - - return flag; - }; - - /** - * A function that will return a month layout when given a date. It produces - * an object with 6 weeks that include overflow from the previous and next month - * with all dates aligned with the day of the week. - * @param selectedDate The date of the month to generate a month layout for. - */ - const populateMonth = (selectedDate: Date): MonthLayout => { - const endLastMonth = getDate(endOfMonth(sub(selectedDate, { months: 1 }))); - const startOfSelectedMonth = format(startOfMonth(selectedDate), "iii"); - - const ISOToIndex = { - sunday: { - Sun: 0, - Mon: 1, - Tue: 2, - Wed: 3, - Thu: 4, - Fri: 5, - Sat: 6 - }, - monday: { - Mon: -1, - Tue: 0, - Wed: 1, - Thu: 2, - Fri: 3, - Sat: 4, - Sun: 5 - } - }; - - const sundays = { - week1: new Array(7).fill(null), - week2: new Array(7).fill(null), - week3: new Array(7).fill(null), - week4: new Array(7).fill(null), - week5: new Array(7).fill(null), - week6: new Array(7).fill(null) - }; - - const sunStartDay = - endLastMonth - (ISOToIndex.sunday[startOfSelectedMonth] - 1); - - let sunCurrDate = set(sub(selectedDate, { months: 1 }), { - date: sunStartDay - }); - - for (const week in sundays) { - const thisWeek = sundays[week]; - - thisWeek.forEach((e, i) => { - const day: MonthDay = { - isOverflow: isOverflow(selectedDate, sunCurrDate), - date: sunCurrDate - }; - sunCurrDate = add(sunCurrDate, { - days: 1 - }); - - sundays[week][i] = day; - }); - } - - const mondays = { - week1: new Array(7).fill(null), - week2: new Array(7).fill(null), - week3: new Array(7).fill(null), - week4: new Array(7).fill(null), - week5: new Array(7).fill(null), - week6: new Array(7).fill(null) - }; - - const monStartDay = endLastMonth - ISOToIndex.monday[startOfSelectedMonth]; - - let monCurrDate = set(sub(selectedDate, { months: 1 }), { - date: monStartDay - }); - - for (const week in mondays) { - const thisWeek = mondays[week]; - - thisWeek.forEach((e, i) => { - const day: MonthDay = { - isOverflow: isOverflow(selectedDate, monCurrDate), - date: monCurrDate - }; - monCurrDate = add(monCurrDate, { - days: 1 - }); - - mondays[week][i] = day; - }); - } - - const output = { - sunday: { - weekdays: weekDays.sunday, - month: sundays - }, - monday: { - weekdays: weekDays.monday, - month: mondays - } - }; - - return output; - }; - - const [selectedDate, setSelectedDate] = useState(new Date()); - const [selectedDateInfo, setSelectedMonthInfo] = useState({ - date: selectedDate, - title: format(selectedDate, "LLLL uuuu"), - layout: populateMonth(selectedDate) - }); - - //TODO Update the MonthInfo to use the new month population function on first render. - - //TODO Add a function that will update the MonthInfo state when the selected month changes. This should use the populate month function that will be made above. - const updateDateInfo = (newDate: Date) => { - const output = { ...selectedDateInfo }; - output.date = newDate; - output.title = format(newDate, "LLLL uuuu"); - output.layout = populateMonth(newDate); - - setSelectedMonthInfo(output); - }; - - //TODO: Add a new navigation function that will take in either a direction (next, prev) or a date to go directly to. That will update the selected month and trigger the use effects below. - const updateDate = (input: UpdateCalendarProps) => { - const { year, month: inputMonth, day } = input; - - if (!year || !inputMonth || day < 0 || day > 31) { - return false; - } else { - const month = inputMonth - 1; - const customDate: Date = new Date(year, month, day); - - if (compareAsc(customDate, selectedDate) !== 0) { - setSelectedDate(customDate); - updateDateInfo(customDate); - } - } - }; - - const calenderContextValues = { - selectedDate, - title: selectedDateInfo.title, - layout: selectedDateInfo.layout, - updateDate - }; - - return ( - - {children} - - ); -}; - -export { NewCalenderContextProvider, NewCalenderContext }; diff --git a/pages/calendar/[...date].tsx b/pages/calendar/[...date].tsx index 1ed49ba..83f8d88 100644 --- a/pages/calendar/[...date].tsx +++ b/pages/calendar/[...date].tsx @@ -4,7 +4,6 @@ import { useRouter } from "next/router"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; import { CalenderContextProvider } from "../../contexts/CalenderContext"; -import { NewCalenderContextProvider } from "../../contexts/NewCalenderContext"; interface UpdateCalendarProps { year: number; @@ -72,9 +71,7 @@ const DateRoute: React.FC = () => { return ( - - - + ); diff --git a/pages/index.tsx b/pages/index.tsx index 1872276..a2dc51f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,7 +3,6 @@ import { Box } from "@chakra-ui/react"; import Calender from "../components/calender"; import { CalenderContextProvider } from "../contexts/CalenderContext"; import { format } from "date-fns"; -import { NewCalenderContextProvider } from "../contexts/NewCalenderContext"; interface UpdateCalendarProps { year: number; @@ -20,9 +19,7 @@ const IndexPage = (): JSX.Element => { return ( - - - + ); From d42ecd676ef581a8de02272ed414614455c1e4e5 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 17:12:36 -0600 Subject: [PATCH 23/28] Adding documentation to functions. --- contexts/CalenderContext.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index d0ebb69..fad5b96 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -242,6 +242,10 @@ const CalenderContextProvider = ({ //TODO Update the MonthInfo to use the new month population function on first render. //TODO Add a function that will update the MonthInfo state when the selected month changes. This should use the populate month function that will be made above. + /** + * Updates the selectedDateInfo state when given a date. + * @param {Date} newDate The date to set the selectedDateInfo state to. + */ const updateDateInfo = (newDate: Date) => { const output = { ...selectedDateInfo }; output.date = newDate; @@ -252,6 +256,11 @@ const CalenderContextProvider = ({ }; //TODO: Add a new navigation function that will take in either a direction (next, prev) or a date to go directly to. That will update the selected month and trigger the use effects below. + /** + * Updated the selectedDate state when given the appropriate object. + * @param {UpdateCalendarProps} input An object with year, month, + * and day keys that the selectedDate state will be updated to. + */ const updateDate = (input: UpdateCalendarProps) => { const { year, month: inputMonth, day } = input; From 12a1b3a54c78654832628f8c5fcabb0007160293 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 17:41:23 -0600 Subject: [PATCH 24/28] Fixed calender Y overflow. --- components/calender/index.tsx | 13 +++++++++++-- pages/index.tsx | 3 ++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/components/calender/index.tsx b/components/calender/index.tsx index f97437f..7189867 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import CalenderNav from "./CalenderNav"; import { CalenderContext } from "../../contexts/CalenderContext"; @@ -35,8 +35,17 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { const currMonth = layout[`${userSettings.startOfWeek.toLowerCase()}`]; const { month, weekdays } = currMonth; + const [height, setHeight] = useState("0px"); + + useEffect(() => { + if (window) { + const height = window.innerHeight - 60; + setHeight(`${height}px`); + } + }, []) + return ( - + { month: parseInt(format(new Date(), "M")), day: parseInt(format(new Date(), "d")) }); + return ( From 1ea9e7ef46a070bffd4557420a5dd3275b3caf5f Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 18:15:53 -0600 Subject: [PATCH 25/28] Clicking on overflow dates activated navigation forward or backwards 1 month. --- components/calender/index.tsx | 30 ++++++++++++++++++++++++++---- contexts/CalenderContext.tsx | 24 ++++++++++++++++++++---- pages/index.tsx | 2 +- 3 files changed, 47 insertions(+), 9 deletions(-) diff --git a/components/calender/index.tsx b/components/calender/index.tsx index 7189867..3178f34 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -2,7 +2,8 @@ import React, { useContext, useEffect, useState } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import CalenderNav from "./CalenderNav"; import { CalenderContext } from "../../contexts/CalenderContext"; -import { getDate } from "date-fns"; +import { getDate, sub, add, getYear, getMonth } from "date-fns"; +import { useRouter } from "next/router"; // TODO: import types interface UpdateCalendarProps { @@ -12,7 +13,8 @@ interface UpdateCalendarProps { } const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { - const { layout, updateDate } = useContext(CalenderContext); + const { selectedDate, layout, updateDate } = useContext(CalenderContext); + const router = useRouter(); useEffect(() => { if (newDate) { @@ -42,7 +44,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { const height = window.innerHeight - 60; setHeight(`${height}px`); } - }, []) + }, []); return ( @@ -89,7 +91,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { const thisWeek = month[week]; return thisWeek.map((day) => { - const { date, isOverflow } = day; + const { date, isOverflow, overflowDirection } = day; return ( { w="100%" h="100%" key={date} + {...(isOverflow && { + onClick: () => { + if (overflowDirection === "next") { + console.log(overflowDirection); + const newMonth = add(selectedDate, { months: 1 }); + + const year = getYear(newMonth); + const month = getMonth(newMonth) + 1; + + router.push(`/calendar/${year}/${month}`); + } else if (overflowDirection === "prev") { + const newMonth = sub(selectedDate, { months: 1 }); + + const year = getYear(newMonth); + const month = getMonth(newMonth) + 1; + + router.push(`/calendar/${year}/${month}`); + } + } + })} > {`Day ${getDate(date)}`} diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index fad5b96..7ec787d 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -31,6 +31,7 @@ interface WeekDays { interface MonthDay { isOverflow: boolean; + overflowDirection: "prev" | "next" | null; date: Date; } @@ -112,16 +113,30 @@ const CalenderContextProvider = ({ * @param {Date} currDate The date to be compared to the selected month. * @returns True if currDate is outside of the month of selectedDate, false if otherwise. */ - const isOverflow = (selectedDate: Date, currDate: Date): boolean => { + const isOverflow = ( + selectedDate: Date, + currDate: Date + ): { + isOverflow: boolean; + overflowDirection: "prev" | "next" | null; + } => { let flag = false; + let direction: "next" | "prev" | null = null; + const start = startOfMonth(selectedDate); const end = endOfMonth(selectedDate); - if (isBefore(currDate, start) || isAfter(currDate, end)) { + if (isBefore(currDate, start)) { flag = true; + direction = "prev"; } - return flag; + if (isAfter(currDate, end)) { + flag = true; + direction = "next"; + } + + return { isOverflow: flag, overflowDirection: direction }; }; /** @@ -175,8 +190,9 @@ const CalenderContextProvider = ({ const thisWeek = sundays[week]; thisWeek.forEach((e, i) => { + const overflowInfo = isOverflow(selectedDate, sunCurrDate); const day: MonthDay = { - isOverflow: isOverflow(selectedDate, sunCurrDate), + ...overflowInfo, date: sunCurrDate }; sunCurrDate = add(sunCurrDate, { diff --git a/pages/index.tsx b/pages/index.tsx index f06e223..7a59429 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, useState } from "react"; +import React, { useRef } from "react"; import { Box } from "@chakra-ui/react"; import Calender from "../components/calender"; import { CalenderContextProvider } from "../contexts/CalenderContext"; From 1c40d35cbef1c5bebc84b0c302e214b12a01f90a Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 18:22:09 -0600 Subject: [PATCH 26/28] Cursor hover for overflow dates. Fixed overflow info in context. --- components/calender/index.tsx | 5 +++++ contexts/CalenderContext.tsx | 5 ++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/components/calender/index.tsx b/components/calender/index.tsx index 3178f34..cb44b2d 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -101,6 +101,11 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { w="100%" h="100%" key={date} + {...(isOverflow && { + _hover: { + cursor: "pointer" + } + })} {...(isOverflow && { onClick: () => { if (overflowDirection === "next") { diff --git a/contexts/CalenderContext.tsx b/contexts/CalenderContext.tsx index 7ec787d..89b32ae 100644 --- a/contexts/CalenderContext.tsx +++ b/contexts/CalenderContext.tsx @@ -191,6 +191,7 @@ const CalenderContextProvider = ({ thisWeek.forEach((e, i) => { const overflowInfo = isOverflow(selectedDate, sunCurrDate); + const day: MonthDay = { ...overflowInfo, date: sunCurrDate @@ -222,8 +223,10 @@ const CalenderContextProvider = ({ const thisWeek = mondays[week]; thisWeek.forEach((e, i) => { + const overflowInfo = isOverflow(selectedDate, sunCurrDate); + const day: MonthDay = { - isOverflow: isOverflow(selectedDate, monCurrDate), + ...overflowInfo, date: monCurrDate }; monCurrDate = add(monCurrDate, { From 958affc5b697fa847bfc5284404efcf1a4670e50 Mon Sep 17 00:00:00 2001 From: Lucid Kobold Date: Wed, 29 Dec 2021 19:00:14 -0600 Subject: [PATCH 27/28] Fixed date height. --- components/calender/index.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/components/calender/index.tsx b/components/calender/index.tsx index cb44b2d..51d33b6 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -37,17 +37,8 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { const currMonth = layout[`${userSettings.startOfWeek.toLowerCase()}`]; const { month, weekdays } = currMonth; - const [height, setHeight] = useState("0px"); - - useEffect(() => { - if (window) { - const height = window.innerHeight - 60; - setHeight(`${height}px`); - } - }, []); - return ( - + Date: Wed, 29 Dec 2021 19:06:16 -0600 Subject: [PATCH 28/28] Removed unused imports --- 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 51d33b6..3ce2184 100644 --- a/components/calender/index.tsx +++ b/components/calender/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from "react"; +import React, { useContext, useEffect } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import CalenderNav from "./CalenderNav"; import { CalenderContext } from "../../contexts/CalenderContext";