Merge pull request #79 from dskunkler/77-let-events-become-trackable

77: let events become trackable
dskunkler · Aug 31, 2023 · ee3e3d7 · ee3e3d7 · vercel · Aug 31, 2023
2 parents 0e1c738 + 724d3d3
commit ee3e3d7
Show file tree

Hide file tree

Showing 5 changed files with 473 additions and 133 deletions.
diff --git a/src/components/calendar-wizard.tsx b/src/components/calendar-wizard.tsx
@@ -95,6 +95,7 @@ export const CalendarWizard = (props: CalendarProps) => {
           startDate={date}
           setMacro={setMacroData}
           events={noviceEvents}
+          userGoal={userGoal}
         />
       )}
       <div className="flex justify-center">

diff --git a/src/components/macro-cycle.tsx b/src/components/macro-cycle.tsx
@@ -41,6 +41,7 @@ type MacroCycleProps = {
   setMacro?: (val: MacroCycle) => void;
   macroCycle?: PrismaMacroCycle;
   events?: CycleEvent[];
+  userGoal?: string;
 };
 
 const macroArray = [
@@ -70,7 +71,7 @@ export const MacroKey = () => {
 };
 
 export const MacroCycle = (props: MacroCycleProps) => {
-  const { setMacro, macroCycle: macroCycleProp } = props;
+  const { setMacro, macroCycle: macroCycleProp, userGoal = "" } = props;
   const startDate = macroCycleProp ? macroCycleProp.start : props.startDate;
   if (!startDate) {
     throw new Error("Start dating missing in MacroCycle");
@@ -79,7 +80,7 @@ export const MacroCycle = (props: MacroCycleProps) => {
   const today = new Date(startDate);
   const [phases, setPhases] = useState<MicroCycleShape[]>(macroArray);
   const [goal, setGoal] = useState(
-    macroCycleProp ? macroCycleProp.goal : "Get Yoked"
+    macroCycleProp ? macroCycleProp.goal : userGoal
   );
   const [macroCycle, setMacroCycle] = useState<MacroCycle>({
     start: today,

diff --git a/src/components/macro-view.tsx b/src/components/macro-view.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { api } from "~/utils/api";
+import { CalendarWizard } from "../components/calendar-wizard";
+import { useEffect, useState } from "react";
+import MacroCycleComponent from "../components/macro-cycle";
+
+const MacroView = () => {
+  api.posts.getAll.useQuery();
+
+  const { data: latestMacroData } = api.macroCycles.getMostRecent.useQuery();
+
+  useEffect(() => {
+    // console.log("latest?: ", latestMacroData);
+  }, [latestMacroData]);
+
+  const [showCalendar, setShowCalendar] = useState(false);
+
+  return (
+    <>
+      {latestMacroData ? (
+        <MacroCycleComponent macroCycle={latestMacroData} />
+      ) : showCalendar ? (
+        <CalendarWizard closeCal={() => setShowCalendar(false)} />
+      ) : (
+        <button
+          onClick={() => setShowCalendar(true)}
+          className="rounded-full border border-purple-200 px-4 py-1 text-sm font-semibold text-purple-600 hover:border-transparent hover:bg-purple-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
+        >
+          Get Started
+        </button>
+      )}
+    </>
+  );
+};
+
+export default MacroView;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,28 +1,13 @@
 import { type NextPage } from "next";
 import Head from "next/head";
-
-import { api } from "~/utils/api";
 import { SignInButton, useUser, UserButton } from "@clerk/nextjs";
-import { CalendarWizard } from "../components/calendar-wizard";
-import { useEffect, useState } from "react";
-import { LoadingPage } from "../components/loading-spinner";
-import MacroCycleComponent from "../components/macro-cycle";
+import MacroView from "~/components/macro-view";
 
 const Home: NextPage = () => {
   // This is for learning purposes can remove later
 
-  api.posts.getAll.useQuery();
   const user = useUser();
 
-  const { data: latestMacroData, isLoading: isLoadingCycles } =
-    api.macroCycles.getMostRecent.useQuery();
-
-  useEffect(() => {
-    // console.log("latest?: ", latestMacroData);
-  }, [latestMacroData]);
-
-  const [showCalendar, setShowCalendar] = useState(false);
-
   return (
     <>
       <Head>
@@ -36,21 +21,7 @@ const Home: NextPage = () => {
             Climb <span className="text-[hsl(280,100%,70%)]">HARDER</span>{" "}
           </h1>
           <div className="flex w-full flex-col items-center gap-2">
-            {user.isSignedIn &&
-              !showCalendar &&
-              (latestMacroData ? (
-                <MacroCycleComponent macroCycle={latestMacroData} />
-              ) : (
-                <button
-                  onClick={() => setShowCalendar(true)}
-                  className="rounded-full border border-purple-200 px-4 py-1 text-sm font-semibold text-purple-600 hover:border-transparent hover:bg-purple-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2"
-                >
-                  Get Started
-                </button>
-              ))}
-            {showCalendar && !latestMacroData && (
-              <CalendarWizard closeCal={() => setShowCalendar(false)} />
-            )}
+            {user.isSignedIn && <MacroView />}
           </div>
         </div>
       </main>