Skip to content

Commit 5efcf61

Browse files
committed
Persist placeholder with useEffect
1 parent 6e898e6 commit 5efcf61

File tree

1 file changed

+40
-21
lines changed

1 file changed

+40
-21
lines changed

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

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useEffect } from "react";
22
import { useAppStateStore } from "@/lib/providers/app-state-store-provider";
33
import { Id } from "@/types/general";
44
import { DynamicApiSelect } from "./dynamic-api-select";
@@ -18,64 +18,87 @@ export interface CoachingSessionCardProps {
1818
userId: Id;
1919
}
2020

21-
export function JoinCoachingSession({
22-
userId: userId,
23-
}: CoachingSessionCardProps) {
21+
export function JoinCoachingSession({ userId }: CoachingSessionCardProps) {
2422
const {
2523
setOrganization,
2624
setOrganizationId,
2725
setCoachingRelationship,
2826
setRelationshipId,
2927
setCoachingSession,
3028
setCoachingSessionId,
29+
organization,
30+
coachingRelationship,
31+
coachingSession,
3132
} = useAppStateStore((state) => ({
3233
setOrganization: state.setOrganization,
3334
setOrganizationId: state.setOrganizationId,
3435
setCoachingRelationship: state.setCoachingRelationship,
3536
setRelationshipId: state.setRelationshipId,
3637
setCoachingSession: state.setCoachingSession,
3738
setCoachingSessionId: state.setCoachingSessionId,
39+
organization: state.organization,
40+
coachingRelationship: state.coachingRelationship,
41+
coachingSession: state.coachingSession,
3842
}));
43+
3944
let organizationId = useAppStateStore((state) => state.organizationId);
4045
let relationshipId = useAppStateStore((state) => state.relationshipId);
4146
let coachingSessionId = useAppStateStore((state) => state.coachingSessionId);
4247

4348
const [orgPlaceholder, setOrgPlaceholder] = useState(
4449
"Select an organization"
4550
);
46-
const [relPlaceHolder, setRelPlaceHolder] = useState(
51+
const [relPlaceholder, setRelPlaceholder] = useState(
4752
"Select coaching relationship"
4853
);
49-
const [sessionPlaceHolder, setSessionPlaceHolder] =
54+
const [sessionPlaceholder, setSessionPlaceholder] =
5055
useState("Select a session");
5156

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+
5383
const FROM_DATE = DateTime.now().minus({ month: 1 }).toISODate();
5484
const TO_DATE = DateTime.now().plus({ month: 1 }).toISODate();
5585

56-
//@TODO: pass selected organization from organization array
5786
const handleOrganizationSelection = (value: Id) => {
5887
setOrganizationId(value);
5988
if (value) {
6089
fetchOrganization(value).then(([organization]) => {
61-
setOrgPlaceholder(organization.name);
62-
organizationId = setOrganization(organization);
90+
setOrganization(organization);
6391
});
6492
}
6593
};
6694

67-
//@TODO: pass selected relationship from relationship array
6895
const handleRelationshipSelection = (selectedRelationship: Id) => {
6996
setRelationshipId(selectedRelationship);
7097
if (selectedRelationship && organizationId) {
7198
fetchCoachingRelationshipWithUserNames(
7299
organizationId,
73100
selectedRelationship
74101
).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);
79102
setCoachingRelationship(relationship);
80103
});
81104
}
@@ -88,7 +111,6 @@ export function JoinCoachingSession({
88111
(session) => session.id === selectedSession
89112
);
90113
if (theSession) {
91-
setSessionPlaceHolder(theSession.date);
92114
setCoachingSession(theSession);
93115
setCoachingSessionId(theSession.id);
94116
}
@@ -104,7 +126,6 @@ export function JoinCoachingSession({
104126
<CardContent className="grid gap-6">
105127
<div className="grid gap-2">
106128
<Label htmlFor="organization-selector">Organization</Label>
107-
108129
<DynamicApiSelect<Organization>
109130
url="/organizations"
110131
params={{ userId }}
@@ -118,12 +139,11 @@ export function JoinCoachingSession({
118139
{organizationId && (
119140
<div className="grid gap-2">
120141
<Label htmlFor="relationship-selector">Relationship</Label>
121-
122142
<DynamicApiSelect<CoachingRelationshipWithUserNames>
123143
url={`/organizations/${organizationId}/coaching_relationships`}
124144
params={{ organizationId }}
125145
onChange={handleRelationshipSelection}
126-
placeholder={relPlaceHolder}
146+
placeholder={relPlaceholder}
127147
getOptionLabel={(relationship) =>
128148
`${relationship.coach_first_name} ${relationship.coach_last_name} -> ${relationship.coachee_first_name} ${relationship.coachee_last_name}`
129149
}
@@ -135,7 +155,6 @@ export function JoinCoachingSession({
135155
{relationshipId && (
136156
<div className="grid gap-2">
137157
<Label htmlFor="session-selector">Coaching Session</Label>
138-
139158
<DynamicApiSelect<CoachingSession>
140159
url="/coaching_sessions"
141160
params={{
@@ -144,7 +163,7 @@ export function JoinCoachingSession({
144163
to_Date: TO_DATE,
145164
}}
146165
onChange={handleSessionSelection}
147-
placeholder={sessionPlaceHolder}
166+
placeholder={sessionPlaceholder}
148167
getOptionLabel={(session) => session.date.toString()}
149168
getOptionValue={(session) => session.id.toString()}
150169
elementId="session-selector"

0 commit comments

Comments
 (0)