Tutorial #62
@@ -16,10 +16,6 @@ const CalenderExample = ({
|
|||||||
}: CalenderExampleProps): JSX.Element => {
|
}: 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: 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(
|
const currDateStr: string = useAppSelector(
|
||||||
(state) => state.calender.currDate
|
(state) => state.calender.currDate
|
||||||
);
|
);
|
||||||
|
|||||||
10
src/components/tutorial/data/aboutApp.ts
Normal file
10
src/components/tutorial/data/aboutApp.ts
Normal file
@@ -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;
|
||||||
9
src/components/tutorial/data/appFunctionality.ts
Normal file
9
src/components/tutorial/data/appFunctionality.ts
Normal file
@@ -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;
|
||||||
28
src/components/tutorial/data/links.ts
Normal file
28
src/components/tutorial/data/links.ts
Normal file
@@ -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;
|
||||||
@@ -1,312 +1,40 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
import { VStack } from "@chakra-ui/react";
|
||||||
import { toggleRememberCompleted } from "../../features/tutorial";
|
import TutorialCalender from "./sections/TutorialCalender";
|
||||||
import {
|
import TutorialLinks from "./sections/TutorialLinks";
|
||||||
Box,
|
import TutorialHeading from "./sections/TutorialHeading";
|
||||||
Button,
|
import TutorialAboutApp from "./sections/TutorialAboutApp";
|
||||||
Checkbox,
|
import TutorialSubmitButtons from "./sections/TutorialSubmitButtons";
|
||||||
Divider,
|
import TutorialAppFunctionality from "./sections/TutorialAppFunctionality";
|
||||||
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";
|
|
||||||
|
|
||||||
interface TutorialProps {
|
interface TutorialProps {
|
||||||
setTutorialComplete: () => void;
|
|
||||||
setTempTutorialComplete: () => void;
|
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Tutorial = ({
|
const Tutorial = ({ isLoading }: TutorialProps): JSX.Element => {
|
||||||
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());
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO: Add an expiration validator.
|
// TODO: Add an expiration validator.
|
||||||
// TODO: Add a version validator that removed the completed tutorial storages when there were major changes to the tutorial.
|
// 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.
|
// * 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 (
|
return (
|
||||||
<Box>
|
<VStack
|
||||||
<VStack
|
h="auto"
|
||||||
h="auto"
|
w="auto"
|
||||||
w="auto"
|
justifyContent="center"
|
||||||
justifyContent="center"
|
alignContent="center"
|
||||||
alignContent="center"
|
my={8}
|
||||||
my={8}
|
mx={{ base: 0, sm: 2, md: 4 }}
|
||||||
mx={{ base: 0, sm: 2, md: 4 }}
|
py={4}
|
||||||
py={4}
|
px={{ base: 0, sm: 2, md: 4 }}
|
||||||
px={{ base: 0, sm: 2, md: 4 }}
|
bg="gray.700"
|
||||||
bg="gray.700"
|
>
|
||||||
>
|
<TutorialHeading />
|
||||||
<VStack
|
<TutorialAboutApp />
|
||||||
h="auto"
|
<TutorialAppFunctionality />
|
||||||
w="100%"
|
<TutorialCalender isLoading={isLoading} />
|
||||||
justifyContent="center"
|
<TutorialLinks />
|
||||||
alignContent="center"
|
<TutorialSubmitButtons isLoading={isLoading} />
|
||||||
spacing={2}
|
</VStack>
|
||||||
>
|
|
||||||
{/* The Heading Container */}
|
|
||||||
<VStack
|
|
||||||
h="auto"
|
|
||||||
w="100%"
|
|
||||||
justifyContent="center"
|
|
||||||
alignContent="center"
|
|
||||||
spacing={4}
|
|
||||||
>
|
|
||||||
<Heading as="h2">{"Welcome to Code Name: LCM Potty Chart"}</Heading>
|
|
||||||
<Heading as="h3" size="md">
|
|
||||||
{"A Lucid Creations Media Project"}
|
|
||||||
</Heading>
|
|
||||||
<Divider orientation="horizontal" />
|
|
||||||
</VStack>
|
|
||||||
{/* About the app container */}
|
|
||||||
<VStack
|
|
||||||
h="auto"
|
|
||||||
w="100%"
|
|
||||||
justifyContent="center"
|
|
||||||
alignContent="center"
|
|
||||||
spacing={4}
|
|
||||||
>
|
|
||||||
<Heading as="h3" size="lg">
|
|
||||||
{"About the App"}
|
|
||||||
</Heading>
|
|
||||||
<VStack
|
|
||||||
h="auto"
|
|
||||||
w="100%"
|
|
||||||
justifyContent="start"
|
|
||||||
alignContent="center"
|
|
||||||
spacing={1}
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
</VStack>
|
|
||||||
{/* Functionality of the app */}
|
|
||||||
<VStack
|
|
||||||
h="auto"
|
|
||||||
w="100%"
|
|
||||||
justifyContent="center"
|
|
||||||
alignContent="center"
|
|
||||||
spacing={4}
|
|
||||||
>
|
|
||||||
<Heading as="h3" size="lg">
|
|
||||||
{"Current Functionality"}
|
|
||||||
</Heading>
|
|
||||||
<VStack
|
|
||||||
h="auto"
|
|
||||||
w="100%"
|
|
||||||
justifyContent="center"
|
|
||||||
alignItems="center"
|
|
||||||
alignContent="center"
|
|
||||||
spacing={1}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</VStack>
|
|
||||||
<Divider orientation="horizontal" />
|
|
||||||
</VStack>
|
|
||||||
{/* 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="center"
|
|
||||||
alignItems="center"
|
|
||||||
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="center"
|
|
||||||
alignItems="center"
|
|
||||||
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>
|
|
||||||
{/* Links */}
|
|
||||||
<VStack
|
|
||||||
h="auto"
|
|
||||||
w="100%"
|
|
||||||
justifyContent="center"
|
|
||||||
alignContent="center"
|
|
||||||
spacing={4}
|
|
||||||
>
|
|
||||||
<Heading as="h3" size="lg">
|
|
||||||
{"More Info"}
|
|
||||||
</Heading>
|
|
||||||
<HStack
|
|
||||||
h="auto"
|
|
||||||
w="100%"
|
|
||||||
justifyContent="center"
|
|
||||||
alignContent="center"
|
|
||||||
spacing={4}
|
|
||||||
>
|
|
||||||
<CustomButton
|
|
||||||
link={
|
|
||||||
"https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y"
|
|
||||||
}
|
|
||||||
text="Roadmap and Progress"
|
|
||||||
type="secondary"
|
|
||||||
/>
|
|
||||||
<CustomButton
|
|
||||||
link={
|
|
||||||
"https://lucidcreations.media/introducing-code-name-potty-chart/"
|
|
||||||
}
|
|
||||||
text="Original Announcement"
|
|
||||||
type="secondary"
|
|
||||||
/>
|
|
||||||
<Patreon />
|
|
||||||
<Twitter />
|
|
||||||
</HStack>
|
|
||||||
<Divider orientation="horizontal" />
|
|
||||||
</VStack>
|
|
||||||
{/* Complete tutorial */}
|
|
||||||
<HStack
|
|
||||||
h="auto"
|
|
||||||
w="80%"
|
|
||||||
justifyContent="space-between"
|
|
||||||
alignItems="flex-start"
|
|
||||||
pt={8}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
isDisabled={isLoading}
|
|
||||||
onClick={() => handleSkip()}
|
|
||||||
variant="skip"
|
|
||||||
>
|
|
||||||
{"Skip"}
|
|
||||||
</Button>
|
|
||||||
<VStack
|
|
||||||
h="auto"
|
|
||||||
w="auto"
|
|
||||||
justifyContent="center"
|
|
||||||
alignItems="center"
|
|
||||||
spacing={2}
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
isDisabled={isLoading}
|
|
||||||
onClick={() => handleComplete()}
|
|
||||||
variant="primary"
|
|
||||||
>
|
|
||||||
{"Complete Tutorial"}
|
|
||||||
</Button>
|
|
||||||
<Checkbox
|
|
||||||
isChecked={rememberComplete}
|
|
||||||
isDisabled={isLoading}
|
|
||||||
onChange={() => handleUpdateCheck()}
|
|
||||||
>
|
|
||||||
{"Remember completed?"}
|
|
||||||
</Checkbox>
|
|
||||||
</VStack>
|
|
||||||
</HStack>
|
|
||||||
</VStack>
|
|
||||||
</Box>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
33
src/components/tutorial/sections/TutorialAboutApp.tsx
Normal file
33
src/components/tutorial/sections/TutorialAboutApp.tsx
Normal file
@@ -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 (
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
justifyContent="center"
|
||||||
|
alignContent="center"
|
||||||
|
spacing={4}
|
||||||
|
>
|
||||||
|
<Heading as="h3" size="lg">
|
||||||
|
{"About the App"}
|
||||||
|
</Heading>
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
justifyContent="start"
|
||||||
|
alignContent="center"
|
||||||
|
spacing={1}
|
||||||
|
>
|
||||||
|
{aboutApp.map((string: string) => {
|
||||||
|
return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
|
||||||
|
})}
|
||||||
|
</VStack>
|
||||||
|
<Divider orientation="horizontal" />
|
||||||
|
</VStack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TutorialAboutApp;
|
||||||
@@ -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 (
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
justifyContent="center"
|
||||||
|
alignContent="center"
|
||||||
|
spacing={4}
|
||||||
|
>
|
||||||
|
<Heading as="h3" size="lg">
|
||||||
|
{"About the App"}
|
||||||
|
</Heading>
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
justifyContent="start"
|
||||||
|
alignContent="center"
|
||||||
|
spacing={1}
|
||||||
|
>
|
||||||
|
{appFunctionality.map((string: string) => {
|
||||||
|
return <Text key={string.replaceAll(" ", "-")}>{string}</Text>;
|
||||||
|
})}
|
||||||
|
</VStack>
|
||||||
|
<Divider orientation="horizontal" />
|
||||||
|
</VStack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TutorialAppFunctionality;
|
||||||
74
src/components/tutorial/sections/TutorialCalender.tsx
Normal file
74
src/components/tutorial/sections/TutorialCalender.tsx
Normal file
@@ -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 (
|
||||||
|
<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="center"
|
||||||
|
alignItems="center"
|
||||||
|
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"} isLoading={isLoading} />
|
||||||
|
</VStack>
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
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"} isLoading={isLoading} />
|
||||||
|
</VStack>
|
||||||
|
<Divider orientation="horizontal" />
|
||||||
|
</VStack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TutorialCalender;
|
||||||
22
src/components/tutorial/sections/TutorialHeading.tsx
Normal file
22
src/components/tutorial/sections/TutorialHeading.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { VStack, Heading, Divider } from "@chakra-ui/react";
|
||||||
|
|
||||||
|
const TutorialHeading = (): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
justifyContent="center"
|
||||||
|
alignContent="center"
|
||||||
|
spacing={4}
|
||||||
|
>
|
||||||
|
<Heading as="h2">{"Welcome to Code Name: LCM Potty Chart"}</Heading>
|
||||||
|
<Heading as="h3" size="md">
|
||||||
|
{"A Lucid Creations Media Project"}
|
||||||
|
</Heading>
|
||||||
|
<Divider orientation="horizontal" />
|
||||||
|
</VStack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TutorialHeading;
|
||||||
73
src/components/tutorial/sections/TutorialLinks.tsx
Normal file
73
src/components/tutorial/sections/TutorialLinks.tsx
Normal file
@@ -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 (
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
justifyContent="center"
|
||||||
|
alignContent="center"
|
||||||
|
spacing={4}
|
||||||
|
>
|
||||||
|
<Heading as="h3" size="lg">
|
||||||
|
{"More Info"}
|
||||||
|
</Heading>
|
||||||
|
<HStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
display={{ base: "none", lg: "flex" }}
|
||||||
|
justifyContent="center"
|
||||||
|
alignContent="center"
|
||||||
|
spacing={4}
|
||||||
|
>
|
||||||
|
{links.map((link: LinkObj) => {
|
||||||
|
const { href, name, type } = link;
|
||||||
|
|
||||||
|
if (type === "primary" || type === "secondary") {
|
||||||
|
return <CustomButton link={href} text={name} type={type} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "patreon") {
|
||||||
|
return <Patreon />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "twitter") {
|
||||||
|
return <Twitter />;
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</HStack>
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="100%"
|
||||||
|
display={{ base: "flex", lg: "none" }}
|
||||||
|
justifyContent="center"
|
||||||
|
alignContent="center"
|
||||||
|
spacing={4}
|
||||||
|
>
|
||||||
|
{links.map((link: LinkObj) => {
|
||||||
|
const { href, name, type } = link;
|
||||||
|
|
||||||
|
if (type === "primary" || type === "secondary") {
|
||||||
|
return <CustomButton link={href} text={name} type={type} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "patreon") {
|
||||||
|
return <Patreon />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "twitter") {
|
||||||
|
return <Twitter />;
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</VStack>
|
||||||
|
<Divider orientation="horizontal" />
|
||||||
|
</VStack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TutorialLinks;
|
||||||
83
src/components/tutorial/sections/TutorialSubmitButtons.tsx
Normal file
83
src/components/tutorial/sections/TutorialSubmitButtons.tsx
Normal file
@@ -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 (
|
||||||
|
<HStack
|
||||||
|
h="auto"
|
||||||
|
w="80%"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="flex-start"
|
||||||
|
pt={8}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
isDisabled={isLoading}
|
||||||
|
onClick={() => handleSkip()}
|
||||||
|
variant="skip"
|
||||||
|
>
|
||||||
|
{"Skip"}
|
||||||
|
</Button>
|
||||||
|
<VStack
|
||||||
|
h="auto"
|
||||||
|
w="auto"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
spacing={2}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
isDisabled={isLoading}
|
||||||
|
onClick={() => handleComplete()}
|
||||||
|
variant="primary"
|
||||||
|
>
|
||||||
|
{"Complete Tutorial"}
|
||||||
|
</Button>
|
||||||
|
<Checkbox
|
||||||
|
isChecked={rememberComplete}
|
||||||
|
isDisabled={isLoading}
|
||||||
|
onChange={() => handleUpdateCheck()}
|
||||||
|
>
|
||||||
|
{"Remember completed?"}
|
||||||
|
</Checkbox>
|
||||||
|
</VStack>
|
||||||
|
</HStack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TutorialSubmitButtons;
|
||||||
@@ -3,11 +3,7 @@ import { Provider } from "react-redux";
|
|||||||
import { store } from "../app/store";
|
import { store } from "../app/store";
|
||||||
import { useAppDispatch, useAppSelector } from "../app/hooks";
|
import { useAppDispatch, useAppSelector } from "../app/hooks";
|
||||||
import { updateLoading } from "../features/calender";
|
import { updateLoading } from "../features/calender";
|
||||||
import {
|
import { getAndSetTutorial } from "../features/tutorial";
|
||||||
getAndSetTutorial,
|
|
||||||
setTempTutorialComplete,
|
|
||||||
setTutorialCompleted
|
|
||||||
} from "../features/tutorial";
|
|
||||||
import { Box } from "@chakra-ui/react";
|
import { Box } from "@chakra-ui/react";
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
import Calender from "../components/calender";
|
import Calender from "../components/calender";
|
||||||
@@ -30,14 +26,6 @@ const IndexPage = (): JSX.Element => {
|
|||||||
day: parseInt(format(new Date(), "d"))
|
day: parseInt(format(new Date(), "d"))
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleTempTutorialCompleted = (): void => {
|
|
||||||
dispatch(setTempTutorialComplete());
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTutorialCompleted = (): void => {
|
|
||||||
dispatch(setTutorialCompleted());
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (completedTutorial === null && tutorialCompletionInfo === null) {
|
if (completedTutorial === null && tutorialCompletionInfo === null) {
|
||||||
dispatch(getAndSetTutorial());
|
dispatch(getAndSetTutorial());
|
||||||
@@ -59,11 +47,7 @@ const IndexPage = (): JSX.Element => {
|
|||||||
) : completedTutorial ? (
|
) : completedTutorial ? (
|
||||||
<Calender date={currDate.current} isLoading={isLoading} />
|
<Calender date={currDate.current} isLoading={isLoading} />
|
||||||
) : (
|
) : (
|
||||||
<Tutorial
|
<Tutorial isLoading={isLoading} />
|
||||||
setTutorialComplete={handleTutorialCompleted}
|
|
||||||
setTempTutorialComplete={handleTempTutorialCompleted}
|
|
||||||
isLoading={isLoading}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</Provider>
|
</Provider>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Reference in New Issue
Block a user