Set dynamic coaching session titles

Author: jhodapp

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

@@ -60,6 +60,8 @@ 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";
+import { SessionTitle, SessionTitleStyle } from "@/types/session-title";
 
 // export const metadata: Metadata = {
 //   title: "Coaching Session",
@@ -72,26 +74,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 +105,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 +120,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 +147,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 +163,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 +187,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 +197,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 +210,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 +219,21 @@ 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
+            coachingSession={coachingSession}
+            coachingRelationship={coachingRelationship}
+            locale={siteConfig.locale}
+            style={SessionTitleStyle.CoachFirstCoacheeFirstDate}
+            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 +303,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 +315,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,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  generateSessionTitle,
+  SessionTitle,
+  SessionTitleStyle,
+} from "@/types/session-title";
+import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship_with_user_names";
+import { CoachingSession } from "@/types/coaching-session";
+
+const CoachingSessionTitle: React.FC<{
+  coachingSession: CoachingSession;
+  coachingRelationship: CoachingRelationshipWithUserNames;
+  locale: string | "us";
+  style: SessionTitleStyle;
+  onRender: (sessionTitle: string) => void;
+}> = ({ coachingSession, coachingRelationship, locale, style, onRender }) => {
+  const [sessionTitle, setSessionTitle] = useState<SessionTitle>();
+
+  useEffect(() => {
+    async function getSessionTitle() {
+      const sessionTitle = generateSessionTitle(
+        coachingSession,
+        coachingRelationship,
+        style,
+        locale
+      );
+      setSessionTitle(sessionTitle);
+      console.debug("sessionTitle: " + JSON.stringify(sessionTitle));
+      onRender(sessionTitle.title);
+    }
+
+    getSessionTitle();
+  }, [coachingSession, coachingRelationship]);
+
+  return (
+    <h4 className="font-semibold break-words w-full px-2 md:px-4 lg:px-6 md:text-clip">
+      {sessionTitle?.title}
+    </h4>
+  );
+};
+
+export { CoachingSessionTitle };

src/components/ui/dashboard/select-coaching-session.tsx

@@ -23,8 +23,16 @@ import { fetchCoachingRelationshipsWithUserNames } from "@/lib/api/coaching-rela
 import { fetchCoachingSessions } from "@/lib/api/coaching-sessions";
 import { fetchOrganizationsByUserId } from "@/lib/api/organizations";
 import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
-import { CoachingSession } from "@/types/coaching-session";
-import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship_with_user_names";
+import {
+  CoachingSession,
+  coachingSessionToString,
+  getCoachingSessionById,
+} from "@/types/coaching-session";
+import {
+  CoachingRelationshipWithUserNames,
+  coachingRelationshipWithUserNamesToString,
+  getCoachingRelationshipById,
+} from "@/types/coaching_relationship_with_user_names";
 import { Id } from "@/types/general";
 import { Organization } from "@/types/organization";
 import Link from "next/link";
@@ -46,9 +54,15 @@ export function SelectCoachingSession({
   const { relationshipId, setRelationshipId } = useAppStateStore(
     (state) => state
   );
+  const { coachingRelationship, setCoachingRelationship } = useAppStateStore(
+    (state) => state
+  );
   const { coachingSessionId, setCoachingSessionId } = useAppStateStore(
     (state) => state
   );
+  const { coachingSession, setCoachingSession } = useAppStateStore(
+    (state) => state
+  );
 
   const [organizations, setOrganizations] = useState<Organization[]>([]);
   const [coachingRelationships, setCoachingRelationships] = useState<
@@ -115,6 +129,31 @@ export function SelectCoachingSession({
     loadCoachingSessions();
   }, [relationshipId]);
 
+  const handleSetCoachingRelationship = (coachingRelationshipId: string) => {
+    setRelationshipId(coachingRelationshipId);
+    const coachingRelationship = getCoachingRelationshipById(
+      coachingRelationshipId,
+      coachingRelationships
+    );
+    console.debug(
+      "coachingRelationship: " +
+        coachingRelationshipWithUserNamesToString(coachingRelationship)
+    );
+    setCoachingRelationship(coachingRelationship);
+  };
+
+  const handleSetCoachingSession = (coachingSessionId: string) => {
+    setCoachingSessionId(coachingSessionId);
+    const coachingSession = getCoachingSessionById(
+      coachingSessionId,
+      coachingSessions
+    );
+    console.debug(
+      "coachingSession: " + coachingSessionToString(coachingSession)
+    );
+    setCoachingSession(coachingSession);
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -154,7 +193,7 @@ export function SelectCoachingSession({
             defaultValue="caleb"
             disabled={!organizationId}
             value={relationshipId}
-            onValueChange={setRelationshipId}
+            onValueChange={handleSetCoachingRelationship}
           >
             <SelectTrigger id="relationship">
               <SelectValue placeholder="Select coaching relationship" />
@@ -181,7 +220,8 @@ export function SelectCoachingSession({
             defaultValue="today"
             disabled={!relationshipId}
             value={coachingSessionId}
-            onValueChange={setCoachingSessionId}
+            // TODO: set CoachingSession in the app state!!
+            onValueChange={handleSetCoachingSession}
           >
             <SelectTrigger id="session">
               <SelectValue placeholder="Select coaching session" />

src/lib/api/coaching-relationships.ts

@@ -3,12 +3,57 @@
 import {
   CoachingRelationshipWithUserNames,
   coachingRelationshipsWithUserNamesToString,
+  defaultCoachingRelationshipWithUserNames,
   defaultCoachingRelationshipsWithUserNames,
+  isCoachingRelationshipWithUserNames,
   isCoachingRelationshipWithUserNamesArray
 } from "@/types/coaching_relationship_with_user_names";
 import { Id } from "@/types/general";
 import { AxiosError, AxiosResponse } from "axios";
 
+export const fetchCoachingRelationshipWithUserNames = async (
+  organization_id: Id,
+  relationship_id: Id
+): Promise<CoachingRelationshipWithUserNames> => {
+  const axios = require("axios");
+
+  var relationship: CoachingRelationshipWithUserNames = defaultCoachingRelationshipWithUserNames();
+  var err: string = "";
+
+  const data = await axios
+    .get(`http://localhost:4000/organizations/${organization_id}/coaching_relationships/${relationship_id}`, {
+      withCredentials: true,
+      setTimeout: 5000, // 5 seconds before timing out trying to log in with the backend
+      headers: {
+        "X-Version": "0.0.1",
+      },
+    })
+    .then(function (response: AxiosResponse) {
+      // handle success
+      if (isCoachingRelationshipWithUserNames(response.data.data)) {
+        relationship = response.data.data;
+      }
+    })
+    .catch(function (error: AxiosError) {
+      // handle error
+      console.error(error.response?.status);
+      if (error.response?.status == 401) {
+        err = "Retrieval of CoachingRelationshipWithUserNames failed: unauthorized.";
+      } else if (error.response?.status == 500) {
+        err = "Retrieval of CoachingRelationshipWithUserNames failed, system error: " + error.response.data;
+      } else {
+        err = `Retrieval of CoachingRelationshipWithUserNames(` + relationship_id + `) failed: ` + error.response?.data;
+      }
+    });
+
+    if (err) {
+      console.error(err);
+      throw err;
+    }
+
+  return relationship;
+};
+
 export const fetchCoachingRelationshipsWithUserNames = async (
   organizationId: Id
 ): Promise<[CoachingRelationshipWithUserNames[], string]> => {
@@ -52,4 +97,4 @@ export const fetchCoachingRelationshipsWithUserNames = async (
     });
 
   return [relationships, err];
-};
+};