Join session milestone point

package.json

@@ -43,16 +43,16 @@
     "@tiptap/starter-kit": "^2.8.0",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "lucide-react": "^0.453.0",
-    "next": "^14.2.15",
-    "next-themes": "^0.3.0",
-    "react": "^18.3.1",
-    "react-day-picker": "^8.10.1",
-    "react-dom": "^18.3.1",
-    "sass": "^1.80.2",
-    "tailwind-merge": "^2.5.4",
+    "clsx": "^2.1.0",
+    "cmdk": "^0.2.1",
+    "lucide-react": "^0.314.0",
+    "next": "^14.2.3",
+    "next-themes": "^0.2.1",
+    "react": "^18",
+    "react-day-picker": "^8.10.0",
+    "react-dom": "^18",
+    "swr": "^2.2.5",
+    "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "ts-luxon": "^5.0.7-beta.0",
     "zustand": "^4.5.5"

src/app/coaching-sessions/[id]/page.tsx

@@ -3,14 +3,11 @@
 // import { Metadata } from "next";
 
 import * as React from "react";
-
+import { useRouter } from "next/navigation";
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
 
-import { PresetActions } from "@/components/ui/preset-actions";
-import { PresetSelector } from "@/components/ui/preset-selector";
-import { current, future, past } from "@/data/presets";
 import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -36,6 +33,11 @@ import {
   CoachingNotes,
   EditorRef,
 } from "@/components/ui/coaching-sessions/coaching-notes";
+import { DynamicApiSelect } from "@/components/ui/dashboard/dynamic-api-select";
+import { CoachingSession } from "@/types/coaching-session";
+import { fetchCoachingSessions } from "@/lib/api/coaching-sessions";
+import { Id } from "@/types/general";
+import { DateTime } from "ts-luxon";
 
 // export const metadata: Metadata = {
 //   title: "Coaching Session",
