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] 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 ? (
) : (
-
+
)}