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

Tutorial complete. Need to add more states and functions into redux.

Browse Source
This commit is contained in:
Lucid Kobold
2022-06-22 14:35:49 -05:00
parent ba4823334e
commit 5ccb5abe94
7 changed files with 323 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/calender/DatePicker.tsx
View File

@@ -189,7 +189,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
>
<VStack
alignItems="center"
alignContent="flex=start"
alignContent="flex-start"
w="100%"
h="auto"
spacing={6}

248
src/components/calender/Day.tsx
View File

@@ -6,10 +6,11 @@ import {
sub,
getDate,
isBefore,
endOfDay
endOfDay,
isToday as isTodayFun
} from "date-fns";
import router from "next/router";
import React, { Fragment, useState } from "react";
import React, { useState } from "react";
import AddUpdateSticker from "./modals/AddUpdateSticker";
import DemoStickers from "./stickers/DemoStickers";
import { Provider } from "react-redux";
@@ -23,7 +24,7 @@ interface DayProps {
date: string;
selectedDate: string;
currDate: Date;
isToday: boolean;
tutorial?: "add" | "edit";
}
/**
@@ -35,7 +36,6 @@ interface DayProps {
* @param {date} date the date for this day.
* @param {date} selectedDate the date for the selected month.
* @param {Date} currDate today's date.
* @param {boolean} isToday is the current iteration of this component in today's date.
*/
const Day = ({
isLoading,
@@ -45,10 +45,11 @@ const Day = ({
date,
selectedDate,
currDate,
isToday
tutorial
}: DayProps): 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 (
<Fragment>
{isOverflow && (
<VStack
bg="transparent"
color="gray.600"
border="1px solid #181d8f"
w="100%"
h="100%"
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
: "default",
background: "gray.700",
border: "1px solid #FFF",
color: "whiteAlpha.900"
}}
onClick={() => handleNav(overflowDirection)}
spacing="0.5rem"
alignContent="center"
justifyContent="flex-start"
pt={2}
>
<Text w="auto" h="auto">
{`${getDate(currDateObj)}`}
</Text>
{isLoading ? (
<Skeleton key={currSticker}>
<Box fontSize="1.5rem">
<DemoStickers stickerVal={0} />
</Box>
</Skeleton>
) : (
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</Box>
)}
</VStack>
return isOverflow ? (
<VStack
bg="transparent"
color="gray.600"
border="1px solid #181d8f"
w="100%"
h="100%"
_hover={{
cursor: isBefore(currDateObj, endOfDay(currDate))
? "pointer"
: "default",
background: "gray.700",
border: "1px solid #FFF",
color: "whiteAlpha.900"
}}
onClick={() => handleNav(overflowDirection)}
spacing="0.5rem"
alignContent="center"
justifyContent="flex-start"
pt={2}
>
<Text w="auto" h="auto">
{`${getDate(currDateObj)}`}
</Text>
{isLoading ? (
<Skeleton key={currSticker}>
<Box fontSize="1.5rem">
<DemoStickers stickerVal={0} />
</Box>
</Skeleton>
) : (
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</Box>
)}
{!isOverflow && (
<VStack
bg="transparent"
border="1px solid #0068ff"
w="100%"
h="100%"
onClick={() => {
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"
}}
>
<Text
p={
isToday
? getDate(currDateObj) > 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)}`}
</Text>
{isLoading ? (
<Skeleton key={currSticker}>
<Box fontSize="1.5rem">
<DemoStickers stickerVal={0} />
</Box>
</Skeleton>
) : (
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</Box>
</VStack>
) : (
<VStack
bg={
tutorial
? tutorial === "add" && isToday
? "gray.600"
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "gray.600"
: "transparent"
: "transparent"
}
border={
tutorial
? tutorial === "add" && isToday
? "1px solid #00ff3c"
: tutorial === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate))
? "1px solid #00ff3c"
: "1px solid #0068ff"
: "1px solid #0068ff"
}
w="100%"
h="100%"
onClick={() => {
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"
}}
>
<Text
p={
isToday
? getDate(currDateObj) > 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)}`}
</Text>
{isLoading ? (
<Skeleton key={currSticker}>
<Box fontSize="1.5rem">
<DemoStickers stickerVal={0} />
</Box>
</Skeleton>
) : (
<Box key={currSticker} fontSize="1.5rem">
<DemoStickers stickerVal={currSticker} />
</Box>
)}
{tutorial ? (
<Provider store={store}>
{tutorial.toLowerCase() === "add" && isToday && !isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
currSticker={currSticker}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
updateSelectedSticker={setSelectedSticker}
currDate={currDate}
/>
)}
<Provider store={store}>
{isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
{tutorial.toLowerCase() === "edit" &&
!isToday &&
isBefore(currDateObj, endOfDay(currDate)) &&
!isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
@@ -188,10 +231,25 @@ const Day = ({
currDate={currDate}
/>
)}
</Provider>
</VStack>
</Provider>
) : (
<Provider store={store}>
{isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
<AddUpdateSticker
stickerDate={date}
isOpen={isOpen}
updateIsOpen={setIsOpen}
currSticker={currSticker}
step={step}
updateStep={setStep}
selectedSticker={selectedSticker}
updateSelectedSticker={setSelectedSticker}
currDate={currDate}
/>
)}
</Provider>
)}
</Fragment>
</VStack>
);
};

6
src/components/calender/index.tsx
View File

@@ -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 (
<VStack h="91vh" w="100%">
<VStack h="92vh" w="100%" mb="5vh">
<CalenderNav title={title} isLoading={isLoading} />
<VStack h="100%" w="100%" spacing={0}>
<HStack
@@ -139,12 +138,11 @@ const Calender = ({
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
isToday={isSameDay(currDateObj, toDateObj)}
key={
id.length
? id
: format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
`/${sticker === null ? 0 : sticker}`
}
/>
);

23
src/components/tutorial/CalenderExample.tsx
View File

@@ -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<MonthDay[]>(getCurrentWeek());
const [currWeek /*, setCurrWeek*/] = useState<MonthDay[]>(getCurrentWeek());
console.info(currWeek);
return (
<VStack h="100%" w="100%" spacing={0}>
<VStack h="8.5rem" w="100%" spacing={0}>
<HStack
px={6}
spacing={0}
@@ -141,17 +139,16 @@ const CalenderExample = ({
date={date}
selectedDate={selectedDate.date}
currDate={currDateObj}
isToday={isSameDay(currDateObj, toDateObj)}
tutorial={type}
key={
id.length
? id
: format(toDateObj, "yyyyddLL") +
`/${sticker === null ? 0 : sticker}`
`/${sticker === null ? 0 : sticker}`
}
/>
);
})
}
})}
</SimpleGrid>
</VStack>
);

