From 099c71876bc0f3821b877d75ec04859aa50d8019 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Mon, 20 Jun 2022 18:27:37 -0500 Subject: [PATCH 01/32] Getting and setting completed tutorial cookie. Working on properly setting and updating a loading state. --- src/components/calender/CalenderNav.tsx | 14 ++++- src/components/calender/DatePicker.tsx | 29 +++++++--- src/components/calender/Day.tsx | 35 +++++++++--- src/components/calender/index.tsx | 5 +- src/components/tutorial/index.tsx | 22 ++++++++ src/pages/index.tsx | 72 ++++++++++++++++++++++--- 6 files changed, 152 insertions(+), 25 deletions(-) create mode 100644 src/components/tutorial/index.tsx diff --git a/src/components/calender/CalenderNav.tsx b/src/components/calender/CalenderNav.tsx index fa06d69..ed35b74 100644 --- a/src/components/calender/CalenderNav.tsx +++ b/src/components/calender/CalenderNav.tsx @@ -7,7 +7,17 @@ import findValidDateRange from "../../../lib/findValidDateRange"; import DatePicker from "./DatePicker"; import { useAppSelector } from "../../app/hooks"; -const CalenderNav = (): JSX.Element => { +interface CalenderNavProps { + isLoading: boolean; + title: string; +} + +/** + * @param {boolean} isLoading is the component loading? + * @param {string} title the title for the current date. + */ + +const CalenderNav = ({ title, isLoading }: CalenderNavProps): JSX.Element => { const selectedDate = useAppSelector( (state) => state.calender.selectedDateInfo ); @@ -46,7 +56,7 @@ const CalenderNav = (): JSX.Element => { icon={} onClick={() => handleNavButtons("prev")} /> - + { - const selectedDate = useAppSelector( - (state) => state.calender.selectedDateInfo - ); +interface DatePickerProps { + isLoading: boolean; + title: string; +} +/** + * @param {boolean} isLoading is the component loading? + * @param {string} title the title for the current date. + */ + +const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => { const router = useRouter(); const [valid, setValid] = useState(false); @@ -130,9 +137,17 @@ const DatePicker = (): JSX.Element => { diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx index ad5336d..0fba192 100644 --- a/src/components/calender/Day.tsx +++ b/src/components/calender/Day.tsx @@ -1,4 +1,4 @@ -import { Box, Text, VStack } from "@chakra-ui/react"; +import { Box, Skeleton, Text, VStack } from "@chakra-ui/react"; import { add, getYear, @@ -16,6 +16,7 @@ import { Provider } from "react-redux"; import { store } from "../../app/store"; interface DayProps { + isLoading: boolean; isOverflow?: boolean; overflowDirection?: "next" | "prev" | null; currSticker: StickerVal; @@ -27,6 +28,7 @@ interface DayProps { /** * The individual days in the calender component. + * @param {boolean} isLoading is the component loading? * @param {boolean} isOverflow is the current date being given before or after the current month. * @param {"next" | "prev" | null} overflowDirection the direction the overflow is. This will navigate the calender forward or backwards 1 month. * @param {StickerVal} currSticker the sticker for this date. @@ -36,6 +38,7 @@ interface DayProps { * @param {boolean} isToday is the current iteration of this component in today's date. */ const Day = ({ + isLoading, isOverflow, overflowDirection, currSticker, @@ -110,9 +113,17 @@ const Day = ({ {`${getDate(currDateObj)}`} - - - + {isLoading ? ( + + + + + + ) : ( + + + + )} )} {!isOverflow && ( @@ -152,11 +163,19 @@ const Day = ({ > {`${getDate(currDateObj)}`} - - - + {isLoading ? ( + + + + + + ) : ( + + + + )} - {isBefore(currDateObj, endOfDay(currDate)) && ( + {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && ( { const selectedDate: SelectedDateInfo = useAppSelector( (state) => state.calender.selectedDateInfo ); - const { layout } = selectedDate; + const { layout, title } = selectedDate; const currDateObj = new Date(currDate); @@ -64,7 +64,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { return ( - + { return ( void; +} + +const Tutorial = ({ setTutorialCookie }: TutorialProps): JSX.Element => { + const handleSetCookieButton = (): void => { + setTutorialCookie(true); + }; + return ( + + {"Tutorial Component"} + + + ); +}; + +export default Tutorial; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fa48616..7d34efe 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,21 +1,81 @@ -import React, { useRef } from "react"; +import React, { Fragment, useEffect, useRef, useState } from "react"; import { Box } from "@chakra-ui/react"; -import { format } from "date-fns"; +import { addMonths, format } from "date-fns"; +import Calender from "../components/calender"; +import Tutorial from "../components/tutorial"; +import LoadingOverlay from "../components/loading/LoadingOverlay"; import { Provider } from "react-redux"; import { store } from "../app/store"; -import Calender from "../components/calender"; const IndexPage = (): JSX.Element => { - const date = useRef({ + const calenderProps = useRef({ year: parseInt(format(new Date(), "y")), month: parseInt(format(new Date(), "M")), day: parseInt(format(new Date(), "d")) }); + const [completedTutorial, setCompletedTutorial] = useState( + null + ); + + const getTutorialCookie = (): boolean => { + let flag = false; + + const decodedCookie = decodeURIComponent(document.cookie); + const cookies = decodedCookie.split(";"); + + cookies.map((val) => { + const cookie = val.split("="); + + if (cookie.length > 1) { + const cName = cookie[0].toLowerCase(); + const cVal = JSON.parse(cookie[1]) || cookie[1]; + + if ( + cName === "tutorialCompleted".toLowerCase() && + cName && + cVal && + typeof cVal === "boolean" + ) { + flag = cVal; + } + } + }); + return flag; + }; + + const setTutorialCookie = (bool: boolean): void => { + const name = "tutorialCompleted"; + const exp = addMonths(new Date(), 1).toUTCString(); + + document.cookie = `${name}=${bool};expires=${exp}'path=/`; + setCompletedTutorial(bool); + }; + + useEffect(() => { + setCompletedTutorial(getTutorialCookie()); + }, [completedTutorial]); + return ( - + - + {completedTutorial === null ? ( + + + + + ) : completedTutorial ? ( + + ) : ( + + )} ); -- 2.49.1 From 181c3998991897c0bb2cd12b4bccfd3ec92cd5df Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Mon, 20 Jun 2022 19:24:25 -0500 Subject: [PATCH 02/32] Loading state dusccefully added. --- src/components/calender/DatePicker.tsx | 5 ++- src/components/calender/index.tsx | 9 +++-- src/features/calender/calender.ts | 12 +++++-- src/pages/_app.tsx | 6 +++- src/pages/index.tsx | 47 ++++++++------------------ types/Calender.d.ts | 6 +++- 6 files changed, 43 insertions(+), 42 deletions(-) diff --git a/src/components/calender/DatePicker.tsx b/src/components/calender/DatePicker.tsx index c464d88..0caa452 100644 --- a/src/components/calender/DatePicker.tsx +++ b/src/components/calender/DatePicker.tsx @@ -28,7 +28,6 @@ import { import { format } from "date-fns"; import findValidDateRange from "../../../lib/findValidDateRange"; import FormValidateEmoji from "./FormValidateEmoji"; -import { useAppSelector } from "../../app/hooks"; interface DatePickerProps { isLoading: boolean; @@ -58,7 +57,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => { dateError = "Please select a date."; setValid(false); } else if (dateArr.length === 3) { - const date: UpdateCalendarProps = { + const date: UpdateCalenderPropsDateLayout = { year: parseInt(dateArr[0]), month: parseInt(dateArr[1]), day: parseInt(dateArr[2]) @@ -98,7 +97,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => { if (formInput.date) { if (!validateDate(formInput.date)) { const dateArr = formInput.date.split("-"); - const date: UpdateCalendarProps = { + const date: UpdateCalenderPropsDateLayout = { year: parseInt(dateArr[0]), month: parseInt(dateArr[1]), day: parseInt(dateArr[2]) diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 7ee04d9..6ee7457 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -6,7 +6,10 @@ import { updateCurrDate, updateMonth } from "../../features/calender/calender"; import CalenderNav from "./CalenderNav"; import Day from "./Day"; -const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { +const Calender = ({ + date: newDate, + isLoading +}: UpdateCalendarProps): JSX.Element => { // * Month * // const currDate: string = useAppSelector((state) => state.calender.currDate); const selectedDate: SelectedDateInfo = useAppSelector( @@ -64,7 +67,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => { return ( - + { return ( new Date(); @@ -17,7 +18,8 @@ const initialState: CalenderSlice = { date: dateParse(getCurrDate()), title: dateFormatter(getCurrDate()), layout: populate(getCurrDate()) - } + }, + isLoading: true }; // TODO: Add a function that validated if a month has at least one sticker in it. Use that within the nav function (when filter is enabled). @@ -50,9 +52,15 @@ const calenderSlice = createSlice({ // Update current date updateCurrDate(state: CalenderSlice) { state.currDate = dateParse(new Date()); + }, + // Update isLoading + updateLoading(state: CalenderSlice, action: PayloadAction) { + const { payload } = action; + state.isLoading = payload; } } }); -export const { updateMonth, updateCurrDate } = calenderSlice.actions; +export const { updateMonth, updateCurrDate, updateLoading } = + calenderSlice.actions; export default calenderSlice.reducer; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 1a0bec9..92bb830 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -4,6 +4,8 @@ import { ChakraProvider } from "@chakra-ui/react"; import AppTheme from "../theme/AppTheme"; import Layout from "../theme/layout/Layout"; import Head from "next/head"; +import { Provider } from "react-redux"; +import { store } from "../app/store"; function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element { return ( @@ -17,7 +19,9 @@ function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element { content="width=device-width, user-scalable=yes, initial-scale=1.0" /> - + + + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7d34efe..70f6319 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,9 +6,14 @@ import Tutorial from "../components/tutorial"; import LoadingOverlay from "../components/loading/LoadingOverlay"; import { Provider } from "react-redux"; import { store } from "../app/store"; +import { useAppDispatch, useAppSelector } from "../app/hooks"; +import { updateLoading } from "../features/calender/calender"; const IndexPage = (): JSX.Element => { - const calenderProps = useRef({ + const isLoading = useAppSelector((state) => state.calender.isLoading); + const dispatch = useAppDispatch(); + + const currDate = useRef({ year: parseInt(format(new Date(), "y")), month: parseInt(format(new Date(), "M")), day: parseInt(format(new Date(), "d")) @@ -19,42 +24,20 @@ const IndexPage = (): JSX.Element => { ); const getTutorialCookie = (): boolean => { - let flag = false; - - const decodedCookie = decodeURIComponent(document.cookie); - const cookies = decodedCookie.split(";"); - - cookies.map((val) => { - const cookie = val.split("="); - - if (cookie.length > 1) { - const cName = cookie[0].toLowerCase(); - const cVal = JSON.parse(cookie[1]) || cookie[1]; - - if ( - cName === "tutorialCompleted".toLowerCase() && - cName && - cVal && - typeof cVal === "boolean" - ) { - flag = cVal; - } - } - }); - return flag; + return JSON.parse(localStorage.getItem("tutorialCompleted")) || false; }; const setTutorialCookie = (bool: boolean): void => { - const name = "tutorialCompleted"; - const exp = addMonths(new Date(), 1).toUTCString(); - - document.cookie = `${name}=${bool};expires=${exp}'path=/`; - setCompletedTutorial(bool); + localStorage.setItem("tutorialCompleted", `${bool}`); + setCompletedTutorial(true); }; useEffect(() => { + if (completedTutorial !== null) { + dispatch(updateLoading(false)); + } setCompletedTutorial(getTutorialCookie()); - }, [completedTutorial]); + }, [completedTutorial, dispatch]); return ( { {completedTutorial === null ? ( - + ) : completedTutorial ? ( - + ) : ( )} diff --git a/types/Calender.d.ts b/types/Calender.d.ts index b5e598b..479fb63 100644 --- a/types/Calender.d.ts +++ b/types/Calender.d.ts @@ -39,11 +39,15 @@ interface MonthLayout { monday: WeekLayout; } -interface UpdateCalendarProps { +interface UpdateCalenderPropsDateLayout { year: number; month: number; day: number; } +interface UpdateCalendarProps { + date: UpdateCalenderPropsDateLayout; + isLoading: boolean; +} interface SelectedDateInfo { date: string; -- 2.49.1 From 9506e5b43c29125e3f243f6a85674b5ce52c3c03 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Tue, 21 Jun 2022 16:16:17 -0500 Subject: [PATCH 03/32] Moved completed tutorial states to session and local storage. --- package.json | 2 +- src/app/store.ts | 6 +- src/components/calender/index.tsx | 6 +- src/components/tutorial/index.tsx | 39 +++++-- .../calender/{calender.ts => index.ts} | 0 src/features/tutorial/index.ts | 109 ++++++++++++++++++ src/pages/calendar/[...date].tsx | 8 +- src/pages/index.tsx | 45 +++++--- src/theme/layout/Header.tsx | 2 +- 9 files changed, 182 insertions(+), 35 deletions(-) rename src/features/calender/{calender.ts => index.ts} (100%) create mode 100644 src/features/tutorial/index.ts diff --git a/package.json b/package.json index 6671530..c3dc022 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.11-alpha", + "version": "0.0.11", "author": { "name": "Lucid Creations Media", "url": "https://lucidcreations.media", diff --git a/src/app/store.ts b/src/app/store.ts index db29048..0710a07 100644 --- a/src/app/store.ts +++ b/src/app/store.ts @@ -1,11 +1,13 @@ import { configureStore } from "@reduxjs/toolkit"; -import calenderReducer from "../features/calender/calender"; +import calenderReducer from "../features/calender"; import stickersReducer from "../features/calender/stickers"; +import tutorialReducer from "../features/tutorial"; export const store = configureStore({ reducer: { calender: calenderReducer, - stickers: stickersReducer + stickers: stickersReducer, + tutorial: tutorialReducer } }); diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 6ee7457..e6d697b 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import { isSameDay, format } from "date-fns"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; -import { updateCurrDate, updateMonth } from "../../features/calender/calender"; +import { updateCurrDate, updateMonth } from "../../features/calender"; import CalenderNav from "./CalenderNav"; import Day from "./Day"; @@ -43,12 +43,12 @@ const Calender = ({ }, [dispatch, newDate]); useEffect(() => { - console.info("Check to update date."); + // console.info("Check to update date."); const currDateObj = new Date(currDate); if (!isSameDay(currDateObj, new Date())) { - console.info("Updated date."); + // console.info("Updated date."); dispatch(updateCurrDate()); } }, [currDate, dispatch]); diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index 9f538fd..67090c8 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -1,20 +1,39 @@ -import { Box, Button, Heading } from "@chakra-ui/react"; +import { Box, Button, Heading, HStack, VStack } from "@chakra-ui/react"; import React from "react"; interface TutorialProps { - setTutorialCookie: (bool: boolean) => void; + setTutorialComplete: () => void; + setTempTutorialComplete: () => void; } -const Tutorial = ({ setTutorialCookie }: TutorialProps): JSX.Element => { - const handleSetCookieButton = (): void => { - setTutorialCookie(true); - }; +const Tutorial = ({ + setTutorialComplete, + setTempTutorialComplete +}: TutorialProps): JSX.Element => { return ( - {"Tutorial Component"} - + + {"Tutorial Component"} + + + + + ); }; diff --git a/src/features/calender/calender.ts b/src/features/calender/index.ts similarity index 100% rename from src/features/calender/calender.ts rename to src/features/calender/index.ts diff --git a/src/features/tutorial/index.ts b/src/features/tutorial/index.ts new file mode 100644 index 0000000..08b68b7 --- /dev/null +++ b/src/features/tutorial/index.ts @@ -0,0 +1,109 @@ +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; +import { addMonths } from "date-fns"; + +interface StorageState { + exp: string; + version: string; + completed: boolean; +} + +// * Storage Helpers * // + +const setTempStorage = (storageState: StorageState): void => { + sessionStorage.setItem("completedTutorial", JSON.stringify(storageState)); +}; + +const getTempStorage = (): StorageState | null => { + return JSON.parse(sessionStorage.getItem("completedTutorial")); +}; + +const clearTempStorage = (): void => { + sessionStorage.removeItem("completedTutorial"); +}; + +const setStorage = (storageState: StorageState): void => { + localStorage.setItem("completedTutorial", JSON.stringify(storageState)); +}; + +const getStorage = (): StorageState | null => { + return JSON.parse(localStorage.getItem("completedTutorial")); +}; + +const clearStorage = (): void => { + localStorage.removeItem("completedTutorial"); +}; + +interface TutorialSlice { + completedTutorial: boolean | null; + storageState: StorageState | null; +} + +const initialState: TutorialSlice = { + completedTutorial: null, + storageState: null +}; + +const tutorialSlice = createSlice({ + name: "Tutorial", + initialState, + reducers: { + // Set temp complete + setTempTutorialComplete(state: TutorialSlice) { + const exp: string = addMonths(new Date(), 1).toJSON(); + const version: string = process.env.NEXT_PUBLIC_APP_VERSION.split("-")[0]; + const storageState: StorageState = { + exp, + version, + completed: true + }; + + setTempStorage(storageState); + state.storageState = storageState; + state.completedTutorial = true; + }, + // Set completed (remember) + setTutorialCompleted(state: TutorialSlice) { + const exp: string = addMonths(new Date(), 1).toJSON(); + const version: string = process.env.NEXT_PUBLIC_APP_VERSION.split("-")[0]; + const storageState: StorageState = { + exp, + version, + completed: true + }; + + setStorage(storageState); + state.storageState = storageState; + state.completedTutorial = true; + }, + // Clear states and storages + clearTutorialCompleted(state: TutorialSlice) { + clearTempStorage(); + clearStorage(); + state.storageState = null; + state.completedTutorial = null; + }, + // Get and set states + getAndSetTutorial(state: TutorialSlice) { + console.log("get and set tutorial states"); + const temp = getTempStorage(); + const local = getStorage(); + + if (temp !== null || local !== null) { + state.storageState = temp !== null ? temp : local; + state.completedTutorial = temp !== null ? temp.completed : local.completed; + } + + if (temp === null && local === null) { + state.completedTutorial = false; + } + } + } +}); + +export const { + setTempTutorialComplete, + setTutorialCompleted, + clearTutorialCompleted, + getAndSetTutorial +} = tutorialSlice.actions; +export default tutorialSlice.reducer; diff --git a/src/pages/calendar/[...date].tsx b/src/pages/calendar/[...date].tsx index 7f99984..0f519e9 100644 --- a/src/pages/calendar/[...date].tsx +++ b/src/pages/calendar/[...date].tsx @@ -20,14 +20,16 @@ const DateRoute: React.FC = () => { const router = useRouter(); const { date: slug } = router.query; - const [date, setDate] = useState(null); + const [date, setDate] = useState(null); const [error, setError] = useState(false); // const dateRange = useRef(findValidDateRange()); // const validDateRange = Object.assign({}, dateRange.current); - const validateDateInput = (dateArr: number[]): UpdateCalendarProps => { + const validateDateInput = ( + dateArr: number[] + ): UpdateCalenderPropsDateLayout => { if (!(dateArr.length >= 2) && !(dateArr.length <= 3)) { return { year: 0, @@ -198,7 +200,7 @@ const DateRoute: React.FC = () => { ) : ( - + ); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 70f6319..37ec320 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,16 +1,27 @@ import React, { Fragment, useEffect, useRef, useState } from "react"; import { Box } from "@chakra-ui/react"; -import { addMonths, format } from "date-fns"; +import { format } from "date-fns"; import Calender from "../components/calender"; import Tutorial from "../components/tutorial"; import LoadingOverlay from "../components/loading/LoadingOverlay"; import { Provider } from "react-redux"; import { store } from "../app/store"; import { useAppDispatch, useAppSelector } from "../app/hooks"; -import { updateLoading } from "../features/calender/calender"; +import { updateLoading } from "../features/calender"; +import { + getAndSetTutorial, + setTempTutorialComplete, + setTutorialCompleted +} from "../features/tutorial"; const IndexPage = (): JSX.Element => { const isLoading = useAppSelector((state) => state.calender.isLoading); + const completedTutorial = useAppSelector( + (state) => state.tutorial.completedTutorial + ); + const tutorialCompletionInfo = useAppSelector( + (state) => state.tutorial.storageState + ); const dispatch = useAppDispatch(); const currDate = useRef({ @@ -19,25 +30,26 @@ const IndexPage = (): JSX.Element => { day: parseInt(format(new Date(), "d")) }); - const [completedTutorial, setCompletedTutorial] = useState( - null - ); - - const getTutorialCookie = (): boolean => { - return JSON.parse(localStorage.getItem("tutorialCompleted")) || false; + const handleTempTutorialCompleted = (): void => { + dispatch(setTempTutorialComplete()); }; - const setTutorialCookie = (bool: boolean): void => { - localStorage.setItem("tutorialCompleted", `${bool}`); - setCompletedTutorial(true); + const handleTutorialCompleted = (): void => { + dispatch(setTutorialCompleted()); }; useEffect(() => { + if (completedTutorial === null || tutorialCompletionInfo === null) { + dispatch(getAndSetTutorial()); + dispatch(updateLoading(false)); + } + if (completedTutorial !== null) { dispatch(updateLoading(false)); } - setCompletedTutorial(getTutorialCookie()); - }, [completedTutorial, dispatch]); + + console.info("use effect", completedTutorial, tutorialCompletionInfo); + }, [completedTutorial, dispatch, tutorialCompletionInfo]); return ( { minWidth="min-content" > - {completedTutorial === null ? ( + {isLoading === true ? ( @@ -57,7 +69,10 @@ const IndexPage = (): JSX.Element => { ) : completedTutorial ? ( ) : ( - + )} diff --git a/src/theme/layout/Header.tsx b/src/theme/layout/Header.tsx index 28bf10d..3165975 100644 --- a/src/theme/layout/Header.tsx +++ b/src/theme/layout/Header.tsx @@ -15,7 +15,7 @@ import appLogo from "../../../public/images/logo.svg"; const Header = (): JSX.Element => { const appName = "LCM Potty Chart"; - const appVersion = "v0.0.11-alpha"; + const appVersion = process.env.NEXT_PUBLIC_APP_VERSION || ""; // Add transparency while not at the top of the page. const [transparentNavbar, setTransparentNavbar] = useState(false); -- 2.49.1 From e708da6358d9451c6be243ede9ab918966011802 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Tue, 21 Jun 2022 16:17:38 -0500 Subject: [PATCH 04/32] Remove unneded imports. --- src/features/tutorial/index.ts | 3 ++- src/pages/index.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/features/tutorial/index.ts b/src/features/tutorial/index.ts index 08b68b7..d173b3f 100644 --- a/src/features/tutorial/index.ts +++ b/src/features/tutorial/index.ts @@ -90,7 +90,8 @@ const tutorialSlice = createSlice({ if (temp !== null || local !== null) { state.storageState = temp !== null ? temp : local; - state.completedTutorial = temp !== null ? temp.completed : local.completed; + state.completedTutorial = + temp !== null ? temp.completed : local.completed; } if (temp === null && local === null) { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 37ec320..2d85bbc 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,4 @@ -import React, { Fragment, useEffect, useRef, useState } from "react"; +import React, { Fragment, useEffect, useRef } from "react"; import { Box } from "@chakra-ui/react"; import { format } from "date-fns"; import Calender from "../components/calender"; -- 2.49.1 From 1d8144cbc44342a11e93d097d2e7d07c40097169 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Wed, 22 Jun 2022 10:45:49 -0500 Subject: [PATCH 05/32] Rennamed env variables. --- src/theme/layout/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/layout/Header.tsx b/src/theme/layout/Header.tsx index 3165975..db2d8d6 100644 --- a/src/theme/layout/Header.tsx +++ b/src/theme/layout/Header.tsx @@ -15,7 +15,7 @@ import appLogo from "../../../public/images/logo.svg"; const Header = (): JSX.Element => { const appName = "LCM Potty Chart"; - const appVersion = process.env.NEXT_PUBLIC_APP_VERSION || ""; + const appVersion = process.env.NEXT_PUBLIC_APP_VERSION_HEADER || ""; // Add transparency while not at the top of the page. const [transparentNavbar, setTransparentNavbar] = useState(false); -- 2.49.1 From dbd2140b5e3cb0dee56da62c941b1b894e7016f2 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Wed, 22 Jun 2022 13:03:10 -0500 Subject: [PATCH 06/32] Created calender examples that use the current week. --- src/components/calender/index.tsx | 7 +- src/components/tutorial/CalenderExample.tsx | 155 ++++++++++++++++++++ src/components/tutorial/index.tsx | 101 ++++++++++++- src/pages/index.tsx | 2 +- src/theme/components/buttonStyles.ts | 8 +- 5 files changed, 259 insertions(+), 14 deletions(-) create mode 100644 src/components/tutorial/CalenderExample.tsx diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index e6d697b..242c573 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -10,6 +10,9 @@ const Calender = ({ date: newDate, isLoading }: UpdateCalendarProps): JSX.Element => { + + const dispatch = useAppDispatch(); + // * Month * // const currDate: string = useAppSelector((state) => state.calender.currDate); const selectedDate: SelectedDateInfo = useAppSelector( @@ -25,8 +28,6 @@ const Calender = ({ (state) => state.stickers.stickersMonth ); - const dispatch = useAppDispatch(); - useEffect(() => { if (newDate && newDate.year && newDate.month && newDate.day) { const { year, month, day } = newDate; @@ -143,7 +144,7 @@ const Calender = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx new file mode 100644 index 0000000..4ef8f3c --- /dev/null +++ b/src/components/tutorial/CalenderExample.tsx @@ -0,0 +1,155 @@ +import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; +import { format, isSameDay, isToday } from "date-fns"; +import React, { useEffect, useState } from "react"; +import { useAppDispatch, useAppSelector } from "../../app/hooks"; +import { updateMonth } from "../../features/calender"; +import Day from "../calender/Day"; + +interface CalenderExampleProps { + type: "add" | "edit" +} + +const CalenderExample = ({ + type +}: CalenderExampleProps): JSX.Element => { + + const currDateObj: Date = new Date(); + const isLoading = false; + + const dispatch = useAppDispatch(); + + // * Current Month * // + const selectedDate: SelectedDateInfo = useAppSelector( + (state) => state.calender.selectedDateInfo + ); + const { layout } = selectedDate + + // * Stickers * // + + const stickersMonth: StickerDays = useAppSelector( + (state) => state.stickers.stickersMonth + ); + + // Simulated user settings. + const userSettings = { + theme: "default", + startOfWeek: "Sunday" + }; + + // * Week Names * // + const currMonth: WeekLayout = + layout[`${userSettings.startOfWeek.toLowerCase()}`]; + const { month, weekdays } = currMonth; + + useEffect(() => { + dispatch(updateMonth(new Date().toJSON())); + }, [dispatch]); + + // * The current week * // + + const getCurrentWeek = (): MonthDay[] => { + let foundWeek: MonthDay[] | null; + for (const week in month) { + const currWeek = month[week]; + + currWeek.forEach((day: MonthDay) => { + const { date } = day; + + if (isToday(new Date(date))) { + foundWeek = currWeek; + } + }); + } + + return foundWeek || [] as MonthDay[]; + } + + const [currWeek, setCurrWeek] = useState(getCurrentWeek()); + + console.info(currWeek); + + return ( + + + {weekdays.map((weekDay) => { + return ( + + + {weekDay} + + + {weekDay.substring(0, 3)} + + + {weekDay.substring(0, 2)} + + + ); + })} + + + {currWeek.map((day: MonthDay) => { + const { date, isOverflow, overflowDirection } = day; + + const toDateObj: Date = new Date(date); + + let sticker = null; + + let id = ""; + + stickersMonth.map((stickerDay) => { + const { date: stickerDate } = stickerDay; + + if (isSameDay(new Date(stickerDate), toDateObj)) { + sticker = stickerDay.sticker; + + id = stickerDay.id; + } + }); + + return ( + + ); + }) + } + + + ); +}; + +export default CalenderExample; diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index 67090c8..a3344b3 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -1,5 +1,6 @@ -import { Box, Button, Heading, HStack, VStack } from "@chakra-ui/react"; +import { Box, Button, Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react"; import React from "react"; +import CalenderExample from "./CalenderExample"; interface TutorialProps { setTutorialComplete: () => void; @@ -14,22 +15,110 @@ const Tutorial = ({ - {"Tutorial Component"} + + {/* The Heading Container */} + + {"Welcome to Code Name: LCM Potty Chart"} + + {"A Lucid Creations Media Project"} + + + + {/* About the app container */} + + + {"About the App"} + + + {"An app that mimics a potty/star chart for a potty training toddler or child."} + {"It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way."} + {"The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship."} + {"This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."} + + + + + + {/* Functionality of the app */} + + + {"Current Functionality"} + + + {"The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use."} + {"Ability to add a sticker to the current date."} + {"Ability to add edit a sticker from a previous date with a confirmation prompt."} + + + + {/* Calender Examples Here */} + {"Calender examples here"} + + + {/* Complete Tutorial buttons */} - - diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 2d85bbc..54e8310 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -57,7 +57,7 @@ const IndexPage = (): JSX.Element => { w="100%" h="auto" pt="50px" - pb="10vh" + // pb="10vh" minWidth="min-content" > diff --git a/src/theme/components/buttonStyles.ts b/src/theme/components/buttonStyles.ts index b0463c1..73d5244 100644 --- a/src/theme/components/buttonStyles.ts +++ b/src/theme/components/buttonStyles.ts @@ -15,7 +15,7 @@ const buttonStyles = { // styles for different visual variants ("outline", "solid") variants: { primary: (props: Dict | StyleFunctionProps) => ({ - bg: "rgba(255, 255, 255, .15)", + bg: "brand.primary", fontSize: "xl", p: "2", _hover: { @@ -26,13 +26,13 @@ const buttonStyles = { } }), secondary: (props: Dict | StyleFunctionProps) => ({ - bg: "brand.primary", + bg: "transparent", fontSize: "xl", p: "2", _hover: { bg: mode( - whiten("brand.primary", 20), - darken("brand.primary", 20) + whiten("brand.secondary", 20), + darken("brand.secondary", 20) )(props) } }), -- 2.49.1 From ba4823334e1a68b92724b33dc150aeb7e820b961 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Wed, 22 Jun 2022 13:05:55 -0500 Subject: [PATCH 07/32] added todos --- src/components/tutorial/CalenderExample.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 4ef8f3c..a6b0578 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -12,6 +12,11 @@ interface CalenderExampleProps { const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { + // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example. + + // TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used. + + // TODO: Disable the days that shouldn't have a function to prevent edits on add example and add to current date on the edit example. const currDateObj: Date = new Date(); const isLoading = false; -- 2.49.1 From 5ccb5abe9466f64c6324ea488df06770c6ba88b2 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Wed, 22 Jun 2022 14:35:49 -0500 Subject: [PATCH 08/32] Tutorial complete. Need to add more states and functions into redux. --- src/components/calender/DatePicker.tsx | 2 +- src/components/calender/Day.tsx | 248 ++++++++++++-------- src/components/calender/index.tsx | 6 +- src/components/tutorial/CalenderExample.tsx | 23 +- src/components/tutorial/index.tsx | 179 +++++++++++--- src/pages/index.tsx | 9 +- src/theme/components/buttonStyles.ts | 8 + 7 files changed, 323 insertions(+), 152 deletions(-) diff --git a/src/components/calender/DatePicker.tsx b/src/components/calender/DatePicker.tsx index 0caa452..e0efde5 100644 --- a/src/components/calender/DatePicker.tsx +++ b/src/components/calender/DatePicker.tsx @@ -189,7 +189,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => { > { const selectedDateObj = new Date(selectedDate); const currDateObj = new Date(date); + const isToday = isTodayFun(currDateObj); const handleNav = (direction: "next" | "prev") => { if (direction === "next") { @@ -87,95 +88,137 @@ const Day = ({ // TODO: When the valid date range is created, disallow pointer cursor outside of the date range. - return ( - - {isOverflow && ( - handleNav(overflowDirection)} - spacing="0.5rem" - alignContent="center" - justifyContent="flex-start" - pt={2} - > - - {`${getDate(currDateObj)}`} - - {isLoading ? ( - - - - - - ) : ( - - - - )} - + return isOverflow ? ( + handleNav(overflowDirection)} + spacing="0.5rem" + alignContent="center" + justifyContent="flex-start" + pt={2} + > + + {`${getDate(currDateObj)}`} + + {isLoading ? ( + + + + + + ) : ( + + + )} - {!isOverflow && ( - { - setStep(0); - setSelectedSticker(null); - setIsOpen(true); - }} - alignContent="center" - justifyContent="flex-start" - pt={2} - _hover={{ - cursor: isBefore(currDateObj, endOfDay(currDate)) - ? "pointer" - : "default", - background: "gray.700", - border: "1px solid #FFF" - }} - > - 10 - ? "0px 6px 3px 6px" - : "0px 9px 3px 9px" - : "auto" - } - h="auto" - w="auto" - border={isToday ? "1px solid #0068ff" : "0px"} - borderRadius={isToday ? "100px" : "0px"} - > - {`${getDate(currDateObj)}`} - - {isLoading ? ( - - - - - - ) : ( - - - + + ) : ( + { + setStep(0); + setSelectedSticker(null); + setIsOpen(true); + }} + alignContent="center" + justifyContent="flex-start" + pt={2} + _hover={{ + cursor: isBefore(currDateObj, endOfDay(currDate)) + ? "pointer" + : "default", + bg: tutorial + ? tutorial === "add" && isToday + ? "gray.600" + : tutorial === "edit" && + !isToday && + isBefore(currDateObj, endOfDay(currDate)) + ? "gray.600" + : "transparent" + : "transparent", + border: "1px solid #FFF" + }} + > + 10 + ? "0px 6px 3px 6px" + : "0px 9px 3px 9px" + : "auto" + } + h="auto" + w="auto" + border={isToday ? "1px solid #0068ff" : "0px"} + borderRadius={isToday ? "100px" : "0px"} + > + {`${getDate(currDateObj)}`} + + {isLoading ? ( + + + + + + ) : ( + + + + )} + {tutorial ? ( + + {tutorial.toLowerCase() === "add" && isToday && !isLoading && ( + )} - - {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && ( + {tutorial.toLowerCase() === "edit" && + !isToday && + isBefore(currDateObj, endOfDay(currDate)) && + !isLoading && ( )} - - + + ) : ( + + {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && ( + + )} + )} - + ); }; diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 242c573..dc0d660 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -10,7 +10,6 @@ const Calender = ({ date: newDate, isLoading }: UpdateCalendarProps): JSX.Element => { - const dispatch = useAppDispatch(); // * Month * // @@ -67,7 +66,7 @@ const Calender = ({ // TODO: Move the weekdays into it's own component for responsiveness. return ( - + ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index a6b0578..00f005f 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -6,12 +6,10 @@ import { updateMonth } from "../../features/calender"; import Day from "../calender/Day"; interface CalenderExampleProps { - type: "add" | "edit" + type: "add" | "edit"; } -const CalenderExample = ({ - type -}: CalenderExampleProps): JSX.Element => { +const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example. // TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used. @@ -27,7 +25,7 @@ const CalenderExample = ({ const selectedDate: SelectedDateInfo = useAppSelector( (state) => state.calender.selectedDateInfo ); - const { layout } = selectedDate + const { layout } = selectedDate; // * Stickers * // @@ -66,15 +64,15 @@ const CalenderExample = ({ }); } - return foundWeek || [] as MonthDay[]; - } + return foundWeek || ([] as MonthDay[]); + }; - const [currWeek, setCurrWeek] = useState(getCurrentWeek()); + const [currWeek /*, setCurrWeek*/] = useState(getCurrentWeek()); console.info(currWeek); return ( - + ); - }) - } + })} ); diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index a3344b3..2c38b9c 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -1,5 +1,14 @@ -import { Box, Button, Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react"; -import React from "react"; +import { + Box, + Button, + Checkbox, + Divider, + Heading, + HStack, + Text, + VStack +} from "@chakra-ui/react"; +import React, { useState } from "react"; import CalenderExample from "./CalenderExample"; interface TutorialProps { @@ -11,6 +20,26 @@ const Tutorial = ({ setTutorialComplete, setTempTutorialComplete }: TutorialProps): JSX.Element => { + const [rememberComplete, setRememberComplete] = useState(false); + + const handleComplete = (): void => { + if (rememberComplete) { + setTutorialComplete(); + } + + if (!rememberComplete) { + setTempTutorialComplete(); + } + }; + + const handleSkip = (): void => { + setTempTutorialComplete(); + }; + + const handleUpdateCheck = (): void => { + setRememberComplete(!rememberComplete); + }; + return ( {"A Lucid Creations Media Project"} - + {/* About the app container */} - {"An app that mimics a potty/star chart for a potty training toddler or child."} - {"It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way."} - {"The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship."} - {"This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."} - + + { + "An app that mimics a potty/star chart for a potty training toddler or child." + } + + + { + "It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way." + } + + + { + "The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship." + } + + + { + "This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely." + } + - + {/* Functionality of the app */} - + {"Current Functionality"} - {"The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use."} + + { + "The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use." + } + {"Ability to add a sticker to the current date."} - {"Ability to add edit a sticker from a previous date with a confirmation prompt."} + + { + "Ability to add edit a sticker from a previous date with a confirmation prompt." + } + - + - {/* Calender Examples Here */} - {"Calender examples here"} - - - {/* Complete Tutorial buttons */} + {/* Calender Demos */} + + + {"How to Use The Calender"} + + + + {"Add a Sticker to Today's Date"} + + + {"Select the date with a"} + {" green "} + {"border."} + + + + + + {"Add a Sticker to Previous Dates"} + + + {"Select a date with a"} + {" green "} + {"border."} + + + + + + {/* Complete tutorial */} - - + + handleUpdateCheck()} + > + {"Remember completed?"} + + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 54e8310..b8d1951 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -52,14 +52,7 @@ const IndexPage = (): JSX.Element => { }, [completedTutorial, dispatch, tutorialCompletionInfo]); return ( - + {isLoading === true ? ( diff --git a/src/theme/components/buttonStyles.ts b/src/theme/components/buttonStyles.ts index 73d5244..98c49be 100644 --- a/src/theme/components/buttonStyles.ts +++ b/src/theme/components/buttonStyles.ts @@ -36,6 +36,14 @@ const buttonStyles = { )(props) } }), + skip: (props: Dict | StyleFunctionProps) => ({ + bg: "transparent", + fontSize: "xl", + p: "2", + _hover: { + bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props) + } + }), stickerButton: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", fontSize: "4rem", -- 2.49.1 From 8e169b166f194b5861ba874d0d292aca874c1ac0 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Wed, 22 Jun 2022 14:40:06 -0500 Subject: [PATCH 09/32] Removing console logs. --- src/components/tutorial/CalenderExample.tsx | 2 -- src/features/tutorial/index.ts | 1 - 2 files changed, 3 deletions(-) diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 00f005f..806d2c3 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -69,8 +69,6 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { const [currWeek /*, setCurrWeek*/] = useState(getCurrentWeek()); - console.info(currWeek); - return ( Date: Wed, 22 Jun 2022 14:42:17 -0500 Subject: [PATCH 10/32] Remove unused imports --- src/features/tutorial/index.ts | 2 +- src/pages/index.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/features/tutorial/index.ts b/src/features/tutorial/index.ts index 4e7ee66..6784770 100644 --- a/src/features/tutorial/index.ts +++ b/src/features/tutorial/index.ts @@ -1,4 +1,4 @@ -import { createSlice, PayloadAction } from "@reduxjs/toolkit"; +import { createSlice/*, PayloadAction*/ } from "@reduxjs/toolkit"; import { addMonths } from "date-fns"; interface StorageState { diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b8d1951..911e53a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -47,8 +47,6 @@ const IndexPage = (): JSX.Element => { if (completedTutorial !== null) { dispatch(updateLoading(false)); } - - console.info("use effect", completedTutorial, tutorialCompletionInfo); }, [completedTutorial, dispatch, tutorialCompletionInfo]); return ( -- 2.49.1 From ac316918fee3f0341ebcff7bff3243c124a6e1d3 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Wed, 22 Jun 2022 14:46:50 -0500 Subject: [PATCH 11/32] Added todos --- src/components/tutorial/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index 2c38b9c..b0ed2ab 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -40,6 +40,14 @@ const Tutorial = ({ setRememberComplete(!rememberComplete); }; + // TODO: Add an expiration validator. + // TODO: Add a version validator that removed the completed tutorial storages when there were major changes to the tutorial. + // * The changes are tracked via env variables. The last version that user saw the tutorial is saved in storage. + + // TODO: Break up this component into reusable components that will generate headers and the content section. + // * Pass in if the component to be generated is the last component so the dividers can be conditionally rendered. + // * Pass in the type of component: text, calender, type of calender. + return ( Date: Wed, 22 Jun 2022 15:20:09 -0500 Subject: [PATCH 12/32] Responsive layout --- src/components/tutorial/CalenderExample.tsx | 6 +++--- src/components/tutorial/index.tsx | 9 +++++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 806d2c3..115ee88 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -72,7 +72,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { return ( { ); })} - + {currWeek.map((day: MonthDay) => { const { date, isOverflow, overflowDirection } = day; @@ -142,7 +142,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index b0ed2ab..bcfd32c 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -56,8 +56,9 @@ const Tutorial = ({ justifyContent="center" alignContent="center" my={8} - mx={4} - p={4} + mx={{ base: 0, sm: 2, md: 4 }} + py={4} + px={{ base: 0, sm: 2, md: 4 }} bg="gray.700" > { @@ -139,7 +140,7 @@ const Tutorial = ({ w="100%" justifyContent="start" alignContent="center" - spacing={2} + spacing={1} > { -- 2.49.1 From 103d9c3142672face973bbef4ee1fc6e59ecb1d4 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Wed, 22 Jun 2022 15:22:05 -0500 Subject: [PATCH 13/32] Responsive layour --- src/components/calender/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index dc0d660..d306faf 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -70,7 +70,7 @@ const Calender = ({ - + {Object.keys(month).map((week) => { const thisWeek = month[week]; @@ -142,7 +142,7 @@ const Calender = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); -- 2.49.1 From 92617f9b6d9263dcbc73c1017b327eda7bb259a1 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Wed, 22 Jun 2022 16:25:54 -0500 Subject: [PATCH 14/32] Added links. --- src/components/buttons/Custom.tsx | 26 ++++++++ src/components/buttons/Patreon.tsx | 27 ++++++++ src/components/buttons/Twitter.tsx | 27 ++++++++ src/components/calender/index.tsx | 10 ++- src/components/tutorial/CalenderExample.tsx | 10 ++- src/components/tutorial/index.tsx | 50 +++++++++++++- src/features/tutorial/index.ts | 2 +- src/theme/AppTheme.ts | 3 +- src/theme/components/buttonStyles.ts | 74 +++++++++------------ src/theme/layout/Footer.tsx | 42 ++++-------- 10 files changed, 190 insertions(+), 81 deletions(-) create mode 100644 src/components/buttons/Custom.tsx create mode 100644 src/components/buttons/Patreon.tsx create mode 100644 src/components/buttons/Twitter.tsx diff --git a/src/components/buttons/Custom.tsx b/src/components/buttons/Custom.tsx new file mode 100644 index 0000000..ce4d71e --- /dev/null +++ b/src/components/buttons/Custom.tsx @@ -0,0 +1,26 @@ +import React /*, { useEffect, useRef, useState }*/ from "react"; +import { Box, Link, Button, BoxProps } from "@chakra-ui/react"; +import { Icon } from "@iconify/react"; +import { motion } from "framer-motion"; + +interface CustomButtonProps { + text: string; + link: string; + type: "primary" | "secondary" | "footer"; +} + +const MotionBox = motion(Box); + +const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => { + return ( + + + + + + ); +}; + +export default CustomButton; diff --git a/src/components/buttons/Patreon.tsx b/src/components/buttons/Patreon.tsx new file mode 100644 index 0000000..a76fd67 --- /dev/null +++ b/src/components/buttons/Patreon.tsx @@ -0,0 +1,27 @@ +import React /*, { useEffect, useRef, useState }*/ from "react"; +import { Box, Link, Button, BoxProps } from "@chakra-ui/react"; +import { Icon } from "@iconify/react"; +import { motion } from "framer-motion"; + +const MotionBox = motion(Box); + +const Patreon = (): JSX.Element => { + return ( + + + + + + ); +}; + +export default Patreon; diff --git a/src/components/buttons/Twitter.tsx b/src/components/buttons/Twitter.tsx new file mode 100644 index 0000000..c8af77b --- /dev/null +++ b/src/components/buttons/Twitter.tsx @@ -0,0 +1,27 @@ +import React /*, { useEffect, useRef, useState }*/ from "react"; +import { Box, Link, Button, BoxProps } from "@chakra-ui/react"; +import { Icon } from "@iconify/react"; +import { motion } from "framer-motion"; + +const MotionBox = motion(Box); + +const Twitter = (): JSX.Element => { + return ( + + + + + + ); +}; + +export default Twitter; diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index d306faf..9287d25 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -106,7 +106,13 @@ const Calender = ({ ); })} - + {Object.keys(month).map((week) => { const thisWeek = month[week]; @@ -142,7 +148,7 @@ const Calender = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 115ee88..d131b42 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -108,7 +108,13 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { ); })} - + {currWeek.map((day: MonthDay) => { const { date, isOverflow, overflowDirection } = day; @@ -142,7 +148,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index bcfd32c..f7dd4ab 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -5,10 +5,14 @@ import { Divider, Heading, HStack, + Link, Text, VStack } from "@chakra-ui/react"; import React, { useState } from "react"; +import CustomButton from "../buttons/Custom"; +import Patreon from "../buttons/Patreon"; +import Twitter from "../buttons/Twitter"; import CalenderExample from "./CalenderExample"; interface TutorialProps { @@ -138,7 +142,8 @@ const Tutorial = ({ @@ -170,7 +175,8 @@ const Tutorial = ({ @@ -193,7 +199,8 @@ const Tutorial = ({ @@ -215,6 +222,43 @@ const Tutorial = ({ + {/* Links */} + + + {"More Info"} + + + + + + + + + {/* Complete tutorial */} | StyleFunctionProps) => ({ bg: "brand.primary", fontSize: "xl", - p: "2", + py: 3, + px: 4, + color: "whiteAlpha", _hover: { bg: mode( whiten("brand.primary", 20), @@ -26,9 +28,11 @@ const buttonStyles = { } }), secondary: (props: Dict | StyleFunctionProps) => ({ - bg: "transparent", + bg: "brand.secondary", fontSize: "xl", - p: "2", + py: 3, + px: 4, + color: "whiteAlpha", _hover: { bg: mode( whiten("brand.secondary", 20), @@ -39,9 +43,12 @@ const buttonStyles = { skip: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", fontSize: "xl", - p: "2", + py: 3, + px: 4, + color: "gray.400", _hover: { - bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props) + bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props), + color: "whiteAlpha.900" } }), stickerButton: (props: Dict | StyleFunctionProps) => ({ @@ -56,27 +63,10 @@ const buttonStyles = { )(props) } }), - project: (props: Dict | StyleFunctionProps) => ({ - bg: "transparent", - fontSize: "md", - py: 2, - px: 4, - boxShadow: - "rgba(0, 134, 255, 0.2) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px", - border: "1px solid rgba(0, 134, 255, 0.4)", - _hover: { - bg: mode( - whiten("brand.secondary", 20), - 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" - } - }), nav: (props: Dict | StyleFunctionProps) => ({ bg: "transparent", fontSize: "md", - px: "2", + px: 2, _hover: { bg: mode( whiten("brand.secondary", 20), @@ -87,15 +77,16 @@ const buttonStyles = { stickyNav: (/* props: Dict | StyleFunctionProps */) => ({ bg: "transparent", fontSize: "md", - px: "2", + px: 2, _hover: { textDecoration: "underline" } }), - credits: (props: Dict | StyleFunctionProps) => ({ + footer: (props: Dict | StyleFunctionProps) => ({ bg: "brand.main", fontSize: "lg", - p: 3, + py: 3, + px: 4, color: "whiteAlpha", _hover: { bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props) @@ -121,22 +112,6 @@ const buttonStyles = { border: "1px solid rgba(0, 134, 255, 1)" } }), - collapse: (props: Dict | StyleFunctionProps) => ({ - bg: "transparent", - fontSize: "md", - p: 2, - h: 8, - color: "brand.hover", - textDecoration: "underline", - _hover: { - bg: mode( - whiten("brand.secondary", 20), - darken("brand.secondary", 20) - )(props), - color: "whiteAlpha.900", - textDecoration: "none" - } - }), submit: (props: Dict | StyleFunctionProps) => ({ fontSize: "lg", py: 2, @@ -159,7 +134,7 @@ const buttonStyles = { mobileNav: (props: Dict | StyleFunctionProps) => ({ // bg: "transparent", fontSize: "md", - px: "2", + px: 2, boxShadow: "rgba(0, 134, 255, 0.30) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px", _hover: { @@ -188,6 +163,19 @@ const buttonStyles = { darken("brand.patreon", 20) )(props) } + }), + twitter: (props: Dict | StyleFunctionProps) => ({ + bg: "brand.twitter", + fontSize: "lg", + py: 3, + px: 4, + color: "whiteAlpha", + _hover: { + bg: mode( + whiten("brand.twitter", 20), + darken("brand.twitter", 20) + )(props) + } }) }, // default values for `size` and `variant` diff --git a/src/theme/layout/Footer.tsx b/src/theme/layout/Footer.tsx index a9d4620..a59d391 100644 --- a/src/theme/layout/Footer.tsx +++ b/src/theme/layout/Footer.tsx @@ -4,16 +4,17 @@ import { Text, VStack, Link, - HStack, // Image, Button, BoxProps } from "@chakra-ui/react"; -import { Icon } from "@iconify/react"; // import BackToTopButton from "./BackToTopButton"; import { motion } from "framer-motion"; +import Patreon from "../../components/buttons/Patreon"; +import CustomButton from "../../components/buttons/Custom"; +import Twitter from "../../components/buttons/Twitter"; -export const MotionBox = motion(Box); +const MotionBox = motion(Box); const Footer = (): JSX.Element => { // const [showBackToTop, setShowBackToTop] = useState(false); @@ -68,32 +69,15 @@ const Footer = (): JSX.Element => { */} - - - - - - - - - - + + + © {` 2021 - ${new Date().getFullYear()} `} -- 2.49.1 From f5eb0acddcb825fd53b0e3906835304323f3c015 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 23 Jun 2022 13:25:23 -0500 Subject: [PATCH 15/32] Fix imports. --- src/components/buttons/Custom.tsx | 3 +-- src/components/buttons/Patreon.tsx | 2 +- src/components/buttons/Twitter.tsx | 2 +- src/components/calender/CalenderNav.tsx | 2 +- src/components/calender/Day.tsx | 6 +++--- src/components/calender/index.tsx | 4 ++-- src/components/calender/modals/AddUpdateSticker.tsx | 6 +++--- src/components/loading/LoadingOverlay.tsx | 2 +- src/components/loading/LoadingSpinner.tsx | 2 +- src/components/tutorial/CalenderExample.tsx | 6 +++--- src/features/tutorial/index.ts | 13 +++++++++++-- src/pages/_app.tsx | 4 ++-- src/pages/_document.tsx | 2 +- src/pages/calendar/[...date].tsx | 4 ++-- src/pages/index.tsx | 10 +++++----- src/theme/layout/Layout.tsx | 1 - 16 files changed, 38 insertions(+), 31 deletions(-) diff --git a/src/components/buttons/Custom.tsx b/src/components/buttons/Custom.tsx index ce4d71e..93f377d 100644 --- a/src/components/buttons/Custom.tsx +++ b/src/components/buttons/Custom.tsx @@ -1,6 +1,5 @@ -import React /*, { useEffect, useRef, useState }*/ from "react"; +import React from "react"; import { Box, Link, Button, BoxProps } from "@chakra-ui/react"; -import { Icon } from "@iconify/react"; import { motion } from "framer-motion"; interface CustomButtonProps { diff --git a/src/components/buttons/Patreon.tsx b/src/components/buttons/Patreon.tsx index a76fd67..9dcec4e 100644 --- a/src/components/buttons/Patreon.tsx +++ b/src/components/buttons/Patreon.tsx @@ -1,4 +1,4 @@ -import React /*, { useEffect, useRef, useState }*/ from "react"; +import React from "react"; import { Box, Link, Button, BoxProps } from "@chakra-ui/react"; import { Icon } from "@iconify/react"; import { motion } from "framer-motion"; diff --git a/src/components/buttons/Twitter.tsx b/src/components/buttons/Twitter.tsx index c8af77b..32d5800 100644 --- a/src/components/buttons/Twitter.tsx +++ b/src/components/buttons/Twitter.tsx @@ -1,4 +1,4 @@ -import React /*, { useEffect, useRef, useState }*/ from "react"; +import React from "react"; import { Box, Link, Button, BoxProps } from "@chakra-ui/react"; import { Icon } from "@iconify/react"; import { motion } from "framer-motion"; diff --git a/src/components/calender/CalenderNav.tsx b/src/components/calender/CalenderNav.tsx index ed35b74..cc12213 100644 --- a/src/components/calender/CalenderNav.tsx +++ b/src/components/calender/CalenderNav.tsx @@ -1,11 +1,11 @@ import React from "react"; +import { useAppSelector } from "../../app/hooks"; import { useRouter } from "next/router"; import { HStack, IconButton } from "@chakra-ui/react"; import { Icon } from "@iconify/react"; import { format, isSameMonth, addMonths, subMonths } from "date-fns"; import findValidDateRange from "../../../lib/findValidDateRange"; import DatePicker from "./DatePicker"; -import { useAppSelector } from "../../app/hooks"; interface CalenderNavProps { isLoading: boolean; diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx index 0bc4ae0..4c9d624 100644 --- a/src/components/calender/Day.tsx +++ b/src/components/calender/Day.tsx @@ -1,3 +1,6 @@ +import React, { useState } from "react"; +import { Provider } from "react-redux"; +import { store } from "../../app/store"; import { Box, Skeleton, Text, VStack } from "@chakra-ui/react"; import { add, @@ -10,11 +13,8 @@ import { isToday as isTodayFun } from "date-fns"; import router from "next/router"; -import React, { useState } from "react"; import AddUpdateSticker from "./modals/AddUpdateSticker"; import DemoStickers from "./stickers/DemoStickers"; -import { Provider } from "react-redux"; -import { store } from "../../app/store"; interface DayProps { isLoading: boolean; diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 9287d25..3f1af6d 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -1,8 +1,8 @@ import React, { useEffect } from "react"; -import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; -import { isSameDay, format } from "date-fns"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import { updateCurrDate, updateMonth } from "../../features/calender"; +import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; +import { isSameDay, format } from "date-fns"; import CalenderNav from "./CalenderNav"; import Day from "./Day"; diff --git a/src/components/calender/modals/AddUpdateSticker.tsx b/src/components/calender/modals/AddUpdateSticker.tsx index c001741..2869576 100644 --- a/src/components/calender/modals/AddUpdateSticker.tsx +++ b/src/components/calender/modals/AddUpdateSticker.tsx @@ -1,3 +1,6 @@ +import React, { useState, useRef } from "react"; +import { useAppDispatch } from "../../../app/hooks"; +import { addEditSticker } from "../../../features/calender/stickers"; import { Button, Modal, @@ -13,13 +16,10 @@ import { SimpleGrid, Box } from "@chakra-ui/react"; -import React, { useState, useRef } from "react"; import { format, isSameDay } from "date-fns"; import { Icon } from "@iconify/react"; import StickerSelector from "./StickerSelector"; import DemoStickers from "../stickers/DemoStickers"; -import { useAppDispatch } from "../../../app/hooks"; -import { addEditSticker } from "../../../features/calender/stickers"; interface AddStickerProps { isOpen: boolean; diff --git a/src/components/loading/LoadingOverlay.tsx b/src/components/loading/LoadingOverlay.tsx index 2ff147d..563e8c1 100644 --- a/src/components/loading/LoadingOverlay.tsx +++ b/src/components/loading/LoadingOverlay.tsx @@ -1,3 +1,4 @@ +import React from "react"; import { Box, Modal, @@ -5,7 +6,6 @@ import { ModalContent, ModalOverlay } from "@chakra-ui/react"; -import React from "react"; import LoadingSpinner from "./LoadingSpinner"; const LoadingOverlay = (): JSX.Element => { diff --git a/src/components/loading/LoadingSpinner.tsx b/src/components/loading/LoadingSpinner.tsx index 8f11d4d..ef34925 100644 --- a/src/components/loading/LoadingSpinner.tsx +++ b/src/components/loading/LoadingSpinner.tsx @@ -1,5 +1,5 @@ -import { Spinner } from "@chakra-ui/react"; import React from "react"; +import { Spinner } from "@chakra-ui/react"; const LoadingSpinner = (): JSX.Element => { return ( diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index d131b42..b58e2e1 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -1,8 +1,8 @@ -import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; -import { format, isSameDay, isToday } from "date-fns"; import React, { useEffect, useState } from "react"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import { updateMonth } from "../../features/calender"; +import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; +import { format, isSameDay, isToday } from "date-fns"; import Day from "../calender/Day"; interface CalenderExampleProps { @@ -148,7 +148,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/features/tutorial/index.ts b/src/features/tutorial/index.ts index 4b6f019..d93be58 100644 --- a/src/features/tutorial/index.ts +++ b/src/features/tutorial/index.ts @@ -36,11 +36,13 @@ const clearStorage = (): void => { interface TutorialSlice { completedTutorial: boolean | null; storageState: StorageState | null; + rememberCompleted: boolean; } const initialState: TutorialSlice = { completedTutorial: null, - storageState: null + storageState: null, + rememberCompleted: false }; const tutorialSlice = createSlice({ @@ -96,6 +98,12 @@ const tutorialSlice = createSlice({ if (temp === null && local === null) { state.completedTutorial = false; } + }, + // Toggle remember completed + toggleRememberCompleted(state: TutorialSlice) { + const { rememberCompleted } = state; + + state.rememberCompleted = !rememberCompleted; } } }); @@ -104,6 +112,7 @@ export const { setTempTutorialComplete, setTutorialCompleted, clearTutorialCompleted, - getAndSetTutorial + getAndSetTutorial, + toggleRememberCompleted } = tutorialSlice.actions; export default tutorialSlice.reducer; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 92bb830..fb19683 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,10 +2,10 @@ import type { AppProps } from "next/app"; import React from "react"; import { ChakraProvider } from "@chakra-ui/react"; import AppTheme from "../theme/AppTheme"; -import Layout from "../theme/layout/Layout"; -import Head from "next/head"; import { Provider } from "react-redux"; import { store } from "../app/store"; +import Layout from "../theme/layout/Layout"; +import Head from "next/head"; function LCMPottyChart({ Component, pageProps }: AppProps): JSX.Element { return ( diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 0c6c1c9..2cd6a9f 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,5 +1,5 @@ -import React from "react"; import NextDocument, { Html, Head, Main, NextScript } from "next/document"; +import React from "react"; import { ColorModeScript } from "@chakra-ui/react"; import AppTheme from "../theme/AppTheme"; diff --git a/src/pages/calendar/[...date].tsx b/src/pages/calendar/[...date].tsx index 0f519e9..2379f1f 100644 --- a/src/pages/calendar/[...date].tsx +++ b/src/pages/calendar/[...date].tsx @@ -1,4 +1,6 @@ import React, { useEffect, useState } from "react"; +import { Provider } from "react-redux"; +import { store } from "../../app/store"; import { Box } from "@chakra-ui/react"; import { useRouter } from "next/router"; import { @@ -13,8 +15,6 @@ import { // import findValidDateRange from "../../lib/findValidDateRange"; import ErrorPage from "next/error"; import Calender from "../../components/calender"; -import { Provider } from "react-redux"; -import { store } from "../../app/store"; const DateRoute: React.FC = () => { const router = useRouter(); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 911e53a..b9c0430 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,4 @@ import React, { Fragment, useEffect, useRef } from "react"; -import { Box } from "@chakra-ui/react"; -import { format } from "date-fns"; -import Calender from "../components/calender"; -import Tutorial from "../components/tutorial"; -import LoadingOverlay from "../components/loading/LoadingOverlay"; import { Provider } from "react-redux"; import { store } from "../app/store"; import { useAppDispatch, useAppSelector } from "../app/hooks"; @@ -13,6 +8,11 @@ import { setTempTutorialComplete, setTutorialCompleted } from "../features/tutorial"; +import { Box } from "@chakra-ui/react"; +import { format } from "date-fns"; +import Calender from "../components/calender"; +import Tutorial from "../components/tutorial"; +import LoadingOverlay from "../components/loading/LoadingOverlay"; const IndexPage = (): JSX.Element => { const isLoading = useAppSelector((state) => state.calender.isLoading); diff --git a/src/theme/layout/Layout.tsx b/src/theme/layout/Layout.tsx index 2398677..91ad7d1 100644 --- a/src/theme/layout/Layout.tsx +++ b/src/theme/layout/Layout.tsx @@ -1,5 +1,4 @@ import React, { FC, ReactNode } from "react"; - import type { AppProps } from "next/app"; import Header from "../layout/Header"; import { Box } from "@chakra-ui/layout"; -- 2.49.1 From f6d86464b17eb6975b32adfdd8d5eb39ff40b42a Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 23 Jun 2022 13:25:51 -0500 Subject: [PATCH 16/32] Add redux state. --- src/components/tutorial/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index f7dd4ab..c91af59 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -5,11 +5,12 @@ import { Divider, Heading, HStack, - Link, Text, VStack } from "@chakra-ui/react"; -import React, { useState } from "react"; +import React from "react"; +import { useAppDispatch, useAppSelector } from "../../app/hooks"; +import { toggleRememberCompleted } from "../../features/tutorial"; import CustomButton from "../buttons/Custom"; import Patreon from "../buttons/Patreon"; import Twitter from "../buttons/Twitter"; @@ -24,7 +25,8 @@ const Tutorial = ({ setTutorialComplete, setTempTutorialComplete }: TutorialProps): JSX.Element => { - const [rememberComplete, setRememberComplete] = useState(false); + const rememberComplete = useAppSelector(state => state.tutorial.rememberCompleted); + const dispatch = useAppDispatch(); const handleComplete = (): void => { if (rememberComplete) { @@ -41,7 +43,7 @@ const Tutorial = ({ }; const handleUpdateCheck = (): void => { - setRememberComplete(!rememberComplete); + dispatch(toggleRememberCompleted()); }; // TODO: Add an expiration validator. -- 2.49.1 From 488f56354d88e37ed98f85e3241bb57f399ae5f5 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 23 Jun 2022 13:50:37 -0500 Subject: [PATCH 17/32] Fix useEffect effenceincy, --- src/components/buttons/Custom.tsx | 4 +--- src/components/buttons/Patreon.tsx | 5 +---- src/components/calender/index.tsx | 9 ++++++--- src/components/tutorial/CalenderExample.tsx | 16 +++++++++++----- src/components/tutorial/index.tsx | 4 +++- 5 files changed, 22 insertions(+), 16 deletions(-) diff --git a/src/components/buttons/Custom.tsx b/src/components/buttons/Custom.tsx index 93f377d..b96adae 100644 --- a/src/components/buttons/Custom.tsx +++ b/src/components/buttons/Custom.tsx @@ -14,9 +14,7 @@ const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => { return ( - + ); diff --git a/src/components/buttons/Patreon.tsx b/src/components/buttons/Patreon.tsx index 9dcec4e..76bfb5e 100644 --- a/src/components/buttons/Patreon.tsx +++ b/src/components/buttons/Patreon.tsx @@ -13,10 +13,7 @@ const Patreon = (): JSX.Element => { target="_blank" rel="noopener" > - diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 3f1af6d..41b7358 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -17,7 +17,7 @@ const Calender = ({ const selectedDate: SelectedDateInfo = useAppSelector( (state) => state.calender.selectedDateInfo ); - const { layout, title } = selectedDate; + const { layout, title, date: currentSelectedDateStr } = selectedDate; const currDateObj = new Date(currDate); @@ -33,9 +33,12 @@ const Calender = ({ if (year > 0 && month > 0 && day > 0) { const generatedDate: Date = new Date(year, month - 1, day); + const currSelectedDateObj = new Date(currentSelectedDateStr); const dateString: string = generatedDate.toJSON(); - dispatch(updateMonth(dateString)); + if (!isSameDay(currSelectedDateObj, generatedDate)) { + dispatch(updateMonth(dateString)); + } } else { console.warn("Invalid date format: ", newDate); } @@ -148,7 +151,7 @@ const Calender = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index b58e2e1..002c4c2 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -16,7 +16,8 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { // TODO: Disable the days that shouldn't have a function to prevent edits on add example and add to current date on the edit example. - const currDateObj: Date = new Date(); + const currDateStr: string = useAppSelector(state => state.calender.currDate); + const currDateObj: Date = new Date(currDateStr); const isLoading = false; const dispatch = useAppDispatch(); @@ -25,7 +26,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { const selectedDate: SelectedDateInfo = useAppSelector( (state) => state.calender.selectedDateInfo ); - const { layout } = selectedDate; + const { layout, date: currSelectedDateStr } = selectedDate; // * Stickers * // @@ -45,8 +46,13 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { const { month, weekdays } = currMonth; useEffect(() => { - dispatch(updateMonth(new Date().toJSON())); - }, [dispatch]); + const currDateObj: Date = new Date(currDateStr); + const currSelectedDateOj: Date = new Date(currSelectedDateStr); + + if (!isSameDay(currDateObj, currSelectedDateOj)) { + dispatch(updateMonth(currDateObj.toJSON())); + } + }, [currDateStr, currSelectedDateStr, dispatch]); // * The current week * // @@ -148,7 +154,7 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index c91af59..982c2fd 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -25,7 +25,9 @@ const Tutorial = ({ setTutorialComplete, setTempTutorialComplete }: TutorialProps): JSX.Element => { - const rememberComplete = useAppSelector(state => state.tutorial.rememberCompleted); + const rememberComplete = useAppSelector( + (state) => state.tutorial.rememberCompleted + ); const dispatch = useAppDispatch(); const handleComplete = (): void => { -- 2.49.1 From f808f6b2501bb2b9a4f8f300d7ed729692bee1c5 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 23 Jun 2022 13:59:43 -0500 Subject: [PATCH 18/32] More use effect effeciency. --- src/components/calender/index.tsx | 4 ++-- src/components/tutorial/CalenderExample.tsx | 11 ++++++++--- src/components/tutorial/index.tsx | 19 ++++++++++++++----- src/pages/index.tsx | 4 ++-- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 41b7358..44a059d 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -43,7 +43,7 @@ const Calender = ({ console.warn("Invalid date format: ", newDate); } } - }, [dispatch, newDate]); + }, [currentSelectedDateStr, dispatch, newDate]); useEffect(() => { // console.info("Check to update date."); @@ -151,7 +151,7 @@ const Calender = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 002c4c2..6adb03d 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -7,18 +7,23 @@ import Day from "../calender/Day"; interface CalenderExampleProps { type: "add" | "edit"; + isLoading: boolean; } -const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => { +const CalenderExample = ({ + type, + isLoading +}: CalenderExampleProps): JSX.Element => { // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example. // TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used. // TODO: Disable the days that shouldn't have a function to prevent edits on add example and add to current date on the edit example. - const currDateStr: string = useAppSelector(state => state.calender.currDate); + const currDateStr: string = useAppSelector( + (state) => state.calender.currDate + ); const currDateObj: Date = new Date(currDateStr); - const isLoading = false; const dispatch = useAppDispatch(); diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index 982c2fd..571c5f9 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -1,3 +1,6 @@ +import React from "react"; +import { useAppDispatch, useAppSelector } from "../../app/hooks"; +import { toggleRememberCompleted } from "../../features/tutorial"; import { Box, Button, @@ -8,9 +11,6 @@ import { Text, VStack } from "@chakra-ui/react"; -import React from "react"; -import { useAppDispatch, useAppSelector } from "../../app/hooks"; -import { toggleRememberCompleted } from "../../features/tutorial"; import CustomButton from "../buttons/Custom"; import Patreon from "../buttons/Patreon"; import Twitter from "../buttons/Twitter"; @@ -19,11 +19,13 @@ import CalenderExample from "./CalenderExample"; interface TutorialProps { setTutorialComplete: () => void; setTempTutorialComplete: () => void; + isLoading: boolean; } const Tutorial = ({ setTutorialComplete, - setTempTutorialComplete + setTempTutorialComplete, + isLoading }: TutorialProps): JSX.Element => { const rememberComplete = useAppSelector( (state) => state.tutorial.rememberCompleted @@ -271,7 +273,12 @@ const Tutorial = ({ alignItems="flex-start" pt={8} > - handleUpdateCheck()} > {"Remember completed?"} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b9c0430..9a57ed2 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -39,9 +39,8 @@ const IndexPage = (): JSX.Element => { }; useEffect(() => { - if (completedTutorial === null || tutorialCompletionInfo === null) { + if (completedTutorial === null && tutorialCompletionInfo === null) { dispatch(getAndSetTutorial()); - dispatch(updateLoading(false)); } if (completedTutorial !== null) { @@ -63,6 +62,7 @@ const IndexPage = (): JSX.Element => { )} -- 2.49.1 From a6e6e11ca322cb1916a72beda57ed1db2ecee512 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 23 Jun 2022 15:02:44 -0500 Subject: [PATCH 19/32] Broke up the tutorial component into smaller components. --- src/components/tutorial/CalenderExample.tsx | 4 - src/components/tutorial/data/aboutApp.ts | 10 + .../tutorial/data/appFunctionality.ts | 9 + src/components/tutorial/data/links.ts | 28 ++ src/components/tutorial/index.tsx | 324 ++---------------- .../tutorial/sections/TutorialAboutApp.tsx | 33 ++ .../sections/TutorialAppFunctionality.tsx | 33 ++ .../tutorial/sections/TutorialCalender.tsx | 74 ++++ .../tutorial/sections/TutorialHeading.tsx | 22 ++ .../tutorial/sections/TutorialLinks.tsx | 73 ++++ .../sections/TutorialSubmitButtons.tsx | 83 +++++ src/pages/index.tsx | 20 +- 12 files changed, 393 insertions(+), 320 deletions(-) create mode 100644 src/components/tutorial/data/aboutApp.ts create mode 100644 src/components/tutorial/data/appFunctionality.ts create mode 100644 src/components/tutorial/data/links.ts create mode 100644 src/components/tutorial/sections/TutorialAboutApp.tsx create mode 100644 src/components/tutorial/sections/TutorialAppFunctionality.tsx create mode 100644 src/components/tutorial/sections/TutorialCalender.tsx create mode 100644 src/components/tutorial/sections/TutorialHeading.tsx create mode 100644 src/components/tutorial/sections/TutorialLinks.tsx create mode 100644 src/components/tutorial/sections/TutorialSubmitButtons.tsx diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 6adb03d..2edf1bb 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -16,10 +16,6 @@ const CalenderExample = ({ }: CalenderExampleProps): JSX.Element => { // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example. - // TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used. - - // TODO: Disable the days that shouldn't have a function to prevent edits on add example and add to current date on the edit example. - const currDateStr: string = useAppSelector( (state) => state.calender.currDate ); diff --git a/src/components/tutorial/data/aboutApp.ts b/src/components/tutorial/data/aboutApp.ts new file mode 100644 index 0000000..faf4606 --- /dev/null +++ b/src/components/tutorial/data/aboutApp.ts @@ -0,0 +1,10 @@ +type AboutApp = string[]; + +const aboutApp: AboutApp = [ + "An app that mimics a potty/star chart for a potty training toddler or child.", + "It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way.", + "The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship.", + "This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely." +]; + +export default aboutApp; diff --git a/src/components/tutorial/data/appFunctionality.ts b/src/components/tutorial/data/appFunctionality.ts new file mode 100644 index 0000000..9c62325 --- /dev/null +++ b/src/components/tutorial/data/appFunctionality.ts @@ -0,0 +1,9 @@ +type AppFunctionality = string[]; + +const appFunctionality: AppFunctionality = [ + "The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use.", + "Ability to add a sticker to the current date.", + "Ability to add edit a sticker from a previous date with a confirmation prompt." +]; + +export default appFunctionality; diff --git a/src/components/tutorial/data/links.ts b/src/components/tutorial/data/links.ts new file mode 100644 index 0000000..2b3c48b --- /dev/null +++ b/src/components/tutorial/data/links.ts @@ -0,0 +1,28 @@ +export interface LinkObj { + href?: string; + name?: string; + type: "primary" | "secondary" | "twitter" | "patreon"; +} + +type Links = LinkObj[]; + +const links: Links = [ + { + href: "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y", + name: "Roadmap and Progress", + type: "secondary" + }, + { + href: "https://lucidcreations.media/introducing-code-name-potty-chart/", + name: "Original Announcement", + type: "secondary" + }, + { + type: "patreon" + }, + { + type: "twitter" + } +]; + +export default links; diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index 571c5f9..1d63ac4 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -1,312 +1,40 @@ import React from "react"; -import { useAppDispatch, useAppSelector } from "../../app/hooks"; -import { toggleRememberCompleted } from "../../features/tutorial"; -import { - Box, - Button, - Checkbox, - Divider, - Heading, - HStack, - Text, - VStack -} from "@chakra-ui/react"; -import CustomButton from "../buttons/Custom"; -import Patreon from "../buttons/Patreon"; -import Twitter from "../buttons/Twitter"; -import CalenderExample from "./CalenderExample"; +import { VStack } from "@chakra-ui/react"; +import TutorialCalender from "./sections/TutorialCalender"; +import TutorialLinks from "./sections/TutorialLinks"; +import TutorialHeading from "./sections/TutorialHeading"; +import TutorialAboutApp from "./sections/TutorialAboutApp"; +import TutorialSubmitButtons from "./sections/TutorialSubmitButtons"; +import TutorialAppFunctionality from "./sections/TutorialAppFunctionality"; interface TutorialProps { - setTutorialComplete: () => void; - setTempTutorialComplete: () => void; isLoading: boolean; } -const Tutorial = ({ - setTutorialComplete, - setTempTutorialComplete, - isLoading -}: TutorialProps): JSX.Element => { - const rememberComplete = useAppSelector( - (state) => state.tutorial.rememberCompleted - ); - const dispatch = useAppDispatch(); - - const handleComplete = (): void => { - if (rememberComplete) { - setTutorialComplete(); - } - - if (!rememberComplete) { - setTempTutorialComplete(); - } - }; - - const handleSkip = (): void => { - setTempTutorialComplete(); - }; - - const handleUpdateCheck = (): void => { - dispatch(toggleRememberCompleted()); - }; - +const Tutorial = ({ isLoading }: TutorialProps): JSX.Element => { // TODO: Add an expiration validator. // TODO: Add a version validator that removed the completed tutorial storages when there were major changes to the tutorial. // * The changes are tracked via env variables. The last version that user saw the tutorial is saved in storage. - // TODO: Break up this component into reusable components that will generate headers and the content section. - // * Pass in if the component to be generated is the last component so the dividers can be conditionally rendered. - // * Pass in the type of component: text, calender, type of calender. - return ( - - - - {/* The Heading Container */} - - {"Welcome to Code Name: LCM Potty Chart"} - - {"A Lucid Creations Media Project"} - - - - {/* About the app container */} - - - {"About the App"} - - - - { - "An app that mimics a potty/star chart for a potty training toddler or child." - } - - - { - "It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way." - } - - - { - "The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship." - } - - - { - "This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely." - } - - - - - - {/* Functionality of the app */} - - - {"Current Functionality"} - - - - { - "The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use." - } - - {"Ability to add a sticker to the current date."} - - { - "Ability to add edit a sticker from a previous date with a confirmation prompt." - } - - - - - {/* Calender Demos */} - - - {"How to Use The Calender"} - - - - {"Add a Sticker to Today's Date"} - - - {"Select the date with a"} - {" green "} - {"border."} - - - - - - {"Add a Sticker to Previous Dates"} - - - {"Select a date with a"} - {" green "} - {"border."} - - - - - - {/* Links */} - - - {"More Info"} - - - - - - - - - - {/* Complete tutorial */} - - - - - handleUpdateCheck()} - > - {"Remember completed?"} - - - - - + + + + + + + + ); }; diff --git a/src/components/tutorial/sections/TutorialAboutApp.tsx b/src/components/tutorial/sections/TutorialAboutApp.tsx new file mode 100644 index 0000000..5017de0 --- /dev/null +++ b/src/components/tutorial/sections/TutorialAboutApp.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { VStack, Heading, Divider, Text } from "@chakra-ui/react"; +import aboutApp from "../data/aboutApp"; + +const TutorialAboutApp = (): JSX.Element => { + return ( + + + {"About the App"} + + + {aboutApp.map((string: string) => { + return {string}; + })} + + + + ); +}; + +export default TutorialAboutApp; diff --git a/src/components/tutorial/sections/TutorialAppFunctionality.tsx b/src/components/tutorial/sections/TutorialAppFunctionality.tsx new file mode 100644 index 0000000..a457fc5 --- /dev/null +++ b/src/components/tutorial/sections/TutorialAppFunctionality.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { VStack, Heading, Divider, Text } from "@chakra-ui/react"; +import appFunctionality from "../data/appFunctionality"; + +const TutorialAppFunctionality = (): JSX.Element => { + return ( + + + {"About the App"} + + + {appFunctionality.map((string: string) => { + return {string}; + })} + + + + ); +}; + +export default TutorialAppFunctionality; diff --git a/src/components/tutorial/sections/TutorialCalender.tsx b/src/components/tutorial/sections/TutorialCalender.tsx new file mode 100644 index 0000000..1e32d50 --- /dev/null +++ b/src/components/tutorial/sections/TutorialCalender.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import { Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react"; +import CalenderExample from "../CalenderExample"; + +interface CalenderExampleProps { + isLoading: boolean; +} + +const TutorialCalender = ({ isLoading }: CalenderExampleProps): JSX.Element => { + return ( + + + {"How to Use The Calender"} + + + + {"Add a Sticker to Today's Date"} + + + {"Select the date with a"} + {" green "} + {"border."} + + + + + + {"Add a Sticker to Previous Dates"} + + + {"Select a date with a"} + {" green "} + {"border."} + + + + + + ); +}; + +export default TutorialCalender; diff --git a/src/components/tutorial/sections/TutorialHeading.tsx b/src/components/tutorial/sections/TutorialHeading.tsx new file mode 100644 index 0000000..852f065 --- /dev/null +++ b/src/components/tutorial/sections/TutorialHeading.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import { VStack, Heading, Divider } from "@chakra-ui/react"; + +const TutorialHeading = (): JSX.Element => { + return ( + + {"Welcome to Code Name: LCM Potty Chart"} + + {"A Lucid Creations Media Project"} + + + + ); +}; + +export default TutorialHeading; diff --git a/src/components/tutorial/sections/TutorialLinks.tsx b/src/components/tutorial/sections/TutorialLinks.tsx new file mode 100644 index 0000000..377e249 --- /dev/null +++ b/src/components/tutorial/sections/TutorialLinks.tsx @@ -0,0 +1,73 @@ +import React from "react"; +import { Divider, Heading, HStack, VStack } from "@chakra-ui/react"; +import CustomButton from "../../buttons/Custom"; +import Patreon from "../../buttons/Patreon"; +import Twitter from "../../buttons/Twitter"; +import links, { LinkObj } from "../data/links"; + +const TutorialLinks = (): JSX.Element => { + return ( + + + {"More Info"} + + + {links.map((link: LinkObj) => { + const { href, name, type } = link; + + if (type === "primary" || type === "secondary") { + return ; + } + + if (type === "patreon") { + return ; + } + + if (type === "twitter") { + return ; + } + })} + + + {links.map((link: LinkObj) => { + const { href, name, type } = link; + + if (type === "primary" || type === "secondary") { + return ; + } + + if (type === "patreon") { + return ; + } + + if (type === "twitter") { + return ; + } + })} + + + + ); +}; + +export default TutorialLinks; diff --git a/src/components/tutorial/sections/TutorialSubmitButtons.tsx b/src/components/tutorial/sections/TutorialSubmitButtons.tsx new file mode 100644 index 0000000..cb0fb84 --- /dev/null +++ b/src/components/tutorial/sections/TutorialSubmitButtons.tsx @@ -0,0 +1,83 @@ +import { HStack, Button, VStack, Checkbox } from "@chakra-ui/react"; +import React from "react"; +import { useAppDispatch, useAppSelector } from "../../../app/hooks"; +import { + setTutorialCompleted, + setTempTutorialComplete, + toggleRememberCompleted +} from "../../../features/tutorial"; + +interface TutorialSubmitButtonsProps { + isLoading: boolean; +} + +const TutorialSubmitButtons = ({ + isLoading +}: TutorialSubmitButtonsProps): JSX.Element => { + const rememberComplete: boolean = useAppSelector( + (state) => state.tutorial.rememberCompleted + ); + const dispatch = useAppDispatch(); + + const handleComplete = (): void => { + if (rememberComplete) { + dispatch(setTutorialCompleted()); + } + + if (!rememberComplete) { + dispatch(setTempTutorialComplete()); + } + }; + + const handleSkip = (): void => { + dispatch(setTempTutorialComplete()); + }; + + const handleUpdateCheck = (): void => { + dispatch(toggleRememberCompleted()); + }; + + return ( + + + + + handleUpdateCheck()} + > + {"Remember completed?"} + + + + ); +}; + +export default TutorialSubmitButtons; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9a57ed2..ae40e53 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,11 +3,7 @@ import { Provider } from "react-redux"; import { store } from "../app/store"; import { useAppDispatch, useAppSelector } from "../app/hooks"; import { updateLoading } from "../features/calender"; -import { - getAndSetTutorial, - setTempTutorialComplete, - setTutorialCompleted -} from "../features/tutorial"; +import { getAndSetTutorial } from "../features/tutorial"; import { Box } from "@chakra-ui/react"; import { format } from "date-fns"; import Calender from "../components/calender"; @@ -30,14 +26,6 @@ const IndexPage = (): JSX.Element => { day: parseInt(format(new Date(), "d")) }); - const handleTempTutorialCompleted = (): void => { - dispatch(setTempTutorialComplete()); - }; - - const handleTutorialCompleted = (): void => { - dispatch(setTutorialCompleted()); - }; - useEffect(() => { if (completedTutorial === null && tutorialCompletionInfo === null) { dispatch(getAndSetTutorial()); @@ -59,11 +47,7 @@ const IndexPage = (): JSX.Element => { ) : completedTutorial ? ( ) : ( - + )} -- 2.49.1 From 241300bc006437f79f81080d9f6328fd14b6b550 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 23 Jun 2022 15:31:48 -0500 Subject: [PATCH 20/32] Moved states to redux. --- src/components/tutorial/CalenderExample.tsx | 102 +++++++++--------- .../tutorial/sections/TutorialLinks.tsx | 26 +++-- src/features/tutorial/index.ts | 15 ++- 3 files changed, 86 insertions(+), 57 deletions(-) diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 2edf1bb..abd21fc 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -1,9 +1,10 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import { updateMonth } from "../../features/calender"; import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react"; import { format, isSameDay, isToday } from "date-fns"; import Day from "../calender/Day"; +import { setCurrentWeek } from "../../features/tutorial"; interface CalenderExampleProps { type: "add" | "edit"; @@ -30,7 +31,6 @@ const CalenderExample = ({ const { layout, date: currSelectedDateStr } = selectedDate; // * Stickers * // - const stickersMonth: StickerDays = useAppSelector( (state) => state.stickers.stickersMonth ); @@ -56,25 +56,30 @@ const CalenderExample = ({ }, [currDateStr, currSelectedDateStr, dispatch]); // * The current week * // + const currWeek = useAppSelector((state) => state.tutorial.currWeek); - const getCurrentWeek = (): MonthDay[] => { - let foundWeek: MonthDay[] | null; - for (const week in month) { - const currWeek = month[week]; + useEffect(() => { + const getCurrentWeek = (): MonthDay[] => { + let foundWeek: MonthDay[] | null; + for (const week in month) { + const currWeek = month[week]; - currWeek.forEach((day: MonthDay) => { - const { date } = day; + currWeek.forEach((day: MonthDay) => { + const { date } = day; - if (isToday(new Date(date))) { - foundWeek = currWeek; - } - }); + if (isToday(new Date(date))) { + foundWeek = currWeek; + } + }); + } + + return foundWeek || ([] as MonthDay[]); + }; + + if (currWeek === null) { + dispatch(setCurrentWeek(getCurrentWeek())); } - - return foundWeek || ([] as MonthDay[]); - }; - - const [currWeek /*, setCurrWeek*/] = useState(getCurrentWeek()); + }, [currWeek, dispatch, month]); return ( @@ -122,44 +127,45 @@ const CalenderExample = ({ columns={7} alignItems="center" > - {currWeek.map((day: MonthDay) => { - const { date, isOverflow, overflowDirection } = day; + {currWeek && + currWeek.map((day: MonthDay) => { + const { date, isOverflow, overflowDirection } = day; - const toDateObj: Date = new Date(date); + const toDateObj: Date = new Date(date); - let sticker = null; + let sticker = null; - let id = ""; + let id = ""; - stickersMonth.map((stickerDay) => { - const { date: stickerDate } = stickerDay; + stickersMonth.map((stickerDay) => { + const { date: stickerDate } = stickerDay; - if (isSameDay(new Date(stickerDate), toDateObj)) { - sticker = stickerDay.sticker; + if (isSameDay(new Date(stickerDate), toDateObj)) { + sticker = stickerDay.sticker; - id = stickerDay.id; - } - }); - - return ( - - ); - })} + }); + + return ( + + ); + })} ); diff --git a/src/components/tutorial/sections/TutorialLinks.tsx b/src/components/tutorial/sections/TutorialLinks.tsx index 377e249..8c1c34c 100644 --- a/src/components/tutorial/sections/TutorialLinks.tsx +++ b/src/components/tutorial/sections/TutorialLinks.tsx @@ -29,15 +29,22 @@ const TutorialLinks = (): JSX.Element => { const { href, name, type } = link; if (type === "primary" || type === "secondary") { - return ; + return ( + + ); } if (type === "patreon") { - return ; + return ; } if (type === "twitter") { - return ; + return ; } })} @@ -53,15 +60,22 @@ const TutorialLinks = (): JSX.Element => { const { href, name, type } = link; if (type === "primary" || type === "secondary") { - return ; + return ( + + ); } if (type === "patreon") { - return ; + return ; } if (type === "twitter") { - return ; + return ; } })} diff --git a/src/features/tutorial/index.ts b/src/features/tutorial/index.ts index d93be58..fc50ff8 100644 --- a/src/features/tutorial/index.ts +++ b/src/features/tutorial/index.ts @@ -1,4 +1,4 @@ -import { createSlice /*, PayloadAction*/ } from "@reduxjs/toolkit"; +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { addMonths } from "date-fns"; interface StorageState { @@ -37,12 +37,14 @@ interface TutorialSlice { completedTutorial: boolean | null; storageState: StorageState | null; rememberCompleted: boolean; + currWeek: MonthDay[] | null; } const initialState: TutorialSlice = { completedTutorial: null, storageState: null, - rememberCompleted: false + rememberCompleted: false, + currWeek: null }; const tutorialSlice = createSlice({ @@ -104,6 +106,12 @@ const tutorialSlice = createSlice({ const { rememberCompleted } = state; state.rememberCompleted = !rememberCompleted; + }, + // Set current week + setCurrentWeek(state: TutorialSlice, action: PayloadAction) { + const { payload } = action; + + state.currWeek = payload; } } }); @@ -113,6 +121,7 @@ export const { setTutorialCompleted, clearTutorialCompleted, getAndSetTutorial, - toggleRememberCompleted + toggleRememberCompleted, + setCurrentWeek } = tutorialSlice.actions; export default tutorialSlice.reducer; -- 2.49.1 From 124ea164f5ebf91e06fbc07dfe11f6242bc98a1c Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Thu, 23 Jun 2022 15:37:30 -0500 Subject: [PATCH 21/32] Layout --- src/components/tutorial/sections/TutorialSubmitButtons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tutorial/sections/TutorialSubmitButtons.tsx b/src/components/tutorial/sections/TutorialSubmitButtons.tsx index cb0fb84..3bb72fa 100644 --- a/src/components/tutorial/sections/TutorialSubmitButtons.tsx +++ b/src/components/tutorial/sections/TutorialSubmitButtons.tsx @@ -40,7 +40,7 @@ const TutorialSubmitButtons = ({ return ( Date: Thu, 23 Jun 2022 17:20:05 -0500 Subject: [PATCH 22/32] Check for expires compelted tutorial cookie. --- lib/versionStringToNumber.ts | 22 +++++++ src/components/tutorial/index.tsx | 5 +- src/features/tutorial/index.ts | 27 ++++++--- src/pages/index.tsx | 98 +++++++++++++++++++++++++++---- 4 files changed, 130 insertions(+), 22 deletions(-) create mode 100644 lib/versionStringToNumber.ts diff --git a/lib/versionStringToNumber.ts b/lib/versionStringToNumber.ts new file mode 100644 index 0000000..492f161 --- /dev/null +++ b/lib/versionStringToNumber.ts @@ -0,0 +1,22 @@ +/** + * Function to convert the version string to a number tha represents the most recent major release. + * @param {string }version The version string. + * @returns {number} a number that represents the most recent major release. + */ +const versionStringToNumber = (version: string): number => { + const versionStrArr: string[] = version.split("."); + + const versionArr: number[] = versionStrArr.map((str) => parseInt(str)); + + if (versionArr[0] === 0 && versionArr[1] === 0 && versionArr[2] > 1) { + versionArr[1] = 1; + } + + const versionStr = `${versionArr[0]}` + "." + `${versionArr[1]}`; + + const versionNum: number = parseFloat(versionStr); + + return versionNum; +}; + +export default versionStringToNumber; diff --git a/src/components/tutorial/index.tsx b/src/components/tutorial/index.tsx index 1d63ac4..3ad41b0 100644 --- a/src/components/tutorial/index.tsx +++ b/src/components/tutorial/index.tsx @@ -12,10 +12,6 @@ interface TutorialProps { } const Tutorial = ({ isLoading }: TutorialProps): JSX.Element => { - // TODO: Add an expiration validator. - // TODO: Add a version validator that removed the completed tutorial storages when there were major changes to the tutorial. - // * The changes are tracked via env variables. The last version that user saw the tutorial is saved in storage. - return ( { py={4} px={{ base: 0, sm: 2, md: 4 }} bg="gray.700" + borderRadius={{ base: "", sm: "2xl" }} > diff --git a/src/features/tutorial/index.ts b/src/features/tutorial/index.ts index fc50ff8..394f5fc 100644 --- a/src/features/tutorial/index.ts +++ b/src/features/tutorial/index.ts @@ -1,12 +1,25 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit"; -import { addMonths } from "date-fns"; +import { addMonths, endOfDay } from "date-fns"; +import versionStringToNumber from "../../../lib/versionStringToNumber"; -interface StorageState { +export interface StorageState { exp: string; - version: string; + version: number; completed: boolean; } +const endOfToday: Date = endOfDay(new Date()); + +const generateExpDate = (): string => { + return endOfDay(addMonths(endOfToday, 1)).toJSON(); +}; + +const generateVersion = (): number => { + const versionStr: string = process.env.NEXT_PUBLIC_APP_VERSION; + + return versionStringToNumber(versionStr); +}; + // * Storage Helpers * // const setTempStorage = (storageState: StorageState): void => { @@ -53,8 +66,8 @@ const tutorialSlice = createSlice({ reducers: { // Set temp complete setTempTutorialComplete(state: TutorialSlice) { - const exp: string = addMonths(new Date(), 1).toJSON(); - const version: string = process.env.NEXT_PUBLIC_APP_VERSION.split("-")[0]; + const exp: string = generateExpDate(); + const version: number = generateVersion(); const storageState: StorageState = { exp, version, @@ -67,8 +80,8 @@ const tutorialSlice = createSlice({ }, // Set completed (remember) setTutorialCompleted(state: TutorialSlice) { - const exp: string = addMonths(new Date(), 1).toJSON(); - const version: string = process.env.NEXT_PUBLIC_APP_VERSION.split("-")[0]; + const exp: string = generateExpDate(); + const version: number = generateVersion(); const storageState: StorageState = { exp, version, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ae40e53..1815d30 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,29 +3,38 @@ import { Provider } from "react-redux"; import { store } from "../app/store"; import { useAppDispatch, useAppSelector } from "../app/hooks"; import { updateLoading } from "../features/calender"; -import { getAndSetTutorial } from "../features/tutorial"; +import { + clearTutorialCompleted, + getAndSetTutorial, + StorageState +} from "../features/tutorial"; import { Box } from "@chakra-ui/react"; -import { format } from "date-fns"; +import { format, isAfter, isBefore, startOfDay } from "date-fns"; import Calender from "../components/calender"; import Tutorial from "../components/tutorial"; import LoadingOverlay from "../components/loading/LoadingOverlay"; +import versionStringToNumber from "../../lib/versionStringToNumber"; const IndexPage = (): JSX.Element => { - const isLoading = useAppSelector((state) => state.calender.isLoading); - const completedTutorial = useAppSelector( + const currDateStr: string = useAppSelector( + (state) => state.calender.currDate + ); + const isLoading: boolean = useAppSelector( + (state) => state.calender.isLoading + ); + + const currDateObj: Date = new Date(currDateStr); + + // * Tutorial * // + const completedTutorial: boolean = useAppSelector( (state) => state.tutorial.completedTutorial ); - const tutorialCompletionInfo = useAppSelector( + const tutorialCompletionInfo: StorageState = useAppSelector( (state) => state.tutorial.storageState ); const dispatch = useAppDispatch(); - const currDate = useRef({ - year: parseInt(format(new Date(), "y")), - month: parseInt(format(new Date(), "M")), - day: parseInt(format(new Date(), "d")) - }); - + // Get the completed tutorial cookie or have it set to false. useEffect(() => { if (completedTutorial === null && tutorialCompletionInfo === null) { dispatch(getAndSetTutorial()); @@ -36,6 +45,73 @@ const IndexPage = (): JSX.Element => { } }, [completedTutorial, dispatch, tutorialCompletionInfo]); + // Checking the exp date of completed tutorial cookie and if the version completed is out of date. + useEffect(() => { + if (tutorialCompletionInfo !== null) { + const { exp, version } = tutorialCompletionInfo; + const currDateObj: Date = new Date(currDateStr); + + /** + * Checks if the completed tutorial cookie is expired. + * @param {Date} expDate the date when the completed tutorital cookie expires. + * @returns {boolean} true if the cookie is expired, false is otherwise. + */ + const expDateValidator = (expDate: Date): boolean => { + let flag = false; + + const startOfToday = startOfDay(currDateObj); + + if (isAfter(startOfToday, expDate)) { + flag = true; + } + + return flag; + }; + + /** + * Checks if the last time the completed tutorial is before an update to the tutorial. + * @param {number} lastVersionCompleted the version number the tutorial was last completed. + * @returns {boolean} true if the version given is before the changes to the tutorial, false otherwise. + */ + const versionValidator = (lastVersionCompleted: number): boolean => { + const lastVersionWithChangeStr: string = + process.env.NEXT_PUBLIC_NEW_TUTORIAL_VERSION; + const lastVersionWithChange: number = versionStringToNumber( + lastVersionWithChangeStr + ); + + const lastUpdatedDateStr: string = + process.env.NEXT_PUBLIC_LAST_UPDATE_DATE; + const lastUpdatedDate: Date = new Date(lastUpdatedDateStr); + + let flag = false; + + if ( + lastVersionCompleted < lastVersionWithChange || + (lastVersionCompleted === lastVersionWithChange && + isBefore(currDateObj, lastUpdatedDate)) + ) { + flag = true; + console.error("Completed cookie version is out of date."); + } + + return flag; + }; + + if (expDateValidator(new Date(exp)) || versionValidator(version)) { + console.warn("Version outdated or cookie expired."); + dispatch(clearTutorialCompleted()); + } + } + }, [currDateStr, dispatch, tutorialCompletionInfo]); + + // Current date + const currDate = useRef({ + year: parseInt(format(currDateObj, "y")), + month: parseInt(format(currDateObj, "M")), + day: parseInt(format(currDateObj, "d")) + }); + return ( -- 2.49.1 From 7b36b040e5eefbb7dc40783469533794d2fc6c60 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 09:39:49 -0500 Subject: [PATCH 23/32] Fix layout. --- data/stickerSeeder.ts | 1 + src/components/calender/Day.tsx | 28 +-- src/components/calender/index.tsx | 18 +- src/components/tutorial/CalenderExample.tsx | 189 ++++++++++-------- .../tutorial/sections/TutorialLinks.tsx | 4 +- src/theme/layout/Header.tsx | 28 +-- src/theme/layout/MobileNav.tsx | 2 +- 7 files changed, 151 insertions(+), 119 deletions(-) diff --git a/data/stickerSeeder.ts b/data/stickerSeeder.ts index 8e514b7..908b2b0 100644 --- a/data/stickerSeeder.ts +++ b/data/stickerSeeder.ts @@ -24,6 +24,7 @@ const generateSticker = (): -2 | -1 | 0 | 1 | 2 => { } }; +// TODO: Update so seeder takes in a month or date to then generate the stickers for it. /** * This seeder is to simulate the date and sticker info from the database. * Filling up an array for the current month with sticker from ths first to diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx index 4c9d624..9667dea 100644 --- a/src/components/calender/Day.tsx +++ b/src/components/calender/Day.tsx @@ -90,11 +90,12 @@ const Day = ({ return isOverflow ? ( {`${getDate(currDateObj)}`} @@ -126,6 +126,8 @@ const Day = ({ ) : ( { setStep(0); setSelectedSticker(null); @@ -168,13 +168,15 @@ const Day = ({ : tutorial === "edit" && !isToday && isBefore(currDateObj, endOfDay(currDate)) - ? "gray.600" - : "transparent" + ? "gray.600" + : "transparent" : "transparent", border: "1px solid #FFF" }} > 10 @@ -182,8 +184,6 @@ const Day = ({ : "0px 9px 3px 9px" : "auto" } - h="auto" - w="auto" border={isToday ? "1px solid #0068ff" : "0px"} borderRadius={isToday ? "100px" : "0px"} > diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 44a059d..4f4ea0e 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -73,24 +73,24 @@ const Calender = ({ {weekdays.map((weekDay) => { return ( {weekDay} @@ -110,9 +110,9 @@ const Calender = ({ })} @@ -151,7 +151,7 @@ const Calender = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index abd21fc..8c07174 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -60,7 +60,8 @@ const CalenderExample = ({ useEffect(() => { const getCurrentWeek = (): MonthDay[] => { - let foundWeek: MonthDay[] | null; + let foundWeek: MonthDay[]; + for (const week in month) { const currWeek = month[week]; @@ -82,91 +83,121 @@ const CalenderExample = ({ }, [currWeek, dispatch, month]); return ( - - + - {weekdays.map((weekDay) => { - return ( - - - {weekDay} - - - {weekDay.substring(0, 3)} - - - {weekDay.substring(0, 2)} - - - ); - })} - - - {currWeek && - currWeek.map((day: MonthDay) => { - const { date, isOverflow, overflowDirection } = day; - - const toDateObj: Date = new Date(date); - - let sticker = null; - - let id = ""; - - stickersMonth.map((stickerDay) => { - const { date: stickerDate } = stickerDay; - - if (isSameDay(new Date(stickerDate), toDateObj)) { - sticker = stickerDay.sticker; - - id = stickerDay.id; - } - }); - + + {weekdays.map((weekDay) => { return ( - + + + {weekDay} + + + {weekDay.substring(0, 3)} + + + {weekDay.substring(0, 2)} + + ); })} - + + + {currWeek && + currWeek.map((day: MonthDay) => { + const { date, isOverflow, overflowDirection } = day; + + const toDateObj: Date = new Date(date); + + let sticker = null; + + let id = ""; + + stickersMonth.map((stickerDay) => { + const { date: stickerDate } = stickerDay; + + if (isSameDay(new Date(stickerDate), toDateObj)) { + sticker = stickerDay.sticker; + + id = stickerDay.id; + } + }); + + return ( + + ); + })} + + + {type === "edit" && ( + + + { + "Not being able to edit within this tutorial when the current date is the start of the month is a known bug." + } + + {"This bug will be fixed in beta v2."} + + )} ); }; diff --git a/src/components/tutorial/sections/TutorialLinks.tsx b/src/components/tutorial/sections/TutorialLinks.tsx index 8c1c34c..4595ae4 100644 --- a/src/components/tutorial/sections/TutorialLinks.tsx +++ b/src/components/tutorial/sections/TutorialLinks.tsx @@ -18,9 +18,9 @@ const TutorialLinks = (): JSX.Element => { {"More Info"} { })} { 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" @@ -99,18 +99,18 @@ const Header = (): JSX.Element => { > {/* Logo | Site Name */} { setOpen(!open)} - onMouseEnter={() => setHover(true)} - onMouseLeave={() => setHover(false)} display={{ base: "inline-flex", lg: "none" }} - variant="mobileNav" bg={transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)"} - type="button" border={transparentNavbar ? "1px solid #0068ff" : "none"} - id="mobile-menu-button" + variant="mobileNav" + type="button" + onClick={() => setOpen(!open)} + onMouseEnter={() => setHover(true)} + onMouseLeave={() => setHover(false)} /> diff --git a/src/theme/layout/MobileNav.tsx b/src/theme/layout/MobileNav.tsx index 5af35f6..e0a604f 100644 --- a/src/theme/layout/MobileNav.tsx +++ b/src/theme/layout/MobileNav.tsx @@ -17,12 +17,12 @@ const MobileNav: FC = ({ updateOpen }: MobileNavProps) => { {navItems.map((navItem: NavItem, index: number) => { return ( -- 2.49.1 From 6a0863faf3d061f3ba932e75f905b60bdf346450 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 09:56:48 -0500 Subject: [PATCH 24/32] Added a message about a known bug. --- src/components/calender/Day.tsx | 12 ++++++------ src/components/calender/index.tsx | 2 +- src/components/tutorial/CalenderExample.tsx | 13 +++++++++---- .../tutorial/sections/TutorialCalender.tsx | 2 +- src/theme/components/buttonStyles.ts | 2 +- src/theme/layout/Header.tsx | 4 ++-- 6 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx index 9667dea..7c2aaf1 100644 --- a/src/components/calender/Day.tsx +++ b/src/components/calender/Day.tsx @@ -135,8 +135,8 @@ const Day = ({ : tutorial === "edit" && !isToday && isBefore(currDateObj, endOfDay(currDate)) - ? "gray.600" - : "transparent" + ? "gray.600" + : "transparent" : "transparent" } border={ @@ -146,8 +146,8 @@ const Day = ({ : tutorial === "edit" && !isToday && isBefore(currDateObj, endOfDay(currDate)) - ? "1px solid #00ff3c" - : "1px solid #0068ff" + ? "1px solid #00ff3c" + : "1px solid #0068ff" : "1px solid #0068ff" } onClick={() => { @@ -168,8 +168,8 @@ const Day = ({ : tutorial === "edit" && !isToday && isBefore(currDateObj, endOfDay(currDate)) - ? "gray.600" - : "transparent" + ? "gray.600" + : "transparent" : "transparent", border: "1px solid #FFF" }} diff --git a/src/components/calender/index.tsx b/src/components/calender/index.tsx index 4f4ea0e..2455fe7 100644 --- a/src/components/calender/index.tsx +++ b/src/components/calender/index.tsx @@ -151,7 +151,7 @@ const Calender = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); diff --git a/src/components/tutorial/CalenderExample.tsx b/src/components/tutorial/CalenderExample.tsx index 8c07174..a241c55 100644 --- a/src/components/tutorial/CalenderExample.tsx +++ b/src/components/tutorial/CalenderExample.tsx @@ -175,7 +175,7 @@ const CalenderExample = ({ id.length ? id : format(toDateObj, "yyyyddLL") + - `/${sticker === null ? 0 : sticker}` + `/${sticker === null ? 0 : sticker}` } /> ); @@ -190,12 +190,17 @@ const CalenderExample = ({ alignItems="center" spacing={2} > - + { - "Not being able to edit within this tutorial when the current date is the start of the month is a known bug." + "Not being able to edit within this tutorial when the current date is the start of the week or month is a known bug." } - {"This bug will be fixed in beta v2."} + + {"This bug will be fixed in beta v2."} + + + {"You can skip the tutorial and try again tomorrow."} + )} diff --git a/src/components/tutorial/sections/TutorialCalender.tsx b/src/components/tutorial/sections/TutorialCalender.tsx index 1e32d50..4a110e7 100644 --- a/src/components/tutorial/sections/TutorialCalender.tsx +++ b/src/components/tutorial/sections/TutorialCalender.tsx @@ -36,7 +36,7 @@ const TutorialCalender = ({ isLoading }: CalenderExampleProps): JSX.Element => { justifyContent="center" spacing={1} > - {"Select the date with a"} + {"Select the date with the"} {" green "} {"border."} diff --git a/src/theme/components/buttonStyles.ts b/src/theme/components/buttonStyles.ts index 56e1fc5..cdeaf18 100644 --- a/src/theme/components/buttonStyles.ts +++ b/src/theme/components/buttonStyles.ts @@ -45,7 +45,7 @@ const buttonStyles = { fontSize: "xl", py: 3, px: 4, - color: "gray.400", + color: "whiteAlpha.800", _hover: { bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props), color: "whiteAlpha.900" diff --git a/src/theme/layout/Header.tsx b/src/theme/layout/Header.tsx index 6712850..a500d96 100644 --- a/src/theme/layout/Header.tsx +++ b/src/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" -- 2.49.1 From 362b4babe2fd7c434375b0f076442d2663a0a5ed Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 10:45:19 -0500 Subject: [PATCH 25/32] Moved buttons to it's own component and added the new compoenent to the footer. --- .../{tutorial => buttons}/data/links.ts | 0 src/components/buttons/index.tsx | 77 +++++++++++++++++++ src/components/calender/Day.tsx | 8 +- .../tutorial/sections/TutorialLinks.tsx | 70 +---------------- src/theme/layout/Footer.tsx | 11 +-- 5 files changed, 88 insertions(+), 78 deletions(-) rename src/components/{tutorial => buttons}/data/links.ts (100%) create mode 100644 src/components/buttons/index.tsx diff --git a/src/components/tutorial/data/links.ts b/src/components/buttons/data/links.ts similarity index 100% rename from src/components/tutorial/data/links.ts rename to src/components/buttons/data/links.ts diff --git a/src/components/buttons/index.tsx b/src/components/buttons/index.tsx new file mode 100644 index 0000000..d897253 --- /dev/null +++ b/src/components/buttons/index.tsx @@ -0,0 +1,77 @@ +import React from "react"; +import { Box, HStack, VStack } from "@chakra-ui/react"; +import CustomButton from "./Custom"; +import links, { LinkObj } from "./data/links"; +import Patreon from "./Patreon"; +import Twitter from "./Twitter"; + +const Buttons = (): JSX.Element => { + return ( + + + {links.map((link: LinkObj) => { + const { href, name, type } = link; + + if (type === "primary" || type === "secondary") { + return ( + + ); + } + + if (type === "patreon") { + return ; + } + + if (type === "twitter") { + return ; + } + })} + + + {links.map((link: LinkObj) => { + const { href, name, type } = link; + + if (type === "primary" || type === "secondary") { + return ( + + ); + } + + if (type === "patreon") { + return ; + } + + if (type === "twitter") { + return ; + } + })} + + + ); +}; + +export default Buttons; diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx index 7c2aaf1..fae73c9 100644 --- a/src/components/calender/Day.tsx +++ b/src/components/calender/Day.tsx @@ -98,13 +98,17 @@ const Day = ({ border="1px solid #181d8f" _hover={{ cursor: isBefore(currDateObj, endOfDay(currDate)) - ? "pointer" + ? selectedSticker !== null + ? "pointer" + : "default" : "default", background: "gray.700", border: "1px solid #FFF", color: "whiteAlpha.900" }} - onClick={() => handleNav(overflowDirection)} + onClick={() => + selectedSticker !== null ? handleNav(overflowDirection) : "" + } spacing="0.5rem" alignContent="center" justifyContent="flex-start" diff --git a/src/components/tutorial/sections/TutorialLinks.tsx b/src/components/tutorial/sections/TutorialLinks.tsx index 4595ae4..a0cb1a0 100644 --- a/src/components/tutorial/sections/TutorialLinks.tsx +++ b/src/components/tutorial/sections/TutorialLinks.tsx @@ -1,9 +1,6 @@ import React from "react"; -import { Divider, Heading, HStack, VStack } from "@chakra-ui/react"; -import CustomButton from "../../buttons/Custom"; -import Patreon from "../../buttons/Patreon"; -import Twitter from "../../buttons/Twitter"; -import links, { LinkObj } from "../data/links"; +import { Divider, Heading, VStack } from "@chakra-ui/react"; +import Buttons from "../../buttons"; const TutorialLinks = (): JSX.Element => { return ( @@ -17,68 +14,7 @@ const TutorialLinks = (): JSX.Element => { {"More Info"} - - {links.map((link: LinkObj) => { - const { href, name, type } = link; - - if (type === "primary" || type === "secondary") { - return ( - - ); - } - - if (type === "patreon") { - return ; - } - - if (type === "twitter") { - return ; - } - })} - - - {links.map((link: LinkObj) => { - const { href, name, type } = link; - - if (type === "primary" || type === "secondary") { - return ( - - ); - } - - if (type === "patreon") { - return ; - } - - if (type === "twitter") { - return ; - } - })} - + ); diff --git a/src/theme/layout/Footer.tsx b/src/theme/layout/Footer.tsx index a59d391..e63dc1a 100644 --- a/src/theme/layout/Footer.tsx +++ b/src/theme/layout/Footer.tsx @@ -13,6 +13,7 @@ import { motion } from "framer-motion"; import Patreon from "../../components/buttons/Patreon"; import CustomButton from "../../components/buttons/Custom"; import Twitter from "../../components/buttons/Twitter"; +import Buttons from "../../components/buttons"; const MotionBox = motion(Box); @@ -69,15 +70,7 @@ const Footer = (): JSX.Element => { */} - - - + © {` 2021 - ${new Date().getFullYear()} `} -- 2.49.1 From e7d6990df65e039ff172d666fd28d1536b9116ca Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 10:47:36 -0500 Subject: [PATCH 26/32] Update version info --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c3dc022..80a5e12 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": "0.0.11", + "version": "0.1.0", "author": { "name": "Lucid Creations Media", "url": "https://lucidcreations.media", -- 2.49.1 From ec7345f26e61ab804cc592d4d56e38210eb6e4ee Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 11:17:51 -0500 Subject: [PATCH 27/32] upgrade framer-motion & sharp --- package.json | 4 +- yarn.lock | 189 +++++++-------------------------------------------- 2 files changed, 26 insertions(+), 167 deletions(-) diff --git a/package.json b/package.json index 80a5e12..2711863 100644 --- a/package.json +++ b/package.json @@ -23,12 +23,12 @@ "@reduxjs/toolkit": "^1.8.2", "date-fns": "^2.28.0", "formik": "^2.2.9", - "framer-motion": "^6.3.11", + "framer-motion": "^6.3.15", "next": "12.1.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.0.2", - "sharp": "^0.30.6" + "sharp": "^0.30.7" }, "devDependencies": { "@types/node": "^18.0.0", diff --git a/yarn.lock b/yarn.lock index c6e8606..a9dff8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1682,13 +1682,6 @@ __metadata: languageName: node linkType: hard -"ansi-regex@npm:^2.0.0": - version: 2.1.1 - resolution: "ansi-regex@npm:2.1.1" - checksum: 190abd03e4ff86794f338a31795d262c1dfe8c91f7e01d04f13f646f1dcb16c5800818f886047876f1272f065570ab86b24b99089f8b68a0e11ff19aed4ca8f1 - languageName: node - linkType: hard - "ansi-regex@npm:^5.0.1": version: 5.0.1 resolution: "ansi-regex@npm:5.0.1" @@ -1714,13 +1707,6 @@ __metadata: languageName: node linkType: hard -"aproba@npm:^1.0.3": - version: 1.2.0 - resolution: "aproba@npm:1.2.0" - checksum: 0fca141966559d195072ed047658b6e6c4fe92428c385dd38e288eacfc55807e7b4989322f030faff32c0f46bb0bc10f1e0ac32ec22d25315a1e5bbc0ebb76dc - languageName: node - linkType: hard - "aproba@npm:^1.0.3 || ^2.0.0": version: 2.0.0 resolution: "aproba@npm:2.0.0" @@ -1738,16 +1724,6 @@ __metadata: languageName: node linkType: hard -"are-we-there-yet@npm:~1.1.2": - version: 1.1.7 - resolution: "are-we-there-yet@npm:1.1.7" - dependencies: - delegates: ^1.0.0 - readable-stream: ^2.0.6 - checksum: 70d251719c969b2745bfe5ddf3ebaefa846a636e90a6d5212573676af5d6670e15457761d4725731e19cbebdce42c4ab0cbedf23ab047f2a08274985aa10a3c7 - languageName: node - linkType: hard - "argparse@npm:^2.0.1": version: 2.0.1 resolution: "argparse@npm:2.0.1" @@ -2018,13 +1994,6 @@ __metadata: languageName: node linkType: hard -"code-point-at@npm:^1.0.0": - version: 1.1.0 - resolution: "code-point-at@npm:1.1.0" - checksum: 17d5666611f9b16d64fdf48176d9b7fb1c7d1c1607a189f7e600040a11a6616982876af148230336adb7d8fe728a559f743a4e29db3747e3b1a32fa7f4529681 - languageName: node - linkType: hard - "color-convert@npm:^1.9.0": version: 1.9.3 resolution: "color-convert@npm:1.9.3" @@ -2100,7 +2069,7 @@ __metadata: languageName: node linkType: hard -"console-control-strings@npm:^1.0.0, console-control-strings@npm:^1.1.0, console-control-strings@npm:~1.1.0": +"console-control-strings@npm:^1.1.0": version: 1.1.0 resolution: "console-control-strings@npm:1.1.0" checksum: 8755d76787f94e6cf79ce4666f0c5519906d7f5b02d4b884cf41e11dcd759ed69c57da0670afd9236d229a46e0f9cf519db0cd829c6dca820bb5a5c3def584ed @@ -2132,13 +2101,6 @@ __metadata: languageName: node linkType: hard -"core-util-is@npm:~1.0.0": - version: 1.0.3 - resolution: "core-util-is@npm:1.0.3" - checksum: 9de8597363a8e9b9952491ebe18167e3b36e7707569eed0ebf14f8bba773611376466ae34575bca8cfe3c767890c859c74056084738f09d4e4a6f902b2ad7d99 - languageName: node - linkType: hard - "cosmiconfig@npm:^6.0.0": version: 6.0.0 resolution: "cosmiconfig@npm:6.0.0" @@ -2889,9 +2851,9 @@ __metadata: languageName: node linkType: hard -"framer-motion@npm:^6.3.11": - version: 6.3.11 - resolution: "framer-motion@npm:6.3.11" +"framer-motion@npm:^6.3.15": + version: 6.3.15 + resolution: "framer-motion@npm:6.3.15" dependencies: "@emotion/is-prop-valid": ^0.8.2 framesync: 6.0.1 @@ -2905,7 +2867,7 @@ __metadata: dependenciesMeta: "@emotion/is-prop-valid": optional: true - checksum: 2333b296a109ec0ef86421453f66a92b63e07930a491102f1007bbe48f40594d8c51a96ca937f8f3f013ba658147049bf1fa9feebc44487b8e7617bb674fb254 + checksum: d761745e25c7c81c96e15c73b311afb1b732c31f8deb6dc9f71edff32f4b0495af28580707288ae3827a8c1b2a71e093b7b97746ddf73dc7aaecf5d2a29ce71c languageName: node linkType: hard @@ -2999,22 +2961,6 @@ __metadata: languageName: node linkType: hard -"gauge@npm:~2.7.3": - version: 2.7.4 - resolution: "gauge@npm:2.7.4" - dependencies: - aproba: ^1.0.3 - console-control-strings: ^1.0.0 - has-unicode: ^2.0.0 - object-assign: ^4.1.0 - signal-exit: ^3.0.0 - string-width: ^1.0.1 - strip-ansi: ^3.0.1 - wide-align: ^1.1.0 - checksum: a89b53cee65579b46832e050b5f3a79a832cc422c190de79c6b8e2e15296ab92faddde6ddf2d376875cbba2b043efa99b9e1ed8124e7365f61b04e3cee9d40ee - languageName: node - linkType: hard - "get-intrinsic@npm:^1.0.2, get-intrinsic@npm:^1.1.0, get-intrinsic@npm:^1.1.1": version: 1.1.1 resolution: "get-intrinsic@npm:1.1.1" @@ -3200,7 +3146,7 @@ __metadata: languageName: node linkType: hard -"has-unicode@npm:^2.0.0, has-unicode@npm:^2.0.1": +"has-unicode@npm:^2.0.1": version: 2.0.1 resolution: "has-unicode@npm:2.0.1" checksum: 1eab07a7436512db0be40a710b29b5dc21fa04880b7f63c9980b706683127e3c1b57cb80ea96d47991bdae2dfe479604f6a1ba410106ee1046a41d1bd0814400 @@ -3340,7 +3286,7 @@ __metadata: languageName: node linkType: hard -"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4, inherits@npm:~2.0.3": +"inherits@npm:2, inherits@npm:^2.0.3, inherits@npm:^2.0.4": version: 2.0.4 resolution: "inherits@npm:2.0.4" checksum: 4a48a733847879d6cf6691860a6b1e3f0f4754176e4d71494c41f3475553768b10f84b5ce1d40fbd0e34e6bfbb864ee35858ad4dd2cf31e02fc4a154b724d7f1 @@ -3446,15 +3392,6 @@ __metadata: languageName: node linkType: hard -"is-fullwidth-code-point@npm:^1.0.0": - version: 1.0.0 - resolution: "is-fullwidth-code-point@npm:1.0.0" - dependencies: - number-is-nan: ^1.0.0 - checksum: 4d46a7465a66a8aebcc5340d3b63a56602133874af576a9ca42c6f0f4bd787a743605771c5f246db77da96605fefeffb65fc1dbe862dcc7328f4b4d03edf5a57 - languageName: node - linkType: hard - "is-fullwidth-code-point@npm:^3.0.0": version: 3.0.0 resolution: "is-fullwidth-code-point@npm:3.0.0" @@ -3547,13 +3484,6 @@ __metadata: languageName: node linkType: hard -"isarray@npm:~1.0.0": - version: 1.0.0 - resolution: "isarray@npm:1.0.0" - checksum: f032df8e02dce8ec565cf2eb605ea939bdccea528dbcf565cdf92bfa2da9110461159d86a537388ef1acef8815a330642d7885b29010e8f7eac967c9993b65ab - languageName: node - linkType: hard - "isexe@npm:^2.0.0": version: 2.0.0 resolution: "isexe@npm:2.0.0" @@ -3740,13 +3670,13 @@ __metadata: eslint-plugin-react: ^7.30.0 eslint-plugin-react-hooks: <4.6.0 formik: ^2.2.9 - framer-motion: ^6.3.11 + framer-motion: ^6.3.15 next: 12.1.6 prettier: ^2.7.1 react: ^18.2.0 react-dom: ^18.2.0 react-redux: ^8.0.2 - sharp: ^0.30.6 + sharp: ^0.30.7 typescript: ^4.7.4 languageName: unknown linkType: soft @@ -4074,18 +4004,6 @@ __metadata: languageName: node linkType: hard -"npmlog@npm:^4.0.1": - version: 4.1.2 - resolution: "npmlog@npm:4.1.2" - dependencies: - are-we-there-yet: ~1.1.2 - console-control-strings: ~1.1.0 - gauge: ~2.7.3 - set-blocking: ~2.0.0 - checksum: edbda9f95ec20957a892de1839afc6fb735054c3accf6fbefe767bac9a639fd5cea2baeac6bd2bcd50a85cb54924d57d9886c81c7fbc2332c2ddd19227504192 - languageName: node - linkType: hard - "npmlog@npm:^6.0.0": version: 6.0.2 resolution: "npmlog@npm:6.0.2" @@ -4098,14 +4016,7 @@ __metadata: languageName: node linkType: hard -"number-is-nan@npm:^1.0.0": - version: 1.0.1 - resolution: "number-is-nan@npm:1.0.1" - checksum: 13656bc9aa771b96cef209ffca31c31a03b507ca6862ba7c3f638a283560620d723d52e626d57892c7fff475f4c36ac07f0600f14544692ff595abff214b9ffb - languageName: node - linkType: hard - -"object-assign@npm:^4.1.0, object-assign@npm:^4.1.1": +"object-assign@npm:^4.1.1": version: 4.1.1 resolution: "object-assign@npm:4.1.1" checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f @@ -4331,9 +4242,9 @@ __metadata: languageName: node linkType: hard -"prebuild-install@npm:^7.1.0": - version: 7.1.0 - resolution: "prebuild-install@npm:7.1.0" +"prebuild-install@npm:^7.1.1": + version: 7.1.1 + resolution: "prebuild-install@npm:7.1.1" dependencies: detect-libc: ^2.0.0 expand-template: ^2.0.3 @@ -4342,7 +4253,6 @@ __metadata: mkdirp-classic: ^0.5.3 napi-build-utils: ^1.0.1 node-abi: ^3.3.0 - npmlog: ^4.0.1 pump: ^3.0.0 rc: ^1.2.7 simple-get: ^4.0.0 @@ -4350,7 +4260,7 @@ __metadata: tunnel-agent: ^0.6.0 bin: prebuild-install: bin.js - checksum: 204f2d89c6d6179fa1039036514aa72f7d0b537e421ef72c40840286e318f41489f00f22c6acc725cce6e10d43825b69dcabeaadfc917db781c58cd56fc25f90 + checksum: dbf96d0146b6b5827fc8f67f72074d2e19c69628b9a7a0a17d0fad1bf37e9f06922896972e074197fc00a52eae912993e6ef5a0d471652f561df5cb516f3f467 languageName: node linkType: hard @@ -4370,13 +4280,6 @@ __metadata: languageName: node linkType: hard -"process-nextick-args@npm:~2.0.0": - version: 2.0.1 - resolution: "process-nextick-args@npm:2.0.1" - checksum: 1d38588e520dab7cea67cbbe2efdd86a10cc7a074c09657635e34f035277b59fbb57d09d8638346bf7090f8e8ebc070c96fa5fd183b777fff4f5edff5e9466cf - languageName: node - linkType: hard - "promise-inflight@npm:^1.0.1": version: 1.0.1 resolution: "promise-inflight@npm:1.0.1" @@ -4607,21 +4510,6 @@ __metadata: languageName: node linkType: hard -"readable-stream@npm:^2.0.6": - version: 2.3.7 - resolution: "readable-stream@npm:2.3.7" - dependencies: - core-util-is: ~1.0.0 - inherits: ~2.0.3 - isarray: ~1.0.0 - process-nextick-args: ~2.0.0 - safe-buffer: ~5.1.1 - string_decoder: ~1.1.1 - util-deprecate: ~1.0.1 - checksum: e4920cf7549a60f8aaf694d483a0e61b2a878b969d224f89b3bc788b8d920075132c4b55a7494ee944c7b6a9a0eada28a7f6220d80b0312ece70bbf08eeca755 - languageName: node - linkType: hard - "readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0": version: 3.6.0 resolution: "readable-stream@npm:3.6.0" @@ -4777,7 +4665,7 @@ __metadata: languageName: node linkType: hard -"safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1": +"safe-buffer@npm:~5.1.1": version: 5.1.2 resolution: "safe-buffer@npm:5.1.2" checksum: f2f1f7943ca44a594893a852894055cf619c1fbcb611237fc39e461ae751187e7baf4dc391a72125e0ac4fb2d8c5c0b3c71529622e6a58f46b960211e704903c @@ -4820,27 +4708,27 @@ __metadata: languageName: node linkType: hard -"set-blocking@npm:^2.0.0, set-blocking@npm:~2.0.0": +"set-blocking@npm:^2.0.0": version: 2.0.0 resolution: "set-blocking@npm:2.0.0" checksum: 6e65a05f7cf7ebdf8b7c75b101e18c0b7e3dff4940d480efed8aad3a36a4005140b660fa1d804cb8bce911cac290441dc728084a30504d3516ac2ff7ad607b02 languageName: node linkType: hard -"sharp@npm:^0.30.6": - version: 0.30.6 - resolution: "sharp@npm:0.30.6" +"sharp@npm:^0.30.7": + version: 0.30.7 + resolution: "sharp@npm:0.30.7" dependencies: color: ^4.2.3 detect-libc: ^2.0.1 node-addon-api: ^5.0.0 node-gyp: latest - prebuild-install: ^7.1.0 + prebuild-install: ^7.1.1 semver: ^7.3.7 simple-get: ^4.0.1 tar-fs: ^2.1.1 tunnel-agent: ^0.6.0 - checksum: 2560b5769d78ee660d767e59f6fa56531c448d16383f9700e4ecb8016382104c1bb42991bdd4ea741c0f4d934ea5246c5d602fc5f39062bcc1c2c8786421fd5a + checksum: bbc63ca3c7ea8a5bff32cd77022cfea30e25a03f5bd031e935924bf6cf0e11e3388e8b0e22b3137bf8816aa73407f1e4fbeb190f3a35605c27ffca9f32b91601 languageName: node linkType: hard @@ -4871,7 +4759,7 @@ __metadata: languageName: node linkType: hard -"signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.7": +"signal-exit@npm:^3.0.7": version: 3.0.7 resolution: "signal-exit@npm:3.0.7" checksum: a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318 @@ -4963,17 +4851,6 @@ __metadata: languageName: node linkType: hard -"string-width@npm:^1.0.1": - version: 1.0.2 - resolution: "string-width@npm:1.0.2" - dependencies: - code-point-at: ^1.0.0 - is-fullwidth-code-point: ^1.0.0 - strip-ansi: ^3.0.0 - checksum: 5c79439e95bc3bd7233a332c5f5926ab2ee90b23816ed4faa380ce3b2576d7800b0a5bb15ae88ed28737acc7ea06a518c2eef39142dd727adad0e45c776cd37e - languageName: node - linkType: hard - "string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.2.3": version: 4.2.3 resolution: "string-width@npm:4.2.3" @@ -5052,24 +4929,6 @@ __metadata: languageName: node linkType: hard -"string_decoder@npm:~1.1.1": - version: 1.1.1 - resolution: "string_decoder@npm:1.1.1" - dependencies: - safe-buffer: ~5.1.0 - checksum: 9ab7e56f9d60a28f2be697419917c50cac19f3e8e6c28ef26ed5f4852289fe0de5d6997d29becf59028556f2c62983790c1d9ba1e2a3cc401768ca12d5183a5b - languageName: node - linkType: hard - -"strip-ansi@npm:^3.0.0, strip-ansi@npm:^3.0.1": - version: 3.0.1 - resolution: "strip-ansi@npm:3.0.1" - dependencies: - ansi-regex: ^2.0.0 - checksum: 9b974de611ce5075c70629c00fa98c46144043db92ae17748fb780f706f7a789e9989fd10597b7c2053ae8d1513fd707816a91f1879b2f71e6ac0b6a863db465 - languageName: node - linkType: hard - "strip-ansi@npm:^6.0.1": version: 6.0.1 resolution: "strip-ansi@npm:6.0.1" @@ -5412,7 +5271,7 @@ __metadata: languageName: node linkType: hard -"util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1": +"util-deprecate@npm:^1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" checksum: 474acf1146cb2701fe3b074892217553dfcf9a031280919ba1b8d651a068c9b15d863b7303cb15bd00a862b498e6cf4ad7b4a08fb134edd5a6f7641681cb54a2 @@ -5450,7 +5309,7 @@ __metadata: languageName: node linkType: hard -"wide-align@npm:^1.1.0, wide-align@npm:^1.1.5": +"wide-align@npm:^1.1.5": version: 1.1.5 resolution: "wide-align@npm:1.1.5" dependencies: -- 2.49.1 From 4b34434eaaab9a42f44a514da5923b3e36140193 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 11:26:04 -0500 Subject: [PATCH 28/32] upgrade eslint plugin react & jsx ally --- package.json | 4 +-- yarn.lock | 74 ++++++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 71 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 2711863..cfa5142 100644 --- a/package.json +++ b/package.json @@ -38,8 +38,8 @@ "eslint": "^8.18.0", "eslint-config-next": "^12.1.6", "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-react": "^7.30.0", + "eslint-plugin-jsx-a11y": "^6.6.0", + "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "<4.6.0", "prettier": "^2.7.1", "typescript": "^4.7.4" diff --git a/yarn.lock b/yarn.lock index a9dff8d..a4632ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -78,7 +78,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.9.2": version: 7.18.3 resolution: "@babel/runtime@npm:7.18.3" dependencies: @@ -1821,6 +1821,13 @@ __metadata: languageName: node linkType: hard +"axe-core@npm:^4.4.2": + version: 4.4.2 + resolution: "axe-core@npm:4.4.2" + checksum: 93fbb36c5ac8ab5e67e49678a6f7be0dc799a9f560edd95cca1f0a8183def8c50205972366b9941a3ea2b20224a1fe230e6d87ef38cb6db70472ed1b694febd1 + languageName: node + linkType: hard + "axobject-query@npm:^2.2.0": version: 2.2.0 resolution: "axobject-query@npm:2.2.0" @@ -2148,7 +2155,7 @@ __metadata: languageName: node linkType: hard -"damerau-levenshtein@npm:^1.0.7": +"damerau-levenshtein@npm:^1.0.7, damerau-levenshtein@npm:^1.0.8": version: 1.0.8 resolution: "damerau-levenshtein@npm:1.0.8" checksum: d240b7757544460ae0586a341a53110ab0a61126570ef2d8c731e3eab3f0cb6e488e2609e6a69b46727635de49be20b071688698744417ff1b6c1d7ccd03e0de @@ -2551,6 +2558,29 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-jsx-a11y@npm:^6.6.0": + version: 6.6.0 + resolution: "eslint-plugin-jsx-a11y@npm:6.6.0" + dependencies: + "@babel/runtime": ^7.18.3 + aria-query: ^4.2.2 + array-includes: ^3.1.5 + ast-types-flow: ^0.0.7 + axe-core: ^4.4.2 + axobject-query: ^2.2.0 + damerau-levenshtein: ^1.0.8 + emoji-regex: ^9.2.2 + has: ^1.0.3 + jsx-ast-utils: ^3.3.1 + language-tags: ^1.0.5 + minimatch: ^3.1.2 + semver: ^6.3.0 + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 + checksum: d9da9a3ec71137c12519289c63e71250d5d78d4b7729b84e7e12edf1aad993083f23303d9b62359591b2f8aababb1bbec032cd84f1425e759b11a055e3acd144 + languageName: node + linkType: hard + "eslint-plugin-react-hooks@npm:<4.6.0, eslint-plugin-react-hooks@npm:^4.5.0": version: 4.5.0 resolution: "eslint-plugin-react-hooks@npm:4.5.0" @@ -2560,7 +2590,7 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-react@npm:^7.29.4, eslint-plugin-react@npm:^7.30.0": +"eslint-plugin-react@npm:^7.29.4": version: 7.30.0 resolution: "eslint-plugin-react@npm:7.30.0" dependencies: @@ -2584,6 +2614,30 @@ __metadata: languageName: node linkType: hard +"eslint-plugin-react@npm:^7.30.1": + version: 7.30.1 + resolution: "eslint-plugin-react@npm:7.30.1" + dependencies: + array-includes: ^3.1.5 + array.prototype.flatmap: ^1.3.0 + doctrine: ^2.1.0 + estraverse: ^5.3.0 + jsx-ast-utils: ^2.4.1 || ^3.0.0 + minimatch: ^3.1.2 + object.entries: ^1.1.5 + object.fromentries: ^2.0.5 + object.hasown: ^1.1.1 + object.values: ^1.1.5 + prop-types: ^15.8.1 + resolve: ^2.0.0-next.3 + semver: ^6.3.0 + string.prototype.matchall: ^4.0.7 + peerDependencies: + eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 + checksum: 553fb9ece6beb7c14cf6f84670c786c8ac978c2918421994dcc4edd2385302022e5d5ac4a39fafdb35954e29cecddefed61758040c3c530cafcf651f674a9d51 + languageName: node + linkType: hard + "eslint-scope@npm:^5.1.1": version: 5.1.1 resolution: "eslint-scope@npm:5.1.1" @@ -3551,6 +3605,16 @@ __metadata: languageName: node linkType: hard +"jsx-ast-utils@npm:^3.3.1": + version: 3.3.1 + resolution: "jsx-ast-utils@npm:3.3.1" + dependencies: + array-includes: ^3.1.5 + object.assign: ^4.1.2 + checksum: 1d4b32fd24bbba561d5ca5c8d6ea095be646f83fc357d6f0cd2752f97f3ba0e0ffabc2f54b37a9d98258fc8ec0e1286cb7723cc1c9dc7af402d74fff72ae0a2b + languageName: node + linkType: hard + "language-subtag-registry@npm:~0.3.2": version: 0.3.21 resolution: "language-subtag-registry@npm:0.3.21" @@ -3666,8 +3730,8 @@ __metadata: eslint: ^8.18.0 eslint-config-next: ^12.1.6 eslint-config-prettier: ^8.5.0 - eslint-plugin-jsx-a11y: ^6.5.1 - eslint-plugin-react: ^7.30.0 + eslint-plugin-jsx-a11y: ^6.6.0 + eslint-plugin-react: ^7.30.1 eslint-plugin-react-hooks: <4.6.0 formik: ^2.2.9 framer-motion: ^6.3.15 -- 2.49.1 From 91580ee491df35e3001d5254eed2d938f0fc973c Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 11:35:36 -0500 Subject: [PATCH 29/32] upgrade typescript eslint plugin --- package.json | 2 +- yarn.lock | 82 ++++++++++++++++++++++++++-------------------------- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index cfa5142..f870009 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@types/node": "^18.0.0", "@types/react": "^18.0.14", "@types/react-redux": "^7.1.24", - "@typescript-eslint/eslint-plugin": "<5.28.0", + "@typescript-eslint/eslint-plugin": "^5.29.0", "eslint": "^8.18.0", "eslint-config-next": "^12.1.6", "eslint-config-prettier": "^8.5.0", diff --git a/yarn.lock b/yarn.lock index a4632ba..d551a46 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1446,13 +1446,13 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/eslint-plugin@npm:<5.28.0": - version: 5.27.1 - resolution: "@typescript-eslint/eslint-plugin@npm:5.27.1" +"@typescript-eslint/eslint-plugin@npm:^5.29.0": + version: 5.29.0 + resolution: "@typescript-eslint/eslint-plugin@npm:5.29.0" dependencies: - "@typescript-eslint/scope-manager": 5.27.1 - "@typescript-eslint/type-utils": 5.27.1 - "@typescript-eslint/utils": 5.27.1 + "@typescript-eslint/scope-manager": 5.29.0 + "@typescript-eslint/type-utils": 5.29.0 + "@typescript-eslint/utils": 5.29.0 debug: ^4.3.4 functional-red-black-tree: ^1.0.1 ignore: ^5.2.0 @@ -1465,7 +1465,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: ee00d8d3a7b395e346801b7bf30209e278f06b5c283ad71c03b34db9e2d68a43ca0e292e315fa7e5bf131a8839ff4a24e0ed76c37811d230f97aae7e123d73ea + checksum: b1022a640f80c314ac8b247a2ccdd21f4b523b3cb8906956f5d276008ac964c8a1e951b2b2b16ca9621eb795dc9bbf6447b5b767acfe4866a1bc3e3527d966fc languageName: node linkType: hard @@ -1496,21 +1496,21 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:5.27.1": - version: 5.27.1 - resolution: "@typescript-eslint/scope-manager@npm:5.27.1" +"@typescript-eslint/scope-manager@npm:5.29.0": + version: 5.29.0 + resolution: "@typescript-eslint/scope-manager@npm:5.29.0" dependencies: - "@typescript-eslint/types": 5.27.1 - "@typescript-eslint/visitor-keys": 5.27.1 - checksum: 401bf2b46de08ddb80ec9f36df7d58bf5de7837185a472b190b670d421d685743aad4c9fa8a6893f65ba933b822c5d7060c640e87cf0756d7aa56abdd25689cc + "@typescript-eslint/types": 5.29.0 + "@typescript-eslint/visitor-keys": 5.29.0 + checksum: 540642bef9c55fd7692af98dfb42ab99eeb82553f42ab2a3c4e132e02b5ba492da1c6bf1ca6b02b900a678fc74399ad6c564c0ca20d91032090b6cbcb01a5bde languageName: node linkType: hard -"@typescript-eslint/type-utils@npm:5.27.1": - version: 5.27.1 - resolution: "@typescript-eslint/type-utils@npm:5.27.1" +"@typescript-eslint/type-utils@npm:5.29.0": + version: 5.29.0 + resolution: "@typescript-eslint/type-utils@npm:5.29.0" dependencies: - "@typescript-eslint/utils": 5.27.1 + "@typescript-eslint/utils": 5.29.0 debug: ^4.3.4 tsutils: ^3.21.0 peerDependencies: @@ -1518,7 +1518,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 43b7da26ea1bd7d249c45d168ec88f971fb71362bbc21ec4748d73b1ecb43f4ca59f5ed338e8dbc74272ae4ebac1cab87a9b62c0fa616c6f9bd833a212dc8a40 + checksum: 686b8ff05a7591f76a2a1d3746b988168dcbd59c2f52de095b19e4f8e17063e03dc3d0f7b3d84f7be6880f2df97c3e184877664d0b4275ea9871c31d1e58c7d2 languageName: node linkType: hard @@ -1529,10 +1529,10 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/types@npm:5.27.1": - version: 5.27.1 - resolution: "@typescript-eslint/types@npm:5.27.1" - checksum: 81faa50256ba67c23221273744c51676774fe6a1583698c3a542f3e2fd21ab34a4399019527c9cf7ab4e5a1577272f091d5848d3af937232ddb2dbf558a7c39a +"@typescript-eslint/types@npm:5.29.0": + version: 5.29.0 + resolution: "@typescript-eslint/types@npm:5.29.0" + checksum: 982ecdd69103105cabff8deac7f82f6002cf909238702ce902133e9af655cd962f977d5adf650c5ddae80d8c0e46abe1612a9141b25c7ed20ba8d662eb7ab871 languageName: node linkType: hard @@ -1554,12 +1554,12 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:5.27.1": - version: 5.27.1 - resolution: "@typescript-eslint/typescript-estree@npm:5.27.1" +"@typescript-eslint/typescript-estree@npm:5.29.0": + version: 5.29.0 + resolution: "@typescript-eslint/typescript-estree@npm:5.29.0" dependencies: - "@typescript-eslint/types": 5.27.1 - "@typescript-eslint/visitor-keys": 5.27.1 + "@typescript-eslint/types": 5.29.0 + "@typescript-eslint/visitor-keys": 5.29.0 debug: ^4.3.4 globby: ^11.1.0 is-glob: ^4.0.3 @@ -1568,23 +1568,23 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 59d2a0885be7d54bd86472a446d84930cc52d2690ea432d9164075ea437b3b4206dadd49799764ad0fb68f3e4ebb4e36db9717c7a443d0f3c82d5659e41fbd05 + checksum: b91107a9fc31bf511aaa70f1e6d1d832d3acf08cfe999c870169447a7c223abff54c1d604bbb08d7c069dd98b43fb279bc314d1726097704fe8ad4c6e0969b12 languageName: node linkType: hard -"@typescript-eslint/utils@npm:5.27.1": - version: 5.27.1 - resolution: "@typescript-eslint/utils@npm:5.27.1" +"@typescript-eslint/utils@npm:5.29.0": + version: 5.29.0 + resolution: "@typescript-eslint/utils@npm:5.29.0" dependencies: "@types/json-schema": ^7.0.9 - "@typescript-eslint/scope-manager": 5.27.1 - "@typescript-eslint/types": 5.27.1 - "@typescript-eslint/typescript-estree": 5.27.1 + "@typescript-eslint/scope-manager": 5.29.0 + "@typescript-eslint/types": 5.29.0 + "@typescript-eslint/typescript-estree": 5.29.0 eslint-scope: ^5.1.1 eslint-utils: ^3.0.0 peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 - checksum: 51add038226cddad2b3322225de18d53bc1ed44613f7b3a379eb597114b8830a632990b0f4321e0ddf3502b460d80072d7e789be89135b5e11e8dae167005625 + checksum: 216f51fb9c176437919af55db9ed14db8af7b020611e954c06e69956b9e3248cbfe6a218013d6c17b716116dca6566a4c03710f9b48ce4e94f89312d61c16d07 languageName: node linkType: hard @@ -1598,13 +1598,13 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/visitor-keys@npm:5.27.1": - version: 5.27.1 - resolution: "@typescript-eslint/visitor-keys@npm:5.27.1" +"@typescript-eslint/visitor-keys@npm:5.29.0": + version: 5.29.0 + resolution: "@typescript-eslint/visitor-keys@npm:5.29.0" dependencies: - "@typescript-eslint/types": 5.27.1 + "@typescript-eslint/types": 5.29.0 eslint-visitor-keys: ^3.3.0 - checksum: 8f104eda321cd6c613daf284fbebbd32b149d4213d137b0ce1caec7a1334c9f46c82ed64aff1243b712ac8c13f67ac344c996cd36d21fbb15032c24d9897a64a + checksum: 15f228ad9ffaf0e42cc6b2ee4e5095c1e89c4c2dc46a65d19ca0e2296d88c08a1192039d942bd9600b1496176749f6322d636dd307602dbab90404a9501b4d6e languageName: node linkType: hard @@ -3725,7 +3725,7 @@ __metadata: "@types/node": ^18.0.0 "@types/react": ^18.0.14 "@types/react-redux": ^7.1.24 - "@typescript-eslint/eslint-plugin": <5.28.0 + "@typescript-eslint/eslint-plugin": ^5.29.0 date-fns: ^2.28.0 eslint: ^8.18.0 eslint-config-next: ^12.1.6 -- 2.49.1 From d83e05e85d122e629eb039dc442e4aa3ab90f95f Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 11:46:26 -0500 Subject: [PATCH 30/32] Update metadata desc. --- src/pages/_document.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 2cd6a9f..dad86fb 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -5,7 +5,7 @@ import AppTheme from "../theme/AppTheme"; const description = // "Behavior and progress tracker for ABDLs and babyfurs alike. Track multiple littles and create any trackers you would like."; - "Alpha preview of a, calender like, 'start chart' behavior and progress tracker for ABDLs and babyfurs."; + "Beta preview of a, calender like, 'star chart' behavior and progress tracker for ABDLs, diaperfurs, and babyfurs."; const logo = "images/logo.svg"; const logoOG = "/images/logo.png"; -- 2.49.1 From a9c48ee10fa60f2edb98829d24e6dc8eedb29a89 Mon Sep 17 00:00:00 2001 From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com> Date: Fri, 24 Jun 2022 11:59:14 -0500 Subject: [PATCH 31/32] Fixed heading of componenet. --- src/components/tutorial/sections/TutorialAppFunctionality.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tutorial/sections/TutorialAppFunctionality.tsx b/src/components/tutorial/sections/TutorialAppFunctionality.tsx index a457fc5..c4f5b1c 100644 --- a/src/components/tutorial/sections/TutorialAppFunctionality.tsx +++ b/src/components/tutorial/sections/TutorialAppFunctionality.tsx @@ -12,7 +12,7 @@ const TutorialAppFunctionality = (): JSX.Element => { spacing={4} > - {"About the App"} + {"App Functionality"} Date: Fri, 24 Jun 2022 12:12:19 -0500 Subject: [PATCH 32/32] Fixed about app descriptions. --- src/components/tutorial/data/aboutApp.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/tutorial/data/aboutApp.ts b/src/components/tutorial/data/aboutApp.ts index faf4606..1851980 100644 --- a/src/components/tutorial/data/aboutApp.ts +++ b/src/components/tutorial/data/aboutApp.ts @@ -1,10 +1,10 @@ type AboutApp = string[]; const aboutApp: AboutApp = [ - "An app that mimics a potty/star chart for a potty training toddler or child.", - "It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way.", - "The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship.", - "This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely." + "The Potty Chart is app that mimics a potty/star chart commonly used while potty training toddler or child.", + "The app can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way with colorful themes, stickers, and even receive encouraging messaged from your big/dom, followed, and friends.", + "The final app will have settings to disable any mentions and references of ABDL to allow a more general audience to use, such as for a master and pet relationship.", + "This is a beta build of the app. Some functionality may not work as intended, is not fully functional, and may be missing entirely." ]; export default aboutApp; -- 2.49.1