Fetch all coaching relationships for the current user by organization id

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

@@ -17,8 +17,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { fetchCoachingRelationshipsWithUserNames } from "@/lib/api/coaching-relationships";
 import { fetchOrganizationsByUserId } from "@/lib/api/organizations";
-import { Organization, defaultOrganizations } from "@/types/organization";
+import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship_with_user_names";
+import { Organization } from "@/types/organization";
 import { useEffect, useState } from "react";
 
 export interface CoachingSessionProps {
@@ -30,40 +32,25 @@ export function SelectCoachingSession({
   userUUID,
   ...props
 }: CoachingSessionProps) {
-  const [organizationSelection, setOrganizationSelection] =
-    useState<string>("");
-  const [relationshipSelection, setRelationshipSelection] =
-    useState<string>("");
-  const [coachSessionSelection, setCoachingSessionSelection] =
-    useState<string>("");
+  const [organizationUUID, setOrganizationUUID] = useState<string>("");
+  const [relationshipUUID, setRelationshipUUID] = useState<string>("");
+  const [coachingSessionUUID, setCoachingSessionUUID] = useState<string>("");
 
-  const handleOrganizationSelectionChange = (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    setOrganizationSelection(event.target.value);
-  };
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+  const [coachingRelationships, setCoachingRelationships] = useState<
+    CoachingRelationshipWithUserNames[]
+  >([]);
 
-  const handleRelationshipSelectionChange = (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    setRelationshipSelection(event.target.value);
-  };
-
-  const handleCoachingSessionChange = (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    setCoachingSessionSelection(event.target.value);
-  };
-
-  const [organizations, setOrganizations] = useState<Organization[]>(
-    defaultOrganizations()
-  );
   useEffect(() => {
     async function loadOrganizations() {
       if (!userUUID) return;
 
       await fetchOrganizationsByUserId(userUUID)
         .then(([orgs]) => {
+          // Apparently it's normal for this to be triggered twice in modern
+          // React versions in strict + development modes
+          // https://stackoverflow.com/questions/60618844/react-hooks-useeffect-is-called-twice-even-if-an-empty-array-is-used-as-an-ar
+          console.debug("setOrganizations: " + JSON.stringify(orgs));
           setOrganizations(orgs);
         })
         .catch(([err]) => {
@@ -73,6 +60,24 @@ export function SelectCoachingSession({
     loadOrganizations();
   }, [userUUID]);
 
+  useEffect(() => {
+    async function loadCoachingRelationships() {
+      if (!organizationUUID) return;
+
+      await fetchCoachingRelationshipsWithUserNames(organizationUUID)
+        .then(([relationships]) => {
+          console.debug(
+            "setCoachingRelationships: " + JSON.stringify(relationships)
+          );
+          setCoachingRelationships(relationships);
+        })
+        .catch(([err]) => {
+          console.error("Failed to fetch coaching relationships: " + err);
+        });
+    }
+    loadCoachingRelationships();
+  }, [organizationUUID]);
+
   return (
     <Card>
       <CardHeader>
@@ -86,15 +91,15 @@ export function SelectCoachingSession({
           <Label htmlFor="organization">Organization</Label>
           <Select
             defaultValue="0"
-            value={organizationSelection}
-            onValueChange={setOrganizationSelection}
+            value={organizationUUID}
+            onValueChange={setOrganizationUUID}
           >
             <SelectTrigger id="organization">
-              <SelectValue placeholder="Select" />
+              <SelectValue placeholder="Select organization" />
             </SelectTrigger>
             <SelectContent>
-              {organizations.map((organization, index) => (
-                <SelectItem value={index.toString()} key={organization.id}>
+              {organizations.map((organization) => (
+                <SelectItem value={organization.id} key={organization.id}>
                   {organization.name}
                 </SelectItem>
               ))}
@@ -105,33 +110,34 @@ export function SelectCoachingSession({
           <Label htmlFor="relationship">Relationship</Label>
           <Select
             defaultValue="caleb"
-            disabled={!organizationSelection}
-            value={relationshipSelection}
-            onValueChange={setRelationshipSelection}
+            disabled={!organizationUUID}
+            value={relationshipUUID}
+            onValueChange={setRelationshipUUID}
           >
             <SelectTrigger id="relationship">
-              <SelectValue placeholder="Select" />
+              <SelectValue placeholder="Select coaching relationship" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="caleb">
-                Jim Hodapp -&gt; Caleb Bourg
-              </SelectItem>
-              <SelectItem value="other_coachee">
-                Jim Hodapp -&gt; Other Coachee
-              </SelectItem>
+              {coachingRelationships.map((relationship) => (
+                <SelectItem value={relationship.id} key={relationship.id}>
+                  {relationship.coach_first_name} {relationship.coach_last_name}{" "}
+                  -&gt; {relationship.coachee_first_name}{" "}
+                  {relationship.coachee_last_name}
+                </SelectItem>
+              ))}
             </SelectContent>
           </Select>
         </div>
         <div className="grid gap-2">
           <Label htmlFor="session">Coaching Session</Label>
           <Select
             defaultValue="today"
-            disabled={!relationshipSelection}
-            value={coachSessionSelection}
-            onValueChange={setCoachingSessionSelection}
+            disabled={!relationshipUUID}
+            value={coachingSessionUUID}
+            onValueChange={setCoachingSessionUUID}
           >
             <SelectTrigger id="session">
-              <SelectValue placeholder="Select" />
+              <SelectValue placeholder="Select coaching session" />
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="today">Today @ 5 pm</SelectItem>
@@ -144,7 +150,7 @@ export function SelectCoachingSession({
         <Button
           variant="outline"
           className="w-full"
-          disabled={!coachSessionSelection}
+          disabled={!coachingSessionUUID}
         >
           Join
         </Button>

src/lib/api/coaching-relationships.ts

@@ -1 +1,55 @@
 // Interacts with the coaching_relationship endpoints
+
+import {
+  CoachingRelationshipWithUserNames,
+  coachingRelationshipsWithUserNamesToString,
+  defaultCoachingRelationshipsWithUserNames,
+  isCoachingRelationshipWithUserNamesArray
+} from "@/types/coaching_relationship_with_user_names";
+import { Id } from "@/types/general";
+import { AxiosError, AxiosResponse } from "axios";
+
+export const fetchCoachingRelationshipsWithUserNames = async (
+  organizationId: Id
+): Promise<[CoachingRelationshipWithUserNames[], string]> => {
+  const axios = require("axios");
+
+  var relationships: CoachingRelationshipWithUserNames[] = defaultCoachingRelationshipsWithUserNames();
+  var err: string = "";
+
+  const data = await axios
+    .get(`http://localhost:4000/organizations/${organizationId}/coaching_relationships`, {
+      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
+      console.debug(response);
+      if (isCoachingRelationshipWithUserNamesArray(response.data.data)) {
+        relationships = response.data.data;
+        console.debug(
+          `CoachingRelationshipsWithUserNames: ` + coachingRelationshipsWithUserNamesToString(relationships) + `.`
+        );
+      }
+    })
+    .catch(function (error: AxiosError) {
+      // handle error
+      console.error(error.response?.status);
+      if (error.response?.status == 401) {
+        console.error("Retrieval of CoachingRelationshipsWithUserNames failed: unauthorized.");
+        err = "Retrieval of CoachingRelationshipsWithUserNames failed: unauthorized.";
+      } else {
+        console.log(error);
+        console.error(
+          `Retrieval of CoachingRelationshipsWithUserNames by organization Id (` + organizationId + `) failed.`
+        );
+        err =
+          `Retrieval of CoachingRealtionshipsWithUserNames by organization Id (` + organizationId + `) failed.`;
+      }
+    });
+
+  return [relationships, err];
+};

src/types/coaching_relationship_with_user_names.ts

@@ -0,0 +1,66 @@
+import { DateTime } from "ts-luxon";
+import { Id } from "@/types/general";
+
+// This must always reflect the Rust struct on the backend
+// entity_api::coaching_relationship::CoachingRelationshipWithUserNames
+export interface CoachingRelationshipWithUserNames {
+  id: Id;
+  coach_id: Id;
+  coachee_id: Id;
+  coach_first_name: String;
+  coach_last_name: String;
+  coachee_first_name: String;
+  coachee_last_name: String;
+  created_at: DateTime;
+  updated_at: DateTime;
+}
+
+export function isCoachingRelationshipWithUserNames(value: unknown): value is CoachingRelationshipWithUserNames {
+    if (!value || typeof value !== "object") {
+      return false;
+    }
+    const object = value as Record<string, unknown>;
+
+    return (
+      typeof object.id === "string" &&
+      typeof object.coach_id === "string" &&
+      typeof object.coachee_id === "string" &&
+      typeof object.coach_first_name === "string" &&
+      typeof object.coach_last_name === "string" &&
+      typeof object.coachee_first_name === "string" &&
+      typeof object.coachee_last_name === "string" &&
+      typeof object.created_at === "string" &&
+      typeof object.updated_at === "string"
+    );
+  }
+
+export function isCoachingRelationshipWithUserNamesArray(value: unknown): value is CoachingRelationshipWithUserNames[] {
+  return Array.isArray(value) && value.every(isCoachingRelationshipWithUserNames);
+}
+
+export function defaultCoachingRelationshipWithUserNames(): CoachingRelationshipWithUserNames {
+    var now = DateTime.now();
+    return {
+      id: "",
+      coach_id: "",
+      coachee_id: "",
+      coach_first_name: "",
+      coach_last_name: "",
+      coachee_first_name: "",
+      coachee_last_name: "",
+      created_at: now,
+      updated_at: now,
+    };
+  }
+
+  export function defaultCoachingRelationshipsWithUserNames(): CoachingRelationshipWithUserNames[] {
+    return [defaultCoachingRelationshipWithUserNames()];
+  }
+
+  export function coachingRelationshipWithUserNamesToString(relationship: CoachingRelationshipWithUserNames): string {
+    return JSON.stringify(relationship);
+  }
+
+  export function coachingRelationshipsWithUserNamesToString(relationships: CoachingRelationshipWithUserNames[]): string {
+    return JSON.stringify(relationships);
+  }