Add onboarding for the dream calendar

bombies · Nov 4, 2023 · de29a17 · de29a17
1 parent ec56eb6
commit de29a17
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 20 deletions.
diff --git a/...)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamsContainer.tsx b/...)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamsContainer.tsx
@@ -12,10 +12,10 @@ import DreamCardSkeleton
 import {Divider} from "@nextui-org/divider";
 import Card from "@/app/(site)/components/Card";
 import {CardBody} from "@nextui-org/card";
-import {useRouter} from "next/navigation";
 import CloudIcon from "@/app/(site)/components/icons/CloudIcon";
 import useDayDreams from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/hooks/useDayDreams";
 import {useTutorialsData} from "@/app/(site)/(internal)/dashboard/components/TutorialsProvider";
+import Link from "next/link";
 
 export type GroupedDreams = {
     [K: string]: Dream[]
@@ -30,7 +30,6 @@ const NUMBER_OF_DAYS = 7
 
 const PastDreamsContainer: FC = () => {
     const [tutorialsState] = useTutorialsData()
-    const router = useRouter()
     const {dreams} = useDreamsData()
     const latestDate = useEndOfDay({
         dayOffset: -1
@@ -69,22 +68,23 @@ const PastDreamsContainer: FC = () => {
                 <Fragment>
                     {dreamItems}
                     <Divider className="my-3"/>
-                    <Card
-                        onPress={() => router.push("/dashboard/calendar")}
-                        isPressable
-                        isBlurred
-                        classNames={{
-                            base: "hover:scale-105",
-                            body: "bg-secondary py-8"
-                        }}
-                    >
-                        <CardBody>
-                            <div className="flex gap-4">
-                                <CloudIcon width={32}/>
-                                <p className="font-semibold text-lg phone:text-medium self-center">View All Dreams</p>
-                            </div>
-                        </CardBody>
-                    </Card>
+                    <Link href="/dashboard/calendar">
+                        <Card
+                            isPressable
+                            isBlurred
+                            classNames={{
+                                base: "hover:scale-105",
+                                body: "bg-secondary py-8"
+                            }}
+                        >
+                            <CardBody>
+                                <div className="flex gap-4">
+                                    <CloudIcon width={32}/>
+                                    <p className="font-semibold text-lg phone:text-medium self-center">View All Dreams</p>
+                                </div>
+                            </CardBody>
+                        </Card>
+                    </Link>
                 </Fragment>
                 :
                 <h3 className="text-center font-light text-3xl tablet:text-xl text-subtext/30 py-6">You have no previous

diff --git a/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendar.tsx b/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendar.tsx
@@ -15,8 +15,10 @@ import useDayDreams from "@/app/(site)/(internal)/dashboard/(your-dreams)/compon
 import {Button} from "@nextui-org/button";
 import DoubleBackIcon from "@/app/(site)/components/icons/DoubleBackIcon";
 import DoubleForwardIcon from "@/app/(site)/components/icons/DoubleForwardIcon";
+import {useTutorialsData} from "@/app/(site)/(internal)/dashboard/components/TutorialsProvider";
 
 const DreamCalendar: FC = () => {
+    const [tutorialsState] = useTutorialsData()
     const [[currentYear, currentMonth], setCurrentYearAndMonth] = useState<[number, number]>([new Date().getFullYear(), new Date().getMonth() + 1]);
 
     let currentMonthDays = createDaysForCurrentMonth(currentYear, currentMonth);
@@ -81,6 +83,7 @@ const DreamCalendar: FC = () => {
             <div id="calendar-nav" className="flex justify-center mb-12 gap-4">
                 <div className="flex w-3/4 phone:w-full items-center gap-2">
                     <Button
+                        isDisabled={!tutorialsState?.dreamCalendar}
                         disableRipple
                         isIconOnly
                         color="default"
@@ -91,6 +94,7 @@ const DreamCalendar: FC = () => {
                         <DoubleBackIcon width={16}/>
                     </Button>
                     <Select
+                        isDisabled={!tutorialsState?.dreamCalendar}
                         classNames={{
                             trigger: "py-0",
                             label: "text-primary"
@@ -132,6 +136,7 @@ const DreamCalendar: FC = () => {
                         )}
                     </Select>
                     <Select
+                        isDisabled={!tutorialsState?.dreamCalendar}
                         classNames={{
                             trigger: "py-0",
                             label: "text-primary"
@@ -174,6 +179,7 @@ const DreamCalendar: FC = () => {
                         )}
                     </Select>
                     <Button
+                        isDisabled={!tutorialsState?.dreamCalendar}
                         disableRipple
                         isIconOnly
                         color="default"

diff --git a/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendarDay.tsx b/src/app/(site)/(internal)/dashboard/calendar/components/DreamCalendarDay.tsx
@@ -15,6 +15,7 @@ import {Dream} from "@prisma/client";
 import {OptimisticWorker} from "@/utils/client/client-data-utils";
 import LogDreamCard from "@/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/LogDreamCard";
 import PlusIcon from "@/app/(site)/components/icons/PlusIcon";
+import {useTutorialsData} from "@/app/(site)/(internal)/dashboard/components/TutorialsProvider";
 
 type Props = {
     dreams?: DayDreams
@@ -24,6 +25,7 @@ type Props = {
 }
 
 const DreamCalendarDay: FC<Props> = ({dreams, day, optimisticRemove, isToday}) => {
+    const [tutorialsState] = useTutorialsData()
     const [modalOpen, setModalOpen] = useState(false)
     const dateStrSplit = day.dateString.split("-")
 
@@ -52,12 +54,13 @@ const DreamCalendarDay: FC<Props> = ({dreams, day, optimisticRemove, isToday}) =
                 </DreamContainer>
             </Modal>
             <div
+                id={isToday ? "#dream_calendar_day_today" : undefined}
                 className={clsx(
                     "min-h-[8rem] tablet:min-h-[5rem] bg-[#9E23FF1A] border-primary ease-in-out duration-300 tablet:border-0 tablet:border-b-1",
                     ((dreams || isToday) && day.isCurrentMonth) && "cursor-pointer hover:bg-primary/30"
                 )}
                 onClick={() => {
-                    if ((dreams || isToday) && day.isCurrentMonth)
+                    if ((dreams || isToday) && day.isCurrentMonth && tutorialsState?.dreamCalendar)
                         setModalOpen(true)
                 }}
             >

diff --git a/src/app/(site)/(internal)/dashboard/calendar/page.tsx b/src/app/(site)/(internal)/dashboard/calendar/page.tsx
@@ -1,10 +1,64 @@
+"use client"
+
 import {FC, Fragment} from "react";
 import DreamCalendar from "@/app/(site)/(internal)/dashboard/calendar/components/DreamCalendar";
+import {useTutorialsData} from "@/app/(site)/(internal)/dashboard/components/TutorialsProvider";
+import useComponentDidMount from "@/app/(site)/hooks/useComponentDidMount";
+import {Step, Steps} from "intro.js-react";
+
+const steps: Step[] = [
+    {
+        element: "#dash_calendar_title",
+        title: "Welcome to your Dream Calendar",
+        intro: "Here, you can see all the dreams you ever made on your personal calendar. You can add new dreams for today and edit past dreams here as well.",
+    },
+    {
+        element: "#calendar-root",
+        title: "This is your calendar.",
+        intro: "This is where all the actions take place."
+    },
+    {
+        element: "#calendar-nav",
+        title: "Calendar Controls",
+        intro: "These tools will allow you to control your calendar. You can choose the specific month and year and easily progress and regress your months. The years shown will only include the range of years you have dream data for."
+    },
+    {
+        element: "#days-grid",
+        title: "The Calendar",
+        intro: "This is where all the magic happens. Once you start adding dreams, you will be able to see which days you've logged dreams for. You can click on those days to view those dreams and edit them."
+    },
+    {
+        element: "#dream_calendar_day_today",
+        title: "Today",
+        intro: "This cell is the current day. You can click on this cell to view the current dreams for today and even log new dreams for today."
+    },
+    {
+        element: "#calendar-root",
+        title: "Lets Go!",
+        intro: "That's it for the dream calendar. Go ahead and make it your own!"
+    },
+]
 
 const CalendarPage: FC = () => {
+    const [tutorialsState, setTutorialsState] = useTutorialsData()
+    const mounted = useComponentDidMount()
+
     return (
         <Fragment>
-            <h1 className="font-bold text-7xl phone:text-4xl mb-24 phone:mb-16">Dream Calendar</h1>
+            <Steps
+                enabled={mounted && (tutorialsState && !tutorialsState.dreamCalendar)}
+                initialStep={0}
+                steps={steps}
+                onExit={() => {
+                    if (mounted)
+                        setTutorialsState(prev => ({
+                            ...prev!,
+                            dreamCalendar: true,
+                        }))
+                }}
+            />
+            <h1 id="dash_calendar_title"
+                className="font-bold text-7xl phone:text-4xl mb-24 phone:mb-16 w-fit">Dream Calendar</h1>
             <DreamCalendar/>
         </Fragment>
     )