179
src/components/tutorial/index.tsx
View File

@@ -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<boolean>(false);
const handleComplete = (): void => {
if (rememberComplete) {
setTutorialComplete();
}
if (!rememberComplete) {
setTempTutorialComplete();
}
};
const handleSkip = (): void => {
setTempTutorialComplete();
};
const handleUpdateCheck = (): void => {
setRememberComplete(!rememberComplete);
};
return (
<Box>
<VStack
@@ -42,7 +71,7 @@ const Tutorial = ({
<Heading as="h3" size="md">
{"A Lucid Creations Media Project"}
</Heading>
<Divider orientation='horizontal' />
<Divider orientation="horizontal" />
</VStack>
{/* About the app container */}
<VStack
@@ -62,14 +91,29 @@ const Tutorial = ({
alignContent="center"
spacing={0}
>
<Text>{"An app that mimics a potty/star chart for a potty training toddler or child."}</Text>
<Text>{"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."}</Text>
<Text>{"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."}</Text>
<Text>{"This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."}</Text>
<Text>
{
"An app that mimics a potty/star chart for a potty training toddler or child."
}
</Text>
<Text>
{
"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."
}
</Text>
<Text>
{
"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."
}
</Text>
<Text>
{
"This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."
}
</Text>
</VStack>
</VStack>
<Divider orientation='horizontal' />
<Divider orientation="horizontal" />
</VStack>
{/* Functionality of the app */}
<VStack
@@ -79,7 +123,7 @@ const Tutorial = ({
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg" >
<Heading as="h3" size="lg">
{"Current Functionality"}
</Heading>
<VStack
@@ -89,38 +133,111 @@ const Tutorial = ({
alignContent="center"
spacing={2}
>
<Text>{"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."}</Text>
<Text>
{
"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."
}
</Text>
<Text>{"Ability to add a sticker to the current date."}</Text>
<Text>{"Ability to add edit a sticker from a previous date with a confirmation prompt."}</Text>
<Text>
{
"Ability to add edit a sticker from a previous date with a confirmation prompt."
}
</Text>
</VStack>
<Divider orientation='horizontal' />
<Divider orientation="horizontal" />
</VStack>
{/* Calender Examples Here */}
<Heading>{"Calender examples here"}</Heading>
<CalenderExample type={"add"} />
<CalenderExample type={"edit"} />
{/* Complete Tutorial buttons */}
{/* Calender Demos */}
<VStack
h="auto"
w="100%"
justifyContent="center"
alignContent="center"
spacing={4}
>
<Heading as="h3" size="lg">
{"How to Use The Calender"}
</Heading>
<VStack
h="auto"
w="100%"
justifyContent="start"
alignContent="center"
spacing={4}
>
<Heading as="h4" size="md">
{"Add a Sticker to Today's Date"}
</Heading>
<HStack
w="100%"
h="auto"
alignContent="center"
justifyContent="center"
spacing={1}
>
<Text>{"Select the date with a"}</Text>
<Text color="#00ff3c">{" green "}</Text>
<Text>{"border."}</Text>
</HStack>
<CalenderExample type={"add"} />
</VStack>
<VStack
h="auto"
w="100%"
justifyContent="start"
alignContent="center"
spacing={4}
>
<Heading as="h4" size="md">
{"Add a Sticker to Previous Dates"}
</Heading>
<HStack
w="100%"
h="auto"
alignContent="center"
justifyContent="center"
spacing={1}
>
<Text>{"Select a date with a"}</Text>
<Text color="#00ff3c">{" green "}</Text>
<Text>{"border."}</Text>
</HStack>
<CalenderExample type={"edit"} />
</VStack>
<Divider orientation="horizontal" />
</VStack>
{/* Complete tutorial */}
<HStack
h="auto"
w="80%"
justifyContent="space-between"
alignContent="center"
alignItems="flex-start"
pt={8}
>
<Button
type="button"
onClick={() => setTutorialComplete()}
variant="secondary"
>
{"Complete Tutorial (remember)"}
<Button type="button" onClick={() => handleSkip()} variant="skip">
{"Skip"}
</Button>
<Button
type="button"
onClick={() => setTempTutorialComplete()}
variant="primary"
<VStack
h="auto"
w="auto"
justifyContent="center"
alignItems="center"
spacing={2}
>
{"Complete Tutorial"}
</Button>
<Button
type="button"
onClick={() => handleComplete()}
variant="primary"
>
{"Complete Tutorial"}
</Button>
<Checkbox
isChecked={rememberComplete}
onChange={() => handleUpdateCheck()}
>
{"Remember completed?"}
</Checkbox>
</VStack>
</HStack>
</VStack>
</Box>

9
src/pages/index.tsx
View File

@@ -52,14 +52,7 @@ const IndexPage = (): JSX.Element => {
}, [completedTutorial, dispatch, tutorialCompletionInfo]);
return (
<Box
textAlign="center"
w="100%"
h="auto"
pt="50px"
// pb="10vh"
minWidth="min-content"
>
<Box textAlign="center" w="100%" h="auto" pt="50px" minWidth="min-content">
<Provider store={store}>
{isLoading === true ? (
<Fragment>

8
src/theme/components/buttonStyles.ts
View File

@@ -36,6 +36,14 @@ const buttonStyles = {
)(props)
}
}),
skip: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "xl",
p: "2",
_hover: {
bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props)
}
}),
stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
bg: "transparent",
fontSize: "4rem",