Skip to content

Commit 1174add

Browse files
adescoteaux1adescoteaux1
authored
onboarding styling updates and updates to hook to support onboarding user id (#282)
1 parent cfa7367 commit 1174add

5 files changed

Lines changed: 118 additions & 87 deletions

File tree

‎frontend/src/app/signup/layout.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
'use client'
2-
32
import { usePathname } from 'next/navigation'
43
import Image from 'next/image'
54
import { Check } from 'lucide-react'
@@ -17,7 +16,7 @@ export default function OnboardingLayout({
1716
children: React.ReactNode
1817
}) {
1918
const pathname = usePathname()
20-
19+
2120
// Determine current step index
2221
const getCurrentStepIndex = () => {
2322
// Handle sub-routes like students-add, students-edit
@@ -34,14 +33,15 @@ export default function OnboardingLayout({
3433

3534
return stepIndex
3635
}
37-
36+
3837
const currentStepIndex = getCurrentStepIndex()
3938

4039
return (
4140
<div className="min-h-screen flex bg-background">
4241
{/* Left Sidebar Progress */}
43-
<div className="w-64 border-default p-8 flex flex-col bg-black border-r border-default
42+
<div className="fixed left-0 top-0 w-64 border-default p-8 flex flex-col bg-black border-r border-default
4443
transition-all duration-300 ease-in-out shadow-md h-screen z-50 lg:z-auto text-center items-center">
44+
4545
<div className="mb-12 bg-white rounded-md p-1 w-fit">
4646
<Image
4747
src="/tss.png"
@@ -51,31 +51,31 @@ export default function OnboardingLayout({
5151
priority
5252
/>
5353
</div>
54-
54+
5555
<div className="flex-1">
5656
<div className="space-y-1">
5757
{steps.map((step, index) => {
5858
const isCompleted = index < currentStepIndex
5959
const isCurrent = index === currentStepIndex
6060
const isUpcoming = index > currentStepIndex
61-
61+
6262
return (
6363
<div key={step.id} className="flex items-start">
6464
<div className="flex flex-col items-center">
6565
{/* Step indicator */}
6666
<div className={`w-12 h-12 rounded-full flex items-center justify-center text-sm font-medium
67-
${isCompleted ? 'bg-accent border-2 border-gray-200 text-white' : ''}
68-
${isCurrent ? 'bg-accent text-amber-400 border-2 border-amber-400' : ''}
69-
${isUpcoming ? 'border-gray-200 border-2 text-white' : ''}
70-
${!isCompleted && !isCurrent && !isUpcoming ? 'text-primary' : ''}
71-
`}>
67+
${isCompleted ? 'bg-accent border-2 border-gray-200 text-white' : ''}
68+
${isCurrent ? 'bg-accent text-amber-400 border-2 border-amber-400' : ''}
69+
${isUpcoming ? 'border-gray-200 border-2 text-white' : ''}
70+
${!isCompleted && !isCurrent && !isUpcoming ? 'text-primary' : ''}
71+
`}>
7272
{isCompleted ? (
7373
<Check className="w-4 h-4" />
7474
) : (
7575
<span>{index + 1}</span>
7676
)}
7777
</div>
78-
78+
7979
{/* Connector line */}
8080
{index < steps.length - 1 && (
8181
<div className={`
@@ -90,9 +90,9 @@ export default function OnboardingLayout({
9090
</div>
9191
</div>
9292
</div>
93-
93+
9494
{/* Main Content */}
95-
<div className="flex-1 overflow-auto">
95+
<div className="flex-1 ml-64 overflow-y-auto min-h-screen">
9696
{children}
9797
</div>
9898
</div>

‎frontend/src/app/signup/sessions/add/page.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,8 @@ export default function AddSessionsPage() {
135135
JSON.stringify(existingSessions)
136136
);
137137

138-
router.push("/signup/sessions");
138+
// Navigate with refresh flag to trigger reload
139+
router.push("/signup/sessions?refresh=true");
139140
} catch (error) {
140141
console.error("Failed to create session:", error);
141142
setError(
@@ -160,7 +161,8 @@ export default function AddSessionsPage() {
160161
}
161162

162163
return (
163-
<div className="flex items-center justify-center min-h-screen p-8">
164+
<div className="flex items-center justify-center min-h-screen p-8 overflow-y-auto">
165+
<div className="w-full flex justify-center py-8">
164166
<div className="max-w-md w-full">
165167
<button
166168
onClick={handleBack}
@@ -386,6 +388,7 @@ export default function AddSessionsPage() {
386388
</div>
387389
</form>
388390
</div>
391+
</div>
389392
</div>
390393
);
391394
}

‎frontend/src/app/signup/sessions/page.tsx‎

Lines changed: 78 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,48 @@ import { useEffect, useState } from "react";
1212

1313
export default function SessionsPage() {
1414
const router = useRouter();
15-
const { sessions, isLoading: loadingSessions, refetch } = useSessions();
1615
const [selectedSessionId, setSelectedSessionId] = useState<string>("");
1716

18-
// Use the hook to get students for the selected session
17+
// Hook now handles therapist ID from both auth context AND localStorage
18+
const { sessions, isLoading: loadingSessions, refetch } = useSessions();
19+
1920
const { students: sessionStudents, isLoading: loadingStudents } =
2021
useSessionStudentsForSession(selectedSessionId);
2122

22-
// Get the first session's ID when sessions load
23-
useEffect(() => {
24-
if (sessions.length > 0 && !selectedSessionId) {
25-
setSelectedSessionId(sessions[0].id);
26-
}
27-
}, [sessions, selectedSessionId]);
28-
23+
// Check if user is authenticated
2924
useEffect(() => {
3025
const userId =
31-
localStorage.getItem("temp_userId") || localStorage.getItem("userId"); // Check temp_userId first
26+
localStorage.getItem("temp_userId") || localStorage.getItem("userId");
3227

3328
if (!userId) {
3429
router.push("/signup/welcome");
3530
}
31+
}, [router]);
32+
33+
// Handle refresh from navigation and initial load
34+
useEffect(() => {
35+
if (typeof window !== 'undefined') {
36+
const searchParams = new URLSearchParams(window.location.search);
37+
if (searchParams.get('refresh') === 'true') {
38+
// Add small delay to ensure session is saved
39+
setTimeout(() => {
40+
refetch();
41+
}, 300);
42+
// Clean up URL
43+
window.history.replaceState({}, '', '/signup/sessions');
44+
} else {
45+
// Normal refetch on mount
46+
refetch();
47+
}
48+
}
49+
}, [refetch]);
3650

37-
// Refetch sessions when page loads
38-
refetch();
39-
}, [router, refetch]);
51+
// Set first session as selected
52+
useEffect(() => {
53+
if (sessions.length > 0 && !selectedSessionId) {
54+
setSelectedSessionId(sessions[0].id);
55+
}
56+
}, [sessions, selectedSessionId]);
4057

4158
const handleBack = () => {
4259
router.push("/signup/students");
@@ -50,7 +67,6 @@ export default function SessionsPage() {
5067
router.push("/signup/complete");
5168
};
5269

53-
// Helper functions for formatting
5470
const formatTime = (datetime: string) => {
5571
const date = new Date(datetime);
5672
return date.toLocaleTimeString("en-US", {
@@ -120,63 +136,61 @@ export default function SessionsPage() {
120136
</>
121137
) : (
122138
<>
123-
{/* Session Card Display */}
124139
<div className="bg-card rounded-lg border border-default p-6 mb-6">
125-
{sessions.length > 0 && (
126-
<div className="space-y-4">
127-
<div className="text-sm text-secondary mb-2">
128-
<div>Session Name</div>
129-
<div className="font-semibold text-primary">
130-
{formatTime(sessions[0].start_datetime)} -{" "}
131-
{formatTime(sessions[0].end_datetime)}, Does not repeat
132-
</div>
133-
{sessions[0].location && (
134-
<div className="mt-1">{sessions[0].location}</div>
135-
)}
140+
<div className="space-y-4">
141+
<div className="text-sm text-secondary mb-2">
142+
<div className="font-semibold text-primary text-lg mb-1">
143+
{sessions[0].session_name}
136144
</div>
145+
<div className="font-semibold text-primary">
146+
{formatTime(sessions[0].start_datetime)} -{" "}
147+
{formatTime(sessions[0].end_datetime)}, Does not repeat
148+
</div>
149+
{sessions[0].location && (
150+
<div className="mt-1">{sessions[0].location}</div>
151+
)}
152+
</div>
137153

138-
<div>
139-
<div className="text-sm text-secondary mb-2">Students</div>
140-
<div className="space-y-2">
141-
{loadingStudents ? (
142-
<div className="text-sm text-secondary">
143-
Loading students...
144-
</div>
145-
) : sessionStudents.length > 0 ? (
146-
sessionStudents.map((student: any) => (
147-
<div
148-
key={student.id}
149-
className="flex items-center gap-3 p-2 bg-background rounded-lg border border-default"
150-
>
151-
<Avatar
152-
name={getAvatarName(
153-
student.first_name,
154-
student.last_name,
155-
student.id
156-
)}
157-
variant={getAvatarVariant(student.id)}
158-
className="w-8 h-8"
159-
/>
160-
<span className="text-sm text-primary">
161-
{student.first_name} {student.last_name}
162-
</span>
163-
<span className="text-xs text-secondary ml-auto">
164-
ID
165-
</span>
166-
</div>
167-
))
168-
) : (
169-
<div className="text-sm text-secondary">
170-
No students in this session
154+
<div>
155+
<div className="text-sm text-secondary mb-2">Students</div>
156+
<div className="space-y-2">
157+
{loadingStudents ? (
158+
<div className="text-sm text-secondary">
159+
Loading students...
160+
</div>
161+
) : sessionStudents.length > 0 ? (
162+
sessionStudents.map((student: any) => (
163+
<div
164+
key={student.id}
165+
className="flex items-center gap-3 p-2 bg-background rounded-lg border border-default"
166+
>
167+
<Avatar
168+
name={getAvatarName(
169+
student.first_name,
170+
student.last_name,
171+
student.id
172+
)}
173+
variant={getAvatarVariant(student.id)}
174+
className="w-8 h-8"
175+
/>
176+
<span className="text-sm text-primary">
177+
{student.first_name} {student.last_name}
178+
</span>
179+
<span className="text-xs text-secondary ml-auto">
180+
ID
181+
</span>
171182
</div>
172-
)}
173-
</div>
183+
))
184+
) : (
185+
<div className="text-sm text-secondary">
186+
No students in this session
187+
</div>
188+
)}
174189
</div>
175190
</div>
176-
)}
191+
</div>
177192
</div>
178193

179-
{/* Show other sessions as cards */}
180194
{sessions.length > 1 && (
181195
<div className="space-y-2 mb-6">
182196
<p className="text-sm text-secondary mb-2">
@@ -217,4 +231,4 @@ export default function SessionsPage() {
217231
</div>
218232
</div>
219233
);
220-
}
234+
}

‎frontend/src/app/signup/students/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default function StudentsPage() {
7171
</p>
7272
<Button
7373
onClick={handleAddStudent}
74-
className="bg-accent hover:bg-accent-hover text-white"
74+
className="text-white"
7575
>
7676
<Plus className="w-4 h-4 mr-2" />
7777
Add Your First Student

‎frontend/src/hooks/useSessions.ts‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// hooks/useSessions.ts - UPDATED WITH STUDENTESSIONS CACHE INVALIDATION
1+
// hooks/useSessions.ts
22

33
import { useAuthContext } from "@/contexts/authContext";
44
import { getSessions as getSessionsApi } from "@/lib/api/sessions";
@@ -9,6 +9,7 @@ import type {
99
} from "@/lib/api/theSpecialStandardAPI.schemas";
1010
import type { QueryObserverResult } from "@tanstack/react-query";
1111
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
12+
import { useEffect, useState } from "react";
1213

1314
interface UseSessionsReturn {
1415
sessions: Session[];
@@ -43,23 +44,38 @@ interface UseSessionReturn {
4344
export function useSessions(params?: UseSessionsParams): UseSessionsReturn {
4445
const queryClient = useQueryClient();
4546
const api = getSessionsApi();
46-
const { userId: therapistId } = useAuthContext();
47+
const { userId: contextUserId } = useAuthContext();
48+
49+
// Support onboarding flow by checking localStorage
50+
const [therapistId, setTherapistId] = useState<string | undefined>(contextUserId ?? undefined);
51+
52+
useEffect(() => {
53+
// If we don't have a therapist ID from context, check localStorage (onboarding)
54+
if (!contextUserId && typeof window !== 'undefined') {
55+
const tempUserId = localStorage.getItem("temp_userId") || localStorage.getItem("userId");
56+
if (tempUserId) {
57+
setTherapistId(tempUserId);
58+
}
59+
} else if (contextUserId) {
60+
setTherapistId(contextUserId);
61+
}
62+
}, [contextUserId]);
4763

4864
const {
4965
data: sessionsResponse,
5066
isLoading,
5167
error,
5268
refetch,
5369
} = useQuery({
54-
queryKey: ["sessions", params],
70+
queryKey: ["sessions", params, therapistId],
5571
queryFn: () =>
5672
api.getSessions({
5773
limit: params?.limit ?? 100,
5874
startdate: params?.startdate,
5975
enddate: params?.enddate,
6076
therapist_id: therapistId!,
6177
}),
62-
enabled: !!therapistId,
78+
enabled: !!therapistId, // Only run when we have a valid therapist ID
6379
});
6480

6581
const sessions = sessionsResponse ?? [];
@@ -81,10 +97,8 @@ export function useSessions(params?: UseSessionsParams): UseSessionsReturn {
8197
mutationFn: ({ id, data }: { id: string; data: UpdateSessionInput }) =>
8298
api.patchSessionsId(id, data),
8399
onSuccess: () => {
84-
// Invalidate all session-related queries
85100
queryClient.invalidateQueries({ queryKey: ["sessions"] });
86101
queryClient.invalidateQueries({ queryKey: ["session"] });
87-
// Invalidate all studentSessions queries since session notes are displayed there
88102
queryClient.invalidateQueries({
89103
queryKey: ["studentSessions"],
90104
exact: false,

0 commit comments

Comments
 (0)