1
- import React , { useState } from "react" ;
1
+ import React , { useState , useEffect } from "react" ;
2
2
import { useAppStateStore } from "@/lib/providers/app-state-store-provider" ;
3
3
import { Id } from "@/types/general" ;
4
4
import { DynamicApiSelect } from "./dynamic-api-select" ;
@@ -18,64 +18,87 @@ export interface CoachingSessionCardProps {
18
18
userId : Id ;
19
19
}
20
20
21
- export function JoinCoachingSession ( {
22
- userId : userId ,
23
- } : CoachingSessionCardProps ) {
21
+ export function JoinCoachingSession ( { userId } : CoachingSessionCardProps ) {
24
22
const {
25
23
setOrganization,
26
24
setOrganizationId,
27
25
setCoachingRelationship,
28
26
setRelationshipId,
29
27
setCoachingSession,
30
28
setCoachingSessionId,
29
+ organization,
30
+ coachingRelationship,
31
+ coachingSession,
31
32
} = useAppStateStore ( ( state ) => ( {
32
33
setOrganization : state . setOrganization ,
33
34
setOrganizationId : state . setOrganizationId ,
34
35
setCoachingRelationship : state . setCoachingRelationship ,
35
36
setRelationshipId : state . setRelationshipId ,
36
37
setCoachingSession : state . setCoachingSession ,
37
38
setCoachingSessionId : state . setCoachingSessionId ,
39
+ organization : state . organization ,
40
+ coachingRelationship : state . coachingRelationship ,
41
+ coachingSession : state . coachingSession ,
38
42
} ) ) ;
43
+
39
44
let organizationId = useAppStateStore ( ( state ) => state . organizationId ) ;
40
45
let relationshipId = useAppStateStore ( ( state ) => state . relationshipId ) ;
41
46
let coachingSessionId = useAppStateStore ( ( state ) => state . coachingSessionId ) ;
42
47
43
48
const [ orgPlaceholder , setOrgPlaceholder ] = useState (
44
49
"Select an organization"
45
50
) ;
46
- const [ relPlaceHolder , setRelPlaceHolder ] = useState (
51
+ const [ relPlaceholder , setRelPlaceholder ] = useState (
47
52
"Select coaching relationship"
48
53
) ;
49
- const [ sessionPlaceHolder , setSessionPlaceHolder ] =
54
+ const [ sessionPlaceholder , setSessionPlaceholder ] =
50
55
useState ( "Select a session" ) ;
51
56
52
- //@TODO : abstract to state or utility function (apply to preset component)
57
+ useEffect ( ( ) => {
58
+ if ( organization && organizationId ) {
59
+ setOrgPlaceholder ( organization . name ) ;
60
+ } else {
61
+ setOrgPlaceholder ( "Select an organization" ) ;
62
+ }
63
+ } , [ organization , organizationId ] ) ;
64
+
65
+ useEffect ( ( ) => {
66
+ if ( coachingRelationship && relationshipId ) {
67
+ setRelPlaceholder (
68
+ `${ coachingRelationship . coach_first_name } ${ coachingRelationship . coach_last_name } -> ${ coachingRelationship . coachee_first_name } ${ coachingRelationship . coachee_last_name } `
69
+ ) ;
70
+ } else {
71
+ setRelPlaceholder ( "Select coaching relationship" ) ;
72
+ }
73
+ } , [ coachingRelationship , relationshipId ] ) ;
74
+
75
+ useEffect ( ( ) => {
76
+ if ( coachingSession && coachingSessionId ) {
77
+ setSessionPlaceholder ( coachingSession . date ) ;
78
+ } else {
79
+ setSessionPlaceholder ( "Select a session" ) ;
80
+ }
81
+ } , [ coachingSession , coachingSessionId ] ) ;
82
+
53
83
const FROM_DATE = DateTime . now ( ) . minus ( { month : 1 } ) . toISODate ( ) ;
54
84
const TO_DATE = DateTime . now ( ) . plus ( { month : 1 } ) . toISODate ( ) ;
55
85
56
- //@TODO : pass selected organization from organization array
57
86
const handleOrganizationSelection = ( value : Id ) => {
58
87
setOrganizationId ( value ) ;
59
88
if ( value ) {
60
89
fetchOrganization ( value ) . then ( ( [ organization ] ) => {
61
- setOrgPlaceholder ( organization . name ) ;
62
- organizationId = setOrganization ( organization ) ;
90
+ setOrganization ( organization ) ;
63
91
} ) ;
64
92
}
65
93
} ;
66
94
67
- //@TODO : pass selected relationship from relationship array
68
95
const handleRelationshipSelection = ( selectedRelationship : Id ) => {
69
96
setRelationshipId ( selectedRelationship ) ;
70
97
if ( selectedRelationship && organizationId ) {
71
98
fetchCoachingRelationshipWithUserNames (
72
99
organizationId ,
73
100
selectedRelationship
74
101
) . then ( ( relationship ) => {
75
- setRelPlaceHolder (
76
- `${ relationship . coach_first_name } ${ relationship . coach_last_name } -> ${ relationship . coachee_first_name } ${ relationship . coachee_last_name } `
77
- ) ;
78
- setRelationshipId ( relationship . id ) ;
79
102
setCoachingRelationship ( relationship ) ;
80
103
} ) ;
81
104
}
@@ -88,7 +111,6 @@ export function JoinCoachingSession({
88
111
( session ) => session . id === selectedSession
89
112
) ;
90
113
if ( theSession ) {
91
- setSessionPlaceHolder ( theSession . date ) ;
92
114
setCoachingSession ( theSession ) ;
93
115
setCoachingSessionId ( theSession . id ) ;
94
116
}
@@ -104,7 +126,6 @@ export function JoinCoachingSession({
104
126
< CardContent className = "grid gap-6" >
105
127
< div className = "grid gap-2" >
106
128
< Label htmlFor = "organization-selector" > Organization</ Label >
107
-
108
129
< DynamicApiSelect < Organization >
109
130
url = "/organizations"
110
131
params = { { userId } }
@@ -118,12 +139,11 @@ export function JoinCoachingSession({
118
139
{ organizationId && (
119
140
< div className = "grid gap-2" >
120
141
< Label htmlFor = "relationship-selector" > Relationship</ Label >
121
-
122
142
< DynamicApiSelect < CoachingRelationshipWithUserNames >
123
143
url = { `/organizations/${ organizationId } /coaching_relationships` }
124
144
params = { { organizationId } }
125
145
onChange = { handleRelationshipSelection }
126
- placeholder = { relPlaceHolder }
146
+ placeholder = { relPlaceholder }
127
147
getOptionLabel = { ( relationship ) =>
128
148
`${ relationship . coach_first_name } ${ relationship . coach_last_name } -> ${ relationship . coachee_first_name } ${ relationship . coachee_last_name } `
129
149
}
@@ -135,7 +155,6 @@ export function JoinCoachingSession({
135
155
{ relationshipId && (
136
156
< div className = "grid gap-2" >
137
157
< Label htmlFor = "session-selector" > Coaching Session</ Label >
138
-
139
158
< DynamicApiSelect < CoachingSession >
140
159
url = "/coaching_sessions"
141
160
params = { {
@@ -144,7 +163,7 @@ export function JoinCoachingSession({
144
163
to_Date : TO_DATE ,
145
164
} }
146
165
onChange = { handleSessionSelection }
147
- placeholder = { sessionPlaceHolder }
166
+ placeholder = { sessionPlaceholder }
148
167
getOptionLabel = { ( session ) => session . date . toString ( ) }
149
168
getOptionValue = { ( session ) => session . id . toString ( ) }
150
169
elementId = "session-selector"
0 commit comments