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] 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) } }),