Clean up dynamic select component

Author: qafui

src/components/ui/dashboard/dynamic-api-select.tsx

@@ -10,6 +10,8 @@ interface DynamicApiSelectProps<T> {
   placeholder?: string;
   getOptionLabel: (item: T) => string;
   getOptionValue: (item: T) => string;
+  elementId: string;
+  groupByDate?: boolean;
 }
 
 interface ApiResponse<T> {
@@ -24,7 +26,9 @@ export function DynamicApiSelect<T>({
   onChange,
   placeholder = "Select an organization",
   getOptionLabel,
-  getOptionValue
+  getOptionValue,
+  elementId,
+  groupByDate
 }: DynamicApiSelectProps<T>) {
   const { data: response, isLoading, error } = useApiData<ApiResponse<T>>(url, { method, params });
   const [value, setValue] = useState<string>('');
@@ -41,11 +45,13 @@ export function DynamicApiSelect<T>({
   const items = response.data;
 
   return (
-    <Select value={value} onValueChange={handleValueChange}>
-      <SelectTrigger className="w-[180px]">
+    <Select
+      value={value}
+      onValueChange={handleValueChange}>
+      <SelectTrigger id={elementId} className='w-auto'>
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
-      <SelectContent>
+      <SelectContent className='w-full'>
         {items.map((item, index) => (
           <SelectItem key={index} value={getOptionValue(item)}>
             {getOptionLabel(item)}

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

@@ -1,75 +1,90 @@
-import React, { useState } from 'react';
+import React, { MouseEventHandler, useState } from 'react';
 import { Id } from "@/types/general";
+import Link from 'next/link';
 import { DynamicApiSelect } from './dynamic-api-select';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Organization } from '@/types/organization';
 import { CoachingRelationshipWithUserNames } from '@/types/coaching_relationship_with_user_names';
 import { CoachingSession } from '@/types/coaching-session';
 import { DateTime } from 'ts-luxon';
+import { Label } from "@/components/ui/label";
+import { Button } from '../button';
+
 
 export interface CoachingSessionCardProps {
   userId: Id;
 }
 
 export function JoinCoachingSession({ userId: userId }: CoachingSessionCardProps) {
-  const [organization, setOrganizations] = useState<string | null>(null);
-  const [relationship, setRelationships] = useState<string | null>(null);
-  const [sessions, setSessions] = useState<string | null>(null);
-
-  const handleOrganizationSelection = (value: string) => {
-    setOrganizations(value)
-    setRelationships(null) // Reset second selection when first changes
-  }
-
-  const handleRelationshipSelection = (value: string) => {
-    setRelationships(value);
-    setSessions(null);
-  }
-
-  const handleSessionSelection = (value: string) => {
-    setSessions(value);
-  }
+  const [organizationId, setOrganizationId] = useState<string | null>(null);
+  const [relationshipId, setRelationshipId] = useState<string | null>(null);
+  const [sessionId, setSessionId] = useState<string | null>(null);
 
   return (
     <Card className="w-[300px]">
       <CardHeader>
-        <CardTitle>Make Your Selection</CardTitle>
+        <CardTitle>Join a Coaching Session</CardTitle>
       </CardHeader>
-      <CardContent>
-        <div className="space-y-4">
+      <CardContent className='grid gap-6'>
+        <div className="grid gap-2">
+          <Label htmlFor='organization-selector'>Organization</Label>
+
           <DynamicApiSelect<Organization>
             url="/organizations"
             params={{ userId }}
-            onChange={handleOrganizationSelection}
+            onChange={setOrganizationId}
             placeholder="Select an organization"
             getOptionLabel={(org) => org.name}
             getOptionValue={(org) => org.id.toString()}
+            elementId='organization-selector'
           />
-          {organization && (
+        </div>
+        {organizationId && (
+          <div className="grid gap-2">
+            <Label htmlFor='relationship-selector'>Relationship</Label>
+
             <DynamicApiSelect<CoachingRelationshipWithUserNames>
-              url={`/organizations/${organization}/coaching_relationships`}
-              params={{ organization }}
-              onChange={handleRelationshipSelection}
+              url={`/organizations/${organizationId}/coaching_relationships`}
+              params={{ organizationId }}
+              onChange={setRelationshipId}
               placeholder="Select coaching relationship"
-              getOptionLabel={(relationship) => relationship.coach_first_name}
+              getOptionLabel={
+                (relationship) =>
+                  `${relationship.coach_first_name} ${relationship.coach_last_name} -> ${relationship.coachee_first_name} ${relationship.coach_last_name}`
+              }
               getOptionValue={(relationship) => relationship.id.toString()}
+              elementId='relationship-selector'
             />
-          )}
-          {relationship && (
+          </div>
+        )}
+        {relationshipId && (
+          <div className="grid gap-2">
+            <Label htmlFor='session-selector'>Coaching Session</Label>
+
             <DynamicApiSelect<CoachingSession>
               url="/coaching_sessions"
               params={{
-                coaching_relationship_id: relationship,
+                coaching_relationship_id: relationshipId,
                 from_date: DateTime.now().minus({ month: 1 }).toISODate(),
                 to_Date: DateTime.now().plus({ month: 1 }).toISODate()
               }}
-              onChange={handleRelationshipSelection}
+              onChange={setSessionId}
               placeholder="Select coaching session"
               getOptionLabel={(session) => session.date.toString()}
               getOptionValue={(session) => session.id.toString()}
+              elementId='session-selector'
             />
-          )}
-        </div>
+          </div>
+        )}
+        {sessionId && (
+          <div className='grid gap-2'>
+            <Button variant='outline' className='w-full'>
+              <Link href={`/coaching-sessions/${sessionId}`}>
+                Join Session
+              </Link>
+            </Button>
+          </div>
+        )}
       </CardContent>
     </Card>
   )