Skip to content

Commit e840ad4

Browse files
jhodappjhodapp
committed
Improve the size/styling of the CoachingSessionSelector and SelectCoachingSession components with better padding, text truncation and dedupe repetitive TSX code
1 parent e192903 commit e840ad4

File tree

2 files changed

+69
-66
lines changed

2 files changed

+69
-66
lines changed

‎src/components/ui/coaching-session-selector.tsx

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { DateTime } from "ts-luxon";
1717
import { useCoachingSessionStateStore } from "@/lib/providers/coaching-session-state-store-provider";
1818
import { fetchOverarchingGoalsByCoachingSessionId } from "@/lib/api/overarching-goals";
1919
import { OverarchingGoal } from "@/types/overarching-goal";
20+
import { CoachingSession } from "@/types/coaching-session";
2021

2122
interface CoachingSessionsSelectorProps extends PopoverProps {
2223
/// The CoachingRelationship Id for which to get a list of associated CoachingSessions
@@ -75,67 +76,63 @@ function CoachingSessionsSelectItems({
7576
if (isErrorSessions) return <div>Error loading coaching sessions</div>;
7677
if (!coachingSessions?.length) return <div>No coaching sessions found</div>;
7778

79+
const SessionItem = ({
80+
session,
81+
goals,
82+
sessionIndex,
83+
}: {
84+
session: CoachingSession;
85+
goals: (OverarchingGoal[] | undefined)[];
86+
sessionIndex: number;
87+
}) => (
88+
<SelectItem value={session.id}>
89+
<div className="flex min-w-0 w-[calc(100%-20px)]">
90+
<div className="min-w-0 w-full">
91+
<p className="truncate text-sm font-medium">
92+
{goals[sessionIndex]?.[0]?.title || "No goal set"}
93+
</p>
94+
<p className="truncate text-sm text-gray-400">
95+
{getDateTimeFromString(session.date).toLocaleString(
96+
DateTime.DATETIME_FULL
97+
)}
98+
</p>
99+
</div>
100+
</div>
101+
</SelectItem>
102+
);
103+
78104
return (
79105
<>
80-
{coachingSessions.some(
81-
(session) => getDateTimeFromString(session.date) < DateTime.now()
82-
) && (
83-
<SelectGroup>
84-
<SelectLabel>Previous Sessions</SelectLabel>
85-
{coachingSessions
86-
.filter(
87-
(session) => getDateTimeFromString(session.date) < DateTime.now()
88-
)
89-
.map((session) => {
90-
const sessionIndex = coachingSessions.findIndex(
91-
(s) => s.id === session.id
92-
);
93-
return (
94-
<SelectItem value={session.id} key={session.id}>
95-
<div className="flex flex-col w-full">
96-
<span className="text-left truncate overflow-hidden">
97-
{goals[sessionIndex]?.[0]?.title || "No goal set"}
98-
</span>
99-
<span className="text-sm text-gray-400">
100-
{getDateTimeFromString(session.date).toLocaleString(
101-
DateTime.DATETIME_FULL
102-
)}
103-
</span>
104-
</div>
105-
</SelectItem>
106-
);
107-
})}
108-
</SelectGroup>
109-
)}
110-
{coachingSessions.some(
111-
(session) => getDateTimeFromString(session.date) >= DateTime.now()
112-
) && (
113-
<SelectGroup>
114-
<SelectLabel>Upcoming Sessions</SelectLabel>
115-
{coachingSessions
116-
.filter(
117-
(session) => getDateTimeFromString(session.date) >= DateTime.now()
118-
)
119-
.map((session) => {
120-
const sessionIndex = coachingSessions.findIndex(
121-
(s) => s.id === session.id
122-
);
123-
return (
124-
<SelectItem value={session.id} key={session.id}>
125-
<div className="flex flex-col w-full">
126-
<span className="text-left truncate overflow-hidden">
127-
{goals[sessionIndex]?.[0]?.title || "No goal set"}
128-
</span>
129-
<span className="text-sm text-gray-400">
130-
{getDateTimeFromString(session.date).toLocaleString(
131-
DateTime.DATETIME_FULL
132-
)}
133-
</span>
134-
</div>
135-
</SelectItem>
136-
);
137-
})}
138-
</SelectGroup>
106+
{[
107+
{
108+
label: "Previous Sessions",
109+
condition: (date: string) =>
110+
getDateTimeFromString(date) < DateTime.now(),
111+
},
112+
{
113+
label: "Upcoming Sessions",
114+
condition: (date: string) =>
115+
getDateTimeFromString(date) >= DateTime.now(),
116+
},
117+
].map(
118+
({ label, condition }) =>
119+
coachingSessions.some((session) => condition(session.date)) && (
120+
<SelectGroup key={label}>
121+
<SelectLabel>{label}</SelectLabel>
122+
{coachingSessions
123+
.filter((session) => condition(session.date))
124+
.map((session) => (
125+
<SessionItem
126+
key={session.id}
127+
session={session}
128+
goals={goals}
129+
sessionIndex={coachingSessions.findIndex(
130+
(s) => s.id === session.id
131+
)}
132+
/>
133+
))}
134+
</SelectGroup>
135+
)
139136
)}
140137
</>
141138
);
@@ -188,11 +185,11 @@ export default function CoachingSessionSelector({
188185
};
189186

190187
const displayValue = currentSession ? (
191-
<div className="flex flex-col w-[28rem]">
188+
<div className="flex flex-col w-full">
192189
<span className="truncate overflow-hidden text-left">
193190
{currentGoal?.title || "No goal set"}
194191
</span>
195-
<span className="text-sm text-gray-500 text-left">
192+
<span className="text-sm text-gray-500 text-left truncate overflow-hidden">
196193
{getDateTimeFromString(currentSession.date).toLocaleString(
197194
DateTime.DATETIME_FULL
198195
)}
@@ -206,12 +203,18 @@ export default function CoachingSessionSelector({
206203
value={currentCoachingSessionId ?? undefined}
207204
onValueChange={handleSetCoachingSession}
208205
>
209-
<SelectTrigger id="coaching-session-selector">
210-
<SelectValue placeholder="Select coaching session">
206+
<SelectTrigger
207+
className="w-full min-w-0 py-6 pr-2"
208+
id="coaching-session-selector"
209+
>
210+
<SelectValue className="truncate" placeholder="Select coaching session">
211211
{displayValue}
212212
</SelectValue>
213213
</SelectTrigger>
214-
<SelectContent>
214+
<SelectContent
215+
className="w-[var(--radix-select-trigger-width)] min-w-0 max-w-full"
216+
position="popper"
217+
>
215218
<CoachingSessionsSelectItems relationshipId={relationshipId} />
216219
</SelectContent>
217220
</Select>

‎src/components/ui/dashboard/select-coaching-session.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,14 @@ export default function SelectCoachingSession() {
3131
);
3232

3333
return (
34-
<Card>
34+
<Card className="w-full min-w-0 sm:min-w-[320]">
3535
<CardHeader>
3636
<CardTitle>Join a Coaching Session</CardTitle>
3737
<CardDescription>
3838
Select current organization, relationship and session
3939
</CardDescription>
4040
</CardHeader>
41-
<CardContent className="grid gap-6">
41+
<CardContent className="grid gap-6 min-w-0">
4242
<div className="grid gap-2">
4343
<Label htmlFor="organization">Organization</Label>
4444
<OrganizationSelector userId={userId}></OrganizationSelector>

0 commit comments

Comments
 (0)