Contexts
The frontend uses 9 React contexts in contexts/ for global state management. They are nested in a specific order in app/providers.tsx (see Architecture for the full hierarchy).
UserAuthProvider
File: contexts/UserAuthProvider.tsx
Central authentication and session management.
| State | Type | Description |
|---|---|---|
isLoggedIn | boolean | Authentication status |
user | User | Current user profile |
role | "company" | "jobseeker" | Active role |
isCompany | boolean | Shorthand for company mode |
loading | boolean | Auth check in progress |
error | Error | Auth errors |
| Method | Purpose |
|---|---|
login() | Authenticate and store JWT |
logout() | Clear token and redirect |
setUser() | Update user state |
setRole() | Switch active role |
refetchUser() | Re-fetch user via WHO_AM_I query |
Features: JWT stored in localStorage, 5-hour inactivity auto-logout, activity tracking.
Hook: useUserAuth()
CVBuilderContext
File: contexts/CVBuilderContext.tsx
Manages state during the CV builder wizard.
| State | Type | Description |
|---|---|---|
| Personal info | object | Name, email, phone, links |
| Skills | array | Skills with proficiency levels |
| Experiences | array | Work experience entries |
| Education | array | Education entries |
| Portfolio | array | Portfolio links |
isFromExtraction | boolean | Whether CV was AI-extracted or manual |
OnboardingContext
File: contexts/OnboardingContext.tsx
Multi-step onboarding flow state.
| State | Type | Description |
|---|---|---|
parsedCv | object | CV data from upload/extraction |
profileInfo | object | Name, email, phone, links |
preferences | object | jobType, workType, location, salary |
Extensible for future sections: experiences, education, skills.
ModalContext
File: contexts/ModalContext.tsx
Global modal state management with 5 named modal types:
| Modal | Purpose |
|---|---|
candidate | Candidate detail modal |
talentPool | Talent pool detail modal |
contact | Contact detail modal |
delete_candidate | Delete confirmation |
addCandidate | Add candidate form |
| Method | Purpose |
|---|---|
isModalOpen(name) | Check if a specific modal is open |
openModal(name, data?) | Open modal with optional data |
closeModal(name) | Close a specific modal |
NotificationContext
File: contexts/NotificationContext.tsx
Polling-based notification management.
| State | Type | Description |
|---|---|---|
unreadCount | number | Total unread notifications |
isConnected | boolean | Polling active |
lastNotification | Notification | Most recent notification |
Behavior:
- Polls
UNREAD_NOTIFICATION_COUNTevery 30 seconds - Updates document title with badge count
- Shows toast on new messages
- Monitors user activity (pauses when idle)
PageBlockContext
File: contexts/PageBlockContext.tsx
Slot-based layout system for PageContainer. Allows child components to register content in named slots without prop drilling.
| Method | Purpose |
|---|---|
setSidebar(node) | Register sidebar content |
setHeader(node) | Register header content |
setFooter(node) | Register footer content |
| State | Purpose |
|---|---|
pagination | Current pagination state |
viewMode | Grid / list / table |
layout | Layout configuration |
ThemeContext (ColorThemeProvider)
File: contexts/ThemeContext.tsx
Dynamic CSS variable injection based on user-selected theme.
| State | Type | Description |
|---|---|---|
currentTheme | Theme | Active theme object (6 colors) |
themeId | string | Theme identifier |
isLoading | boolean | Theme loading state |
error | Error | Theme errors |
| Method | Purpose |
|---|---|
setTheme(themeId) | Change theme (async, persists via GraphQL mutation) |
Injects CSS variables: --primary, --secondary, --tertiary, --light, --background, --text-dark. Supports gradient generation.
WebSocketContext
File: contexts/WebSocketContext.tsx
Plain WebSocket connection management for real-time features.
| State | Type | Description |
|---|---|---|
status | string | connecting, connected, disconnected, failed |
isConnected | boolean | Connection active |
clientId | string | Client identifier |
error | Error | Connection errors |
| Method | Purpose |
|---|---|
send(event, data) | Send a message |
on(event, handler) | Subscribe to events |
off(event, handler) | Unsubscribe from events |
connect() | Establish connection |
disconnect() | Close connection |
Features: Auto-reconnect with exponential backoff, 30-second heartbeat, event-based routing.
Initialized with autoConnect={false}. Components must call connect() explicitly.
DevOverlayContext
File: contexts/DevOverlayContext.tsx
Development-only component debugger.
| State | Type | Description |
|---|---|---|
isEnabled | boolean | Overlay active |
hoveredComponent | string | Currently highlighted component |
highlightRect | DOMRect | Highlight bounding box |
isPanelMinimized | boolean | Debug panel minimized |
Activation: Ctrl+Shift+D keyboard shortcut. Shows component boundaries, names, and a debug panel with component tree info.