wip: loaded selected update

src/components/dashboard/coaching-session/coaching-session-card.tsx

@@ -5,6 +5,11 @@ import { Id } from "@/types/general";
 import { Select, SelectContent, SelectGroup, SelectLabel, SelectTrigger, SelectValue } from "@radix-ui/react-select";
 import LoadedSelect from "@/components/shared/loaded-select";
 import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
+import { CoachingSession } from "@/types/coaching-session";
+import { CoachingRelationshipWithUserNames } from "@/types/coaching_relationship_with_user_names";
+import { Organization } from "@/types/organization";
 
 export interface CoachingSessionCardProps {
     userId: Id
@@ -14,15 +19,42 @@ export function CoachingSessionCard({
     userId: userId,
 }: CoachingSessionCardProps) {
 
+    const { organizationId, setOrganizationId } = useAppStateStore(
+        (state) => state
+    );
+    const { relationshipId, setRelationshipId } = useAppStateStore(
+        (state) => state
+    );
+    const { coachingSessionId, setCoachingSessionId } = useAppStateStore(
+        (state) => state
+    );
 
+    const [organizations, setOrganizations] = useState<Organization[]>([]);
+    const [coachingRelationships, setCoachingRelationships] = useState<
+        CoachingRelationshipWithUserNames[]
+    >([]);
+    const [coachingSessions, setCoachingSessions] = useState<CoachingSession[]>(
+        []
+    );
+
+    useEffect(() => {
+        async function loadCoachingRelationships() {
+            if (!organizationId) return;
+            console.debug("organizationId: " + organizationId);
+        }
+        loadCoachingRelationships();
+    }, [organizationId]);
+
+    function selectOrganization() {
+        setOrganizationId(organizationId);
+    }
     return (
         <Card>
             <CardHeader>
                 <CardTitle>Join a Coaching Session</CardTitle>
             </CardHeader>
             <CardContent className={cn("grid", "gap-6")}>
                 <div className={cn("grid", "gap-2")}>
-
                     <Select>
                         <SelectTrigger className="w-[180px]" aria-label="Choose Organization">
                             <SelectValue placeholder="Select organization" />
@@ -33,12 +65,41 @@ export function CoachingSessionCard({
                                 <LoadedSelect
                                     url="/organizations"
                                     params={{ userId }}
+                                    selectedItem={selectedItem}
+                                    onSelectedValue={selectOrganization}
                                 />
                             </SelectGroup>
                         </SelectContent>
                     </Select>
-
                 </div>
+                {
+                    organizationId
+                        ?
+                        (<div className={cn("grid", "gap-2")}>
+                            <Select>
+                                <SelectTrigger className="w-[180px]" aria-label="Choose Coaching Relationship">
+                                    <SelectValue placeholder="Select Coaching Relationship" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectGroup>
+                                        <SelectLabel>Organizations</SelectLabel>
+                                        <LoadedSelect
+                                            url="/organizations"
+                                            params={{ userId }}
+                                            onValueChange={setOrganizationId}
+                                        />
+                                    </SelectGroup>
+                                </SelectContent>
+                            </Select>
+                        </div>)
+                        :
+                        (
+                            <div className={cn("grid", "gap-2")}>
+                                No organization Found
+                            </div>
+                        )
+                }
+
             </CardContent>
         </Card>
     )

src/components/shared/loaded-select.tsx

@@ -1,20 +1,28 @@
 import useRequest from "@/hooks/use-request";
-import { SelectItem } from "@radix-ui/react-select";
-import { memo, useMemo } from "react";
+import { Select, SelectItem } from "@radix-ui/react-select";
+import { memo, useEffect, useMemo, useState } from "react";
 import { SWRResponse } from "swr";
 
 export type SelectListDataType = any;
 
 export interface LoadedSelectProps {
-    url: string,
-    params?: any,
+    url: string;
+    params?: any;
+    selectedItem?: (value: string) => void;
+    onSelectedValue?: (value: string) => void;
 }
 
 const LoadedSelect = memo(function LoadedSelect({
     url: url,
     params: params,
+    selectedItem,
+    onSelectedValue
 }: LoadedSelectProps): JSX.Element {
 
+    const [selectedValue, setSelectedValue] = useState<string>("");
+
+    useEffect(() => setSelectedValue(selectedValue), [selectedValue]);
+
     const {
         data: selectList,
         error,
@@ -37,6 +45,10 @@ const LoadedSelect = memo(function LoadedSelect({
         });
     }, [selectList]);
 
+    const handleValueChange = (value: string) => {
+        setSelectedValue(value);
+    };
+
     if (error) {
         return <div>Error: {error.message}</div>
     }
@@ -45,7 +57,13 @@ const LoadedSelect = memo(function LoadedSelect({
         return <div>Loading...</div>
     }
 
-    return (<div>{selectItemList}</div>)
+    return (
+        <Select
+            onValueChange={handleValueChange}
+        >{
+                selectItemList
+            }
+        </Select>)
 });
 
 export default LoadedSelect;