Set dynamic coaching session titles

package.json

@@ -33,7 +33,6 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",
-    "date-fns": "^3.3.1",
     "lucide-react": "^0.314.0",
     "next": "^14.2.3",
     "next-themes": "^0.2.1",

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

@@ -60,6 +60,7 @@ import { ActionsList } from "@/components/ui/coaching-sessions/actions-list";
 import { Action } from "@/types/action";
 import { createAction, deleteAction, updateAction } from "@/lib/api/actions";
 import { DateTime } from "ts-luxon";
+import { CoachingSessionTitle } from "@/components/ui/coaching-sessions/coaching-session-title";
 
 // export const metadata: Metadata = {
 //   title: "Coaching Session",
@@ -72,26 +73,28 @@ export default function CoachingSessionsPage() {
   const [note, setNote] = useState<string>("");
   const [syncStatus, setSyncStatus] = useState<string>("");
   const { userId } = useAuthStore((state) => state);
-  const { coachingSessionId } = useAppStateStore((state) => state);
+  const { coachingSession, coachingRelationship } = useAppStateStore(
+    (state) => state
+  );
 
   useEffect(() => {
     async function fetchNote() {
-      if (!coachingSessionId) {
+      if (!coachingSession.id) {
         console.error(
-          "Failed to fetch Note since coachingSessionId is not set."
+          "Failed to fetch Note since coachingSession.id is not set."
         );
         return;
       }
 
-      await fetchNotesByCoachingSessionId(coachingSessionId)
+      await fetchNotesByCoachingSessionId(coachingSession.id)
         .then((notes) => {
           const note = notes[0];
           if (notes.length > 0) {
             console.trace("note: " + noteToString(note));
             setNoteId(note.id);
             setNote(note.body);
           } else {
-            console.trace("No Notes associated with this coachingSessionId");
+            console.trace("No Notes associated with this coachingSession.id");
           }
         })
         .catch((err) => {
@@ -101,11 +104,11 @@ export default function CoachingSessionsPage() {
         });
     }
     fetchNote();
-  }, [coachingSessionId, noteId]);
+  }, [coachingSession.id, noteId]);
 
   const handleAgreementAdded = (body: string): Promise<Agreement> => {
     // Calls the backend endpoint that creates and stores a full Agreement entity
-    return createAgreement(coachingSessionId, userId, body)
+    return createAgreement(coachingSession.id, userId, body)
       .then((agreement) => {
         return agreement;
       })
@@ -116,7 +119,7 @@ export default function CoachingSessionsPage() {
   };
 
   const handleAgreementEdited = (id: Id, body: string): Promise<Agreement> => {
-    return updateAgreement(id, coachingSessionId, userId, body)
+    return updateAgreement(id, coachingSession.id, userId, body)
       .then((agreement) => {
         return agreement;
       })
@@ -143,7 +146,7 @@ export default function CoachingSessionsPage() {
     dueBy: DateTime
   ): Promise<Action> => {
     // Calls the backend endpoint that creates and stores a full Action entity
-    return createAction(coachingSessionId, body, status, dueBy)
+    return createAction(coachingSession.id, body, status, dueBy)
       .then((action) => {
         return action;
       })
@@ -159,7 +162,7 @@ export default function CoachingSessionsPage() {
     status: ActionStatus,
     dueBy: DateTime
   ): Promise<Action> => {
-    return updateAction(id, coachingSessionId, body, status, dueBy)
+    return updateAction(id, coachingSession.id, body, status, dueBy)
       .then((action) => {
         return action;
       })
@@ -183,8 +186,8 @@ export default function CoachingSessionsPage() {
   const handleInputChange = (value: string) => {
     setNote(value);
 
-    if (noteId && coachingSessionId && userId) {
-      updateNote(noteId, coachingSessionId, userId, value)
+    if (noteId && coachingSession.id && userId) {
+      updateNote(noteId, coachingSession.id, userId, value)
         .then((note) => {
           console.trace("Updated Note: " + noteToString(note));
           setSyncStatus("All changes saved");
@@ -193,8 +196,8 @@ export default function CoachingSessionsPage() {
           setSyncStatus("Failed to save changes");
           console.error("Failed to update Note: " + err);
         });
-    } else if (!noteId && coachingSessionId && userId) {
-      createNote(coachingSessionId, userId, value)
+    } else if (!noteId && coachingSession.id && userId) {
+      createNote(coachingSession.id, userId, value)
         .then((note) => {
           console.trace("Newly created Note: " + noteToString(note));
           setNoteId(note.id);
@@ -206,7 +209,7 @@ export default function CoachingSessionsPage() {
         });
     } else {
       console.error(
-        "Could not update or create a Note since coachingSessionId or userId are not set."
+        "Could not update or create a Note since coachingSession.id or userId are not set."
       );
     }
   };
@@ -215,11 +218,19 @@ export default function CoachingSessionsPage() {
     setSyncStatus("");
   };
 
+  const handleTitleRender = (sessionTitle: string) => {
+    document.title = sessionTitle;
+  };
+
   return (
     <>
-      <div className="hidden h-full flex-col md:flex">
+      <div className="h-full flex-col md:flex">
         <div className="flex flex-col items-start justify-between space-y-2 py-4 px-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
-          <h4 className="w-16 md:w-32 lg:w-48 font-semibold">Session Title</h4>
+          <CoachingSessionTitle
+            locale={siteConfig.locale}
+            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} />
             <PresetActions />
@@ -289,7 +300,7 @@ export default function CoachingSessionsPage() {
                     <TabsContent value="agreements">
                       <div className="w-full">
                         <AgreementsList
-                          coachingSessionId={coachingSessionId}
+                          coachingSessionId={coachingSession.id}
                           userId={userId}
                           locale={siteConfig.locale}
                           onAgreementAdded={handleAgreementAdded}
@@ -301,7 +312,7 @@ export default function CoachingSessionsPage() {
                     <TabsContent value="actions">
                       <div className="w-full">
                         <ActionsList
-                          coachingSessionId={coachingSessionId}
+                          coachingSessionId={coachingSession.id}
                           userId={userId}
                           locale={siteConfig.locale}
                           onActionAdded={handleActionAdded}

src/components/ui/coaching-sessions/actions-list.tsx

@@ -201,7 +201,12 @@ const ActionsList: React.FC<{
 
   useEffect(() => {
     async function loadActions() {
-      if (!coachingSessionId) return;
+      if (!coachingSessionId) {
+        console.error(
+          "Failed to fetch Actions since coachingSession.id is not set."
+        );
+        return;
+      }
 
       await fetchActionsByCoachingSessionId(coachingSessionId)
         .then((actions) => {

src/components/ui/coaching-sessions/agreements-list.tsx

@@ -19,12 +19,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { MoreHorizontal, ArrowUpDown, Save } from "lucide-react";
 import { Id } from "@/types/general";
-import {
-  createAgreement,
-  deleteAgreement as deleteAgreementApi,
-  updateAgreement as updateAgreementApi,
-  fetchAgreementsByCoachingSessionId,
-} from "@/lib/api/agreements";
+import { fetchAgreementsByCoachingSessionId } from "@/lib/api/agreements";
 import { Agreement, agreementToString } from "@/types/agreement";
 import { DateTime } from "ts-luxon";
 import { siteConfig } from "@/site.config";
@@ -158,7 +153,12 @@ const AgreementsList: React.FC<{
 
   useEffect(() => {
     async function loadAgreements() {
-      if (!coachingSessionId) return;
+      if (!coachingSessionId) {
+        console.error(
+          "Failed to fetch Agreements since coachingSession.id is not set."
+        );
+        return;
+      }
 
       await fetchAgreementsByCoachingSessionId(coachingSessionId)
         .then((agreements) => {

src/components/ui/coaching-sessions/coaching-session-title.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  defaultSessionTitle,
+  generateSessionTitle,
+  SessionTitle,
+  SessionTitleStyle,
+} from "@/types/session-title";
+import {
+  CoachingRelationshipWithUserNames,
+  coachingRelationshipWithUserNamesToString,
+} from "@/types/coaching_relationship_with_user_names";
+import {
+  CoachingSession,
+  coachingSessionToString,
+} from "@/types/coaching-session";
+import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
+
+const CoachingSessionTitle: React.FC<{
+  locale: string | "us";
+  style: SessionTitleStyle;
+  onRender: (sessionTitle: string) => void;
+}> = ({ locale, style, onRender }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [sessionTitle, setSessionTitle] = useState<SessionTitle>();
+  const { coachingSession, coachingRelationship } = useAppStateStore(
+    (state) => state
+  );
+  useState<CoachingRelationshipWithUserNames>();
+
+  useEffect(() => {
+    if (coachingSession && coachingRelationship) {
+      setIsLoading(false);
+      const title = generateSessionTitle(
+        coachingSession,
+        coachingRelationship,
+        style,
+        locale
+      );
+      setSessionTitle(title);
+      onRender(title.title);
+    }
+  }, [coachingSession, coachingRelationship, style, locale, onRender]);
+
+  if (isLoading) {
+    return (
+      <h4 className="font-semibold break-words w-full px-2 md:px-4 lg:px-6 md:text-clip">
+        {defaultSessionTitle().title}
+      </h4>
+    );
+  }
+
+  return (
+    <h4 className="font-semibold break-words w-full px-2 md:px-4 lg:px-6 md:text-clip">
+      {sessionTitle ? sessionTitle.title : defaultSessionTitle().title}
+    </h4>
+  );
+};
+
+export { CoachingSessionTitle };