From de29a1722b22677b9d6b7ff8498fdea661928efd Mon Sep 17 00:00:00 2001
From: bombies <xjamesdzn@gmail.com>
Date: Sat, 4 Nov 2023 14:09:26 -0500
Subject: [PATCH] Add onboarding for the dream calendar

---
 .../dreams/containers/PastDreamsContainer.tsx | 36 ++++++------
 .../calendar/components/DreamCalendar.tsx     |  6 ++
 .../calendar/components/DreamCalendarDay.tsx  |  5 +-
 .../(internal)/dashboard/calendar/page.tsx    | 56 ++++++++++++++++++-
 4 files changed, 83 insertions(+), 20 deletions(-)

diff --git a/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamsContainer.tsx b/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamsContainer.tsx
index 3194b11..aef73d2 100644
--- a/src/app/(site)/(internal)/dashboard/(your-dreams)/components/dreams/containers/PastDreamsContainer.tsx
+++ b/src/app/(site)/(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
index 2fef575..90cae53 100644
--- 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
index 4adf395..2a319d0 100644
--- 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
index 8ab1749..6182bf2 100644
--- 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>
     )