Refactor other entity API functions and hooks to use new pattern

src/components/ui/coaching-relationship-selector.tsx

@@ -9,7 +9,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Id } from "@/types/general";
-import { useCoachingRelationships } from "@/lib/api/coaching-relationships";
+import { useCoachingRelationshipList } from "@/lib/api/coaching-relationships";
 import { useEffect } from "react";
 import { useAuthStore } from "@/lib/providers/auth-store-provider";
 import { useCoachingRelationshipStateStore } from "@/lib/providers/coaching-relationship-state-store-provider";
@@ -30,7 +30,7 @@ function CoachingRelationshipsSelectItems({
   organizationId: Id;
 }) {
   const { relationships, isLoading, isError } =
-    useCoachingRelationships(organizationId);
+    useCoachingRelationshipList(organizationId);
   const { setCurrentCoachingRelationships } = useCoachingRelationshipStateStore(
     (state) => state
   );

src/components/ui/coaching-session-selector.tsx

@@ -11,11 +11,11 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { getDateTimeFromString, Id } from "@/types/general";
-import { useCoachingSessions } from "@/lib/api/coaching-sessions";
+import { useCoachingSessionList } from "@/lib/api/coaching-sessions";
 import { useEffect, useState } from "react";
 import { DateTime } from "ts-luxon";
 import { useCoachingSessionStateStore } from "@/lib/providers/coaching-session-state-store-provider";
-import { fetchOverarchingGoalsByCoachingSessionId } from "@/lib/api/overarching-goals";
+import { OverarchingGoalApi } from "@/lib/api/overarching-goals";
 import { OverarchingGoal } from "@/types/overarching-goal";
 import { CoachingSession } from "@/types/coaching-session";
 
@@ -33,11 +33,18 @@ function CoachingSessionsSelectItems({
 }: {
   relationshipId: Id;
 }) {
+  // TODO: for now we hardcode a 2 month window centered around now,
+  // eventually we want to make this be configurable somewhere
+  // (either on the page or elsewhere)
+  const fromDate = DateTime.now().minus({ month: 1 });
+  const toDate = DateTime.now().plus({ month: 1 });
+
   const {
     coachingSessions,
     isLoading: isLoadingSessions,
     isError: isErrorSessions,
-  } = useCoachingSessions(relationshipId);
+    refresh,
+  } = useCoachingSessionList(relationshipId, fromDate, toDate);
 
   const { setCurrentCoachingSessions } = useCoachingSessionStateStore(
     (state) => state
@@ -56,7 +63,7 @@ function CoachingSessionsSelectItems({
       try {
         const sessionIds = coachingSessions?.map((session) => session.id) || [];
         const goalsPromises = sessionIds.map((id) =>
-          fetchOverarchingGoalsByCoachingSessionId(id)
+          OverarchingGoalApi.list(id)
         );
         const fetchedGoals = await Promise.all(goalsPromises);
         setGoals(fetchedGoals);
@@ -163,9 +170,7 @@ export default function CoachingSessionSelector({
 
       setIsLoadingGoal(true);
       try {
-        const goals = await fetchOverarchingGoalsByCoachingSessionId(
-          currentCoachingSessionId
-        );
+        const goals = await OverarchingGoalApi.list(currentCoachingSessionId);
         setCurrentGoal(goals[0]);
       } catch (error) {
         console.error("Error fetching goal:", error);

src/components/ui/coaching-session.tsx

@@ -6,7 +6,7 @@ import { Card, CardHeader } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { useCoachingSessionStateStore } from "@/lib/providers/coaching-session-state-store-provider";
-import { useOverarchingGoalByCoachingSessionId } from "@/lib/api/overarching-goals";
+import { useOverarchingGoalBySession } from "@/lib/api/overarching-goals";
 import { Id } from "@/types/general";
 
 interface CoachingSessionProps {
@@ -59,7 +59,7 @@ const OverarchingGoal: React.FC<OverarchingGoalProps> = ({
     overarchingGoal,
     isLoading: isLoadingOverarchingGoal,
     isError: isErrorOverarchingGoal,
-  } = useOverarchingGoalByCoachingSessionId(coachingSessionId);
+  } = useOverarchingGoalBySession(coachingSessionId);
 
   let titleText: string;
 
@@ -74,4 +74,4 @@ const OverarchingGoal: React.FC<OverarchingGoalProps> = ({
   return <div>{titleText}</div>;
 };
 
-export default CoachingSession;
+export { CoachingSession };

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
@@ -37,7 +37,7 @@ import {
   Id,
   stringToActionStatus,
 } from "@/types/general";
-import { fetchActionsByCoachingSessionId } from "@/lib/api/actions";
+import { useActionList } from "@/lib/api/actions";
 import { DateTime } from "ts-luxon";
 import { siteConfig } from "@/site.config";
 import { Action, actionToString } from "@/types/action";
@@ -74,7 +74,8 @@ const ActionsList: React.FC<{
     UpdatedAt = "updated_at",
   }
 
-  const [actions, setActions] = useState<Action[]>([]);
+  const { actions, isLoading, isError, refresh } =
+    useActionList(coachingSessionId);
   const [newBody, setNewBody] = useState("");
   const [newStatus, setNewStatus] = useState<ItemStatus>(ItemStatus.NotStarted);
   const [newDueBy, setNewDueBy] = useState<DateTime>(DateTime.now());
@@ -89,26 +90,28 @@ const ActionsList: React.FC<{
   );
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
 
-  const addAction = () => {
+  const addAction = async () => {
     if (newBody.trim() === "") return;
 
-    // Call the external onActionAdded handler function which should
-    // store this action in the backend database
-    onActionAdded(newBody, newStatus, newDueBy)
-      .then((action) => {
-        console.trace(
-          "Newly created Action (onActionAdded): " + actionToString(action)
-        );
-        setActions((prevActions) => [...prevActions, action]);
-      })
-      .catch((err) => {
-        console.error("Failed to create new Action: " + err);
-        throw err;
-      });
+    try {
+      // Call the external handler to create the action
+      const action = await onActionAdded(newBody, newStatus, newDueBy);
+
+      console.trace(
+        "Newly created Action (onActionAdded): " + actionToString(action)
+      );
 
-    setNewBody("");
-    setNewStatus(ItemStatus.NotStarted);
-    setNewDueBy(DateTime.now());
+      // Refresh the actions list from the hook
+      refresh();
+
+      // Clear input fields
+      setNewBody("");
+      setNewStatus(ItemStatus.NotStarted);
+      setNewDueBy(DateTime.now());
+    } catch (err) {
+      console.error("Failed to create new Action: " + err);
+      throw err;
+    }
   };
 
   const updateAction = async (
@@ -121,32 +124,18 @@ const ActionsList: React.FC<{
     if (body === "") return;
 
     try {
-      const updatedActions = await Promise.all(
-        actions.map(async (action) => {
-          if (action.id === id) {
-            // Call the external onActionEdited handler function which should
-            // update the stored version of this action in the backend database
-            action = await onActionEdited(id, body, newStatus, newDueBy)
-              .then((updatedAction) => {
-                console.trace(
-                  "Updated Action (onActionUpdated): " +
-                    actionToString(updatedAction)
-                );
+      // Call the external onActionEdited handler function which should
+      // update the stored version of this action in the backend database
+      const updatedAction = await onActionEdited(id, body, newStatus, newDueBy);
 
-                return updatedAction;
-              })
-              .catch((err) => {
-                console.error(
-                  "Failed to update Action (id: " + id + "): " + err
-                );
-                throw err;
-              });
-          }
-          return action;
-        })
+      console.trace(
+        "Updated Action (onActionUpdated): " + actionToString(updatedAction)
       );
 
-      setActions(updatedActions);
+      // Refresh the actions list from the hook
+      refresh();
+
+      // Reset editing UI state
       setEditingId(null);
       setEditBody("");
       setEditStatus(ItemStatus.NotStarted);
@@ -157,22 +146,23 @@ const ActionsList: React.FC<{
     }
   };
 
-  const deleteAction = (id: Id) => {
+  const deleteAction = async (id: Id) => {
     if (id === "") return;
 
-    // Call the external onActionDeleted handler function which should
-    // delete this action from the backend database
-    onActionDeleted(id)
-      .then((action) => {
-        console.trace(
-          "Deleted Action (onActionDeleted): " + actionToString(action)
-        );
-        setActions(actions.filter((action) => action.id !== id));
-      })
-      .catch((err) => {
-        console.error("Failed to Action (id: " + id + "): " + err);
-        throw err;
-      });
+    try {
+      // Delete action in backend
+      const deletedAction = await onActionDeleted(id);
+
+      console.trace(
+        "Deleted Action (onActionDeleted): " + actionToString(deletedAction)
+      );
+
+      // Refresh the actions list from the hook
+      refresh();
+    } catch (err) {
+      console.error("Failed to delete Action (id: " + id + "): " + err);
+      throw err;
+    }
   };
 
   const sortActions = (column: keyof Action) => {
@@ -193,27 +183,6 @@ const ActionsList: React.FC<{
     return 0;
   });
 
-  useEffect(() => {
-    async function loadActions() {
-      if (!coachingSessionId) {
-        console.error(
-          "Failed to fetch Actions since coachingSessionId is not set."
-        );
-        return;
-      }
-
-      await fetchActionsByCoachingSessionId(coachingSessionId)
-        .then((actions) => {
-          console.debug("setActions: " + JSON.stringify(actions));
-          setActions(actions);
-        })
-        .catch(([err]) => {
-          console.error("Failed to fetch Actions: " + err);
-        });
-    }
-    loadActions();
-  }, [coachingSessionId]);
-
   return (
     <div>
       <div className="bg-inherit rounded-lg border border-gray-200 p-6">