@@ -46,26 +48,25 @@ export default function CoachingSessionsPage() {
   const [note, setNote] = useState<Note>(defaultNote());
   const [syncStatus, setSyncStatus] = useState<string>("");
   const { userId } = useAuthStore((state) => ({ userId: state.userId }));
-  const { coachingSession } = useAppStateStore((state) => state);
+  const coachingSessionId = useAppStateStore(
+    (state) => state.coachingSessionId
+  );
   const [isLoading, setIsLoading] = useState(false);
   const editorRef = useRef<EditorRef>(null);
 
   async function fetchNote() {
-    if (!coachingSession.id) {
-      console.error(
-        "Failed to fetch Note since coachingSession.id is not set."
-      );
+    if (!coachingSessionId) {
+      console.error("Failed to fetch Note since coachingSessionId is not set.");
       return;
     }
     if (isLoading) {
       console.debug(
         "Not issuing a new Note fetch because a previous fetch is still in progress."
       );
+      setIsLoading(true);
     }
 
-    setIsLoading(true);
-
-    await fetchNotesByCoachingSessionId(coachingSession.id)
+    await fetchNotesByCoachingSessionId(coachingSessionId)
       .then((notes) => {
         const note = notes[0];
         if (notes.length > 0) {
@@ -76,15 +77,15 @@ export default function CoachingSessionsPage() {
           setEditorFocussed();
         } else {
           console.trace(
-            "No Notes associated with this coachingSession.id: " +
-              coachingSession.id
+            "No Notes associated with this coachingSessionId: " +
+              coachingSessionId
           );
         }
       })
       .catch((err) => {
         console.error(
           "Failed to fetch Note for current coaching session id: " +
-            coachingSession.id +
+            coachingSessionId +
             ". Error: " +
             err
         );
@@ -95,7 +96,7 @@ export default function CoachingSessionsPage() {
 
   useEffect(() => {
     fetchNote();
-  }, [coachingSession.id, isLoading]);
+  }, [coachingSessionId, isLoading]);
 
   const setEditorContent = (content: string) => {
     editorRef.current?.setContent(`${content}`);
@@ -108,14 +109,14 @@ export default function CoachingSessionsPage() {
   const handleOnChange = (value: string) => {
     console.debug("isLoading (before update/create): " + isLoading);
     console.debug(
-      "coachingSession.id (before update/create): " + coachingSession.id
+      "coachingSessionId (before update/create): " + coachingSessionId
     );
     console.debug("userId (before update/create): " + userId);
     console.debug("value (before update/create): " + value);
     console.debug("--------------------------------");
 
-    if (!isLoading && note.id && coachingSession.id && userId) {
-      updateNote(note.id, coachingSession.id, userId, value)
+    if (!isLoading && note.id && coachingSessionId && userId) {
+      updateNote(note.id, coachingSessionId, userId, value)
         .then((updatedNote) => {
           setNote(updatedNote);
           console.trace("Updated Note: " + noteToString(updatedNote));
@@ -125,8 +126,8 @@ export default function CoachingSessionsPage() {
           setSyncStatus("Failed to save changes");
           console.error("Failed to update Note: " + err);
         });
-    } else if (!isLoading && !note.id && coachingSession.id && userId) {
-      createNote(coachingSession.id, userId, value)
+    } else if (!isLoading && !note.id && coachingSessionId && userId) {
+      createNote(coachingSessionId, userId, value)
         .then((createdNote) => {
           setNote(createdNote);
           console.trace("Newly created Note: " + noteToString(createdNote));
@@ -138,7 +139,7 @@ export default function CoachingSessionsPage() {
         });
     } else {
       console.error(
-        "Could not update or create a Note since coachingSession.id or userId are not set."
+        "Could not update or create a Note since coachingSessionId or userId are not set."
       );
     }
   };
@@ -151,6 +152,29 @@ export default function CoachingSessionsPage() {
     document.title = sessionTitle;
   };
 
+  const FROM_DATE = DateTime.now().minus({ month: 1 }).toISODate();
+  const TO_DATE = DateTime.now().plus({ month: 1 }).toISODate();
+
+  const setSession = useAppStateStore((state) => state.setCoachingSession);
+  const setSessionId = useAppStateStore((state) => state.setCoachingSessionId);
+  const relationshipId = useAppStateStore((state) => state.relationshipId);
+  const router = useRouter();
+
+  const handleSessionSelection = (selectedSession: Id) => {
+    if (selectedSession && relationshipId) {
+      fetchCoachingSessions(relationshipId).then(([sessions]) => {
+        const theSession = sessions.find(
+          (session) => session.id === selectedSession
+        );
+        if (theSession) {
+          setSession(theSession);
+          setSessionId(theSession.id);
+          router.push(`/coaching-sessions/${theSession.id}`);
+        }
+      });
+    }
+  };
+
   return (
     <div className="max-w-screen-2xl">
       <div className="flex-col h-full md:flex ">
@@ -160,12 +184,21 @@ export default function CoachingSessionsPage() {
             style={siteConfig.titleStyle}
             onRender={handleTitleRender}
           ></CoachingSessionTitle>
-          <div className="ml-auto flex w-full space-x-2 sm:justify-end">
-            <PresetSelector current={current} future={future} past={past} />
-            {/* Hidden for MVP */}
-            <div className="hidden">
-              <PresetActions />
-            </div>
+          <div className="ml-auto flex w-64 space-x-2 sm:justify-end">
+            <DynamicApiSelect<CoachingSession>
+              url="/coaching_sessions"
+              params={{
+                coaching_relationship_id: relationshipId,
+                from_date: FROM_DATE,
+                to_Date: TO_DATE,
+              }}
+              onChange={handleSessionSelection}
+              placeholder="Select a session"
+              getOptionLabel={(session) => session.date.toString()}
+              getOptionValue={(session) => session.id.toString()}
+              elementId="session-selector"
+              groupByDate={true}
+            />
           </div>
         </div>
       </div>

src/app/dashboard/page.tsx

@@ -8,7 +8,7 @@ import Image from "next/image";
 
 import { cn } from "@/lib/utils";
 
-import { SelectCoachingSession } from "@/components/ui/dashboard/select-coaching-session";
+import { JoinCoachingSession } from "@/components/ui/dashboard/join-coaching-session";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 
 // export const metadata: Metadata = {
@@ -35,10 +35,28 @@ export default function DashboardPage() {
   const { userId } = useAuthStore((state) => state);
 
   return (
-    <div className="items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
-      <DashboardContainer>
-        <SelectCoachingSession userId={userId} />
-      </DashboardContainer>
-    </div>
+    <>
+      <div className="md:hidden">
+        <Image
+          src="/examples/cards-light.png"
+          width={1280}
+          height={1214}
+          alt="Cards"
+          className="block dark:hidden"
+        />
+        <Image
+          src="/examples/cards-dark.png"
+          width={1280}
+          height={1214}
+          alt="Cards"
+          className="hidden dark:block"
+        />
+      </div>
+      <div className="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
+        <DashboardContainer>
+          <JoinCoachingSession userId={userId} />
+        </DashboardContainer>
+      </div>
+    </>
   );
 }

src/components/ui/coaching-sessions/overarching-goal-container.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useCallback } from "react";
 import { ActionsList } from "@/components/ui/coaching-sessions/actions-list";
 import { ItemStatus, Id } from "@/types/general";
 import { Action } from "@/types/action";
@@ -119,37 +119,40 @@ const OverarchingGoalContainer: React.FC<{
       });
   };
 
-  useEffect(() => {
-    async function fetchOverarchingGoal() {
-      if (!coachingSession.id) {
-        console.error(
-          "Failed to fetch Overarching Goal since coachingSession.id is not set."
+  const fetchOverarchingGoal = useCallback(async () => {
+    if (!coachingSession.id) {
+      console.error(
+        "Failed to fetch Overarching Goal since coachingSession.id is not set."
+      );
+      return;
+    }
+
+    try {
+      const goals = await fetchOverarchingGoalsByCoachingSessionId(
+        coachingSession.id
+      );
+      if (goals.length > 0) {
+        const goal = goals[0];
+        console.trace("Overarching Goal: " + overarchingGoalToString(goal));
+        if (goal.id !== goalId) {
+          setGoalId(goal.id);
+          setGoal(goal);
+        }
+      } else {
+        console.trace(
+          "No Overarching Goals associated with this coachingSession.id"
         );
-        return;
       }
-
-      await fetchOverarchingGoalsByCoachingSessionId(coachingSession.id)
-        .then((goals) => {
-          const goal = goals[0];
-          if (goals.length > 0) {
-            console.trace("Overarching Goal: " + overarchingGoalToString(goal));
-            setGoalId(goal.id);
-            setGoal(goal);
-          } else {
-            console.trace(
-              "No Overarching Goals associated with this coachingSession.id"
-            );
-          }
-        })
-        .catch((err) => {
-          console.error(
-            "Failed to fetch Overarching Goal for current coaching session: " +
-              err
-          );
-        });
+    } catch (err) {
+      console.error(
+        "Failed to fetch Overarching Goal for current coaching session: " + err
+      );
     }
+  }, [coachingSession.id, goalId, setGoalId, setGoal]);
+
+  useEffect(() => {
     fetchOverarchingGoal();
-  }, [coachingSession.id, goalId]);
+  }, [fetchOverarchingGoal]);
 
   const handleGoalChange = async (newGoal: OverarchingGoal) => {
     console.trace("handleGoalChange (goal to set/update): " + newGoal.title);