Add fetch/create/update an OverarchingGoal tied into the backend

Author: jhodapp

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

@@ -34,7 +34,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { MoreHorizontal, ArrowUpDown, Save, CalendarClock } from "lucide-react";
 import {
-  ActionStatus,
+  ItemStatus,
   actionStatusToString,
   Id,
   stringToActionStatus,
@@ -52,13 +52,13 @@ const ActionsList: React.FC<{
   locale: string | "us";
   onActionAdded: (
     body: string,
-    status: ActionStatus,
+    status: ItemStatus,
     dueBy: DateTime
   ) => Promise<Action>;
   onActionEdited: (
     id: Id,
     body: string,
-    status: ActionStatus,
+    status: ItemStatus,
     dueBy: DateTime
   ) => Promise<Action>;
   onActionDeleted: (id: Id) => Promise<Action>;
@@ -80,14 +80,12 @@ const ActionsList: React.FC<{
 
   const [actions, setActions] = useState<Action[]>([]);
   const [newBody, setNewBody] = useState("");
-  const [newStatus, setNewStatus] = useState<ActionStatus>(
-    ActionStatus.NotStarted
-  );
+  const [newStatus, setNewStatus] = useState<ItemStatus>(ItemStatus.NotStarted);
   const [newDueBy, setNewDueBy] = useState<DateTime>(DateTime.now());
   const [editingId, setEditingId] = useState<Id | null>(null);
   const [editBody, setEditBody] = useState("");
-  const [editStatus, setEditStatus] = useState<ActionStatus>(
-    ActionStatus.NotStarted
+  const [editStatus, setEditStatus] = useState<ItemStatus>(
+    ItemStatus.NotStarted
   );
   const [editDueBy, setEditDueBy] = useState<DateTime>(DateTime.now());
   const [sortColumn, setSortColumn] = useState<keyof Action>(
@@ -113,14 +111,14 @@ const ActionsList: React.FC<{
       });
 
     setNewBody("");
-    setNewStatus(ActionStatus.NotStarted);
+    setNewStatus(ItemStatus.NotStarted);
     setNewDueBy(DateTime.now());
   };
 
   const updateAction = async (
     id: Id,
     newBody: string,
-    newStatus: ActionStatus,
+    newStatus: ItemStatus,
     newDueBy: DateTime
   ) => {
     const body = newBody.trim();
@@ -155,7 +153,7 @@ const ActionsList: React.FC<{
       setActions(updatedActions);
       setEditingId(null);
       setEditBody("");
-      setEditStatus(ActionStatus.NotStarted);
+      setEditStatus(ItemStatus.NotStarted);
       setEditDueBy(DateTime.now());
     } catch (err) {
       console.error("Failed to update Action (id: " + id + "): ", err);
@@ -313,7 +311,7 @@ const ActionsList: React.FC<{
                             <SelectValue placeholder="Select a status" />
                           </SelectTrigger>
                           <SelectContent>
-                            {Object.values(ActionStatus).map((s) => (
+                            {Object.values(ItemStatus).map((s) => (
                               <SelectItem value={s} key={s}>
                                 {actionStatusToString(s)}
                               </SelectItem>

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ActionsList } from "@/components/ui/coaching-sessions/actions-list";
-import { ActionStatus, Id } from "@/types/general";
+import { ItemStatus, Id } from "@/types/general";
 import { Action } from "@/types/action";
 import { AgreementsList } from "@/components/ui/coaching-sessions/agreements-list";
 import { Agreement } from "@/types/agreement";
@@ -17,12 +17,24 @@ import { DateTime } from "ts-luxon";
 import { siteConfig } from "@/site.config";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
-import { OverarchingGoal } from "./overarching-goal";
+import { OverarchingGoalComponent } from "./overarching-goal";
+import {
+  createOverarchingGoal,
+  fetchOverarchingGoalsByCoachingSessionId,
+  updateOverarchingGoal,
+} from "@/lib/api/overarching-goals";
+import {
+  defaultOverarchingGoal,
+  OverarchingGoal,
+  overarchingGoalToString,
+} from "@/types/overarching-goal";
 
 const OverarchingGoalContainer: React.FC<{
   userId: Id;
 }> = ({ userId }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const [goal, setGoal] = useState<OverarchingGoal>(defaultOverarchingGoal());
+  const [goalId, setGoalId] = useState<Id>("");
   const { coachingSession, coachingRelationship } = useAppStateStore(
     (state) => ({
       coachingSession: state.coachingSession,
@@ -66,7 +78,7 @@ const OverarchingGoalContainer: React.FC<{
 
   const handleActionAdded = (
     body: string,
-    status: ActionStatus,
+    status: ItemStatus,
     dueBy: DateTime
   ): Promise<Action> => {
     // Calls the backend endpoint that creates and stores a full Action entity
@@ -83,7 +95,7 @@ const OverarchingGoalContainer: React.FC<{
   const handleActionEdited = (
     id: Id,
     body: string,
-    status: ActionStatus,
+    status: ItemStatus,
     dueBy: DateTime
   ): Promise<Action> => {
     return updateAction(id, coachingSession.id, body, status, dueBy)
@@ -107,6 +119,84 @@ const OverarchingGoalContainer: React.FC<{
       });
   };
 
+  useEffect(() => {
+    async function fetchOverarchingGoal() {
+      if (!coachingSession.id) {
+        console.error(
+          "Failed to fetch Overarching Goal since coachingSession.id is not set."
+        );
+        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
+          );
+        });
+    }
+    fetchOverarchingGoal();
+  }, [coachingSession.id, goalId]);
+
+  const handleGoalChange = async (newGoal: OverarchingGoal) => {
+    console.trace("handleGoalChange (goal to set/update): " + newGoal.title);
+
+    if (goalId && coachingSession.id) {
+      console.debug("Update existing Overarching Goal with id: " + goalId);
+      updateOverarchingGoal(
+        goalId,
+        coachingSession.id,
+        newGoal.title,
+        newGoal.body,
+        newGoal.status
+      )
+        .then((responseGoal) => {
+          console.trace(
+            "Updated Overarching Goal: " + overarchingGoalToString(responseGoal)
+          );
+          setGoal(responseGoal);
+        })
+        .catch((err) => {
+          console.error("Failed to update Overarching Goal: " + err);
+        });
+    } else if (!goalId && coachingSession.id) {
+      createOverarchingGoal(
+        coachingSession.id,
+        newGoal.title,
+        newGoal.body,
+        newGoal.status
+      )
+        .then((responseGoal) => {
+          console.trace(
+            "Newly created Overarching Goal: " +
+              overarchingGoalToString(responseGoal)
+          );
+          setGoal(responseGoal);
+          setGoalId(responseGoal.id);
+        })
+        .catch((err) => {
+          console.error("Failed to create new Overarching Goal: " + err);
+        });
+    } else {
+      console.error(
+        "Could not update or create a Overarching Goal since coachingSession.id or userId are not set."
+      );
+    }
+  };
+
   return (
     <div className="grid grid-flow-row auto-rows-min gap-4">
       <div className="row-span-1 pt-4">
@@ -115,9 +205,11 @@ const OverarchingGoalContainer: React.FC<{
           onOpenChange={setIsOpen}
           className="w-full space-y-2"
         >
-          <OverarchingGoal
+          <OverarchingGoalComponent
+            initialValue={goal}
             onOpenChange={(open: boolean) => setIsOpen(open)}
-          ></OverarchingGoal>
+            onGoalChange={(goal: OverarchingGoal) => handleGoalChange(goal)}
+          ></OverarchingGoalComponent>
           <CollapsibleContent className="px-4">
             <div className="flex-col space-y-4 sm:flex">
               <div className="grid flex-1 items-start gap-4 sm:py-0 md:gap-8">

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

@@ -11,32 +11,37 @@ import {
 } from "@/components/ui/tooltip";
 import { useState, useEffect } from "react";
 import { cn } from "@/lib/utils";
+import {
+  defaultOverarchingGoal,
+  OverarchingGoal,
+} from "@/types/overarching-goal";
 
-const OverarchingGoal: React.FC<{ onOpenChange: (open: boolean) => void }> = ({
-  onOpenChange,
-}) => {
+const OverarchingGoalComponent: React.FC<{
+  initialValue: OverarchingGoal;
+  onOpenChange: (open: boolean) => void;
+  onGoalChange: (goal: OverarchingGoal) => void;
+}> = ({ initialValue, onOpenChange, onGoalChange }) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [goal, setGoal] = useState<string>("");
-  const [tempGoal, setTempGoal] = useState(goal);
+  const [tempGoalTitle, setTempGoalTitle] = useState<string>("");
+  const [overarchingGoal, setOverarchingGoal] = useState<OverarchingGoal>(
+    defaultOverarchingGoal()
+  );
 
   useEffect(() => {
-    // Update tempGoal whenever goal changes
-    setTempGoal(goal);
-  }, [goal]);
+    setOverarchingGoal(initialValue);
+    setTempGoalTitle(initialValue.title);
+  }, [initialValue]);
 
   const toggleDrawer = () => {
-    if (isOpen) {
-      // When closing, reset tempGoal to match the current goal
-      setTempGoal(goal);
-    }
     onOpenChange(!isOpen);
     setIsOpen(!isOpen);
   };
 
   const handleSetGoal = async () => {
-    // TODO: make a new callback function for when the goal gets set so the parent can
-    // call the backend and store the new overarching goal.
-    setGoal(tempGoal); // Update the main goal state
+    var tempGoal = overarchingGoal;
+    tempGoal.title = tempGoalTitle;
+    setOverarchingGoal(tempGoal);
+    onGoalChange(tempGoal);
     toggleDrawer();
   };
 
@@ -51,8 +56,8 @@ const OverarchingGoal: React.FC<{ onOpenChange: (open: boolean) => void }> = ({
           <div id="label" className="flex w-full mr-2 min-w-0">
             {isOpen ? (
               <Input
-                value={tempGoal}
-                onChange={(e) => setTempGoal(e.target.value)}
+                value={tempGoalTitle}
+                onChange={(e) => setTempGoalTitle(e.target.value)}
                 onKeyDown={(e) => e.key === "Enter" && handleSetGoal()}
                 className={cn("w-full h-6 bg-inherit border-0 p-1")}
                 placeholder="Insert a new overarching goal"
@@ -61,9 +66,11 @@ const OverarchingGoal: React.FC<{ onOpenChange: (open: boolean) => void }> = ({
               <div>
                 <span className="hidden md:inline-flex truncate">
                   <div className="mr-1">{"Overarching goal: "}</div>
-                  <div>{goal}</div>
+                  <div>{overarchingGoal.title}</div>
+                </span>
+                <span className="inline-flex md:hidden">
+                  {overarchingGoal.title}
                 </span>
-                <span className="inline-flex md:hidden">{goal}</span>
               </div>
             )}
           </div>
@@ -112,4 +119,4 @@ const OverarchingGoal: React.FC<{ onOpenChange: (open: boolean) => void }> = ({
   );
 };
 
-export { OverarchingGoal };
+export { OverarchingGoalComponent };