From 64e2222e3b1604739012a75e999c5ad0f5e70ac6 Mon Sep 17 00:00:00 2001
From: Jim Hodapp <james.hodapp@gmail.com>
Date: Mon, 17 Jun 2024 10:08:15 -0500
Subject: [PATCH] Update the wording to be about selecting a coaching session,
 and disable select boxes until selected in proper order

---
 .../ui/dashboard/select-coaching-session.tsx  | 61 ++++++++++++++++---
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/components/ui/dashboard/select-coaching-session.tsx b/src/components/ui/dashboard/select-coaching-session.tsx
index 57d7dc5..21d527e 100644
--- a/src/components/ui/dashboard/select-coaching-session.tsx
+++ b/src/components/ui/dashboard/select-coaching-session.tsx
@@ -9,7 +9,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -18,7 +17,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
 import { fetchOrganizationsByUserId } from "@/lib/api/organizations";
 import { Organization, defaultOrganizations } from "@/types/organization";
 import { useEffect, useState } from "react";
@@ -32,6 +30,31 @@ export function SelectCoachingSession({
   userUUID,
   ...props
 }: CoachingSessionProps) {
+  const [organizationSelection, setOrganizationSelection] =
+    useState<string>("");
+  const [relationshipSelection, setRelationshipSelection] =
+    useState<string>("");
+  const [coachSessionSelection, setCoachingSessionSelection] =
+    useState<string>("");
+
+  const handleOrganizationSelectionChange = (
+    event: React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    setOrganizationSelection(event.target.value);
+  };
+
+  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()
   );
@@ -53,13 +76,19 @@ export function SelectCoachingSession({
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Organization Relationship</CardTitle>
-        <CardDescription>Select current organization & coachee</CardDescription>
+        <CardTitle>Join a Coaching Session</CardTitle>
+        <CardDescription>
+          Select current organization, relationship and session
+        </CardDescription>
       </CardHeader>
       <CardContent className="grid gap-6">
         <div className="grid gap-2">
           <Label htmlFor="organization">Organization</Label>
-          <Select defaultValue="0">
+          <Select
+            defaultValue="0"
+            value={organizationSelection}
+            onValueChange={setOrganizationSelection}
+          >
             <SelectTrigger id="organization">
               <SelectValue placeholder="Select" />
             </SelectTrigger>
@@ -74,7 +103,12 @@ export function SelectCoachingSession({
         </div>
         <div className="grid gap-2">
           <Label htmlFor="relationship">Relationship</Label>
-          <Select defaultValue="caleb">
+          <Select
+            defaultValue="caleb"
+            disabled={!organizationSelection}
+            value={relationshipSelection}
+            onValueChange={setRelationshipSelection}
+          >
             <SelectTrigger id="relationship">
               <SelectValue placeholder="Select" />
             </SelectTrigger>
@@ -90,7 +124,12 @@ export function SelectCoachingSession({
         </div>
         <div className="grid gap-2">
           <Label htmlFor="session">Coaching Session</Label>
-          <Select defaultValue="today">
+          <Select
+            defaultValue="today"
+            disabled={!relationshipSelection}
+            value={coachSessionSelection}
+            onValueChange={setCoachingSessionSelection}
+          >
             <SelectTrigger id="session">
               <SelectValue placeholder="Select" />
             </SelectTrigger>
@@ -102,8 +141,12 @@ export function SelectCoachingSession({
         </div>
       </CardContent>
       <CardFooter>
-        <Button variant="outline" className="w-full">
-          Apply
+        <Button
+          variant="outline"
+          className="w-full"
+          disabled={!coachSessionSelection}
+        >
+          Join
         </Button>
       </CardFooter>
     </Card>