poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): Add field app with date range navigation

Browse Source 
- Add React Native Expo field app for mobile staff
- Use main /appointments/ endpoint with date range support
- Add X-Business-Subdomain header for tenant context
- Support day/week view navigation
- Remove WebSocket console logging from frontend
- Update AppointmentStatus type to include all backend statuses
- Add responsive status legend to scheduler header

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
2025-12-07 01:23:24 -05:00
parent 46b154e957
commit 61882b300f
30 changed files with 16529 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
frontend/src/hooks/useAppointmentWebSocket.ts
View File

@@ -10,23 +10,31 @@ import { getSubdomain } from '../api/config';
import { getWebSocketUrl } from '../utils/domain';
import { Appointment } from '../types';
interface WebSocketMessage {
type: 'connection_established' | 'appointment_created' | 'appointment_updated' | 'appointment_deleted' | 'pong';
appointment?: {
id: string;
business_id: string;
service_id: string;
resource_id: string | null;
customer_id: string;
customer_name: string;
start_time: string;
end_time: string;
duration_minutes: number;
status: string;
notes: string;
interface WebSocketEvent {
id: number;
title: string;
start_time: string;
end_time: string;
status: string;
notes: string;
service?: {
id: number;
name: string;
duration: number;
price: string;
};
appointment_id?: string;
}
interface WebSocketMessage {
type: 'connection_established' | 'event_created' | 'event_updated' | 'event_deleted' | 'event_status_changed' | 'pong';
event?: WebSocketEvent;
event_id?: number;
old_status?: string;
new_status?: string;
changed_fields?: string[];
message?: string;
user_id?: number;
groups?: string[];
}
interface UseAppointmentWebSocketOptions {
@@ -36,25 +44,26 @@ interface UseAppointmentWebSocketOptions {
onError?: (error: Event) => void;
}
// WebSocket is not yet implemented in the backend - disable for now
const WEBSOCKET_ENABLED = false;
// Enable WebSocket for real-time calendar updates
const WEBSOCKET_ENABLED = true;
/**
* Transform backend appointment format to frontend format
* Transform backend event format to frontend appointment format
*/
function transformAppointment(data: WebSocketMessage['appointment']): Appointment | null {
function transformEvent(data: WebSocketEvent): Partial<Appointment> | null {
if (!data) return null;
const startTime = new Date(data.start_time);
const endTime = new Date(data.end_time);
const durationMinutes = Math.round((endTime.getTime() - startTime.getTime()) / 60000);
return {
id: data.id,
resourceId: data.resource_id,
customerId: data.customer_id,
customerName: data.customer_name,
serviceId: data.service_id,
startTime: new Date(data.start_time),
durationMinutes: data.duration_minutes,
id: String(data.id),
startTime,
durationMinutes,
status: data.status as Appointment['status'],
notes: data.notes,
serviceId: data.service ? String(data.service.id) : undefined,
};
}
@@ -92,12 +101,18 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
const token = getCookie('access_token');
const subdomain = getSubdomain();
if (!token || !subdomain) {
if (!token) {
return null;
}
// Use the getWebSocketUrl utility from domain.ts
return `${getWebSocketUrl()}appointments/?token=${token}&subdomain=${subdomain}`;
// Backend uses /ws/calendar/ endpoint with token query param
const baseUrl = getWebSocketUrl();
let url = `${baseUrl}calendar/?token=${token}`;
if (subdomain) {
url += `&subdomain=${subdomain}`;
}
return url;
};
const updateQueryCache = useCallback((message: WebSocketMessage) => {
@@ -109,27 +124,46 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
if (!old) return old;
switch (message.type) {
case 'appointment_created': {
const newAppointment = transformAppointment(message.appointment);
if (!newAppointment) return old;
case 'event_created': {
if (!message.event) return old;
const eventUpdate = transformEvent(message.event);
if (!eventUpdate) return old;
const eventId = String(message.event.id);
// Check if appointment already exists (avoid duplicates)
if (old.some(apt => apt.id === newAppointment.id)) {
if (old.some(apt => apt.id === eventId)) {
return old;
}
return [...old, newAppointment];
// Note: We only have partial data from WebSocket, so we trigger a refetch
// to get full appointment data (customer info, etc.)
queryClient.invalidateQueries({ queryKey: ['appointments'] });
return old;
}
case 'appointment_updated': {
const updatedAppointment = transformAppointment(message.appointment);
if (!updatedAppointment) return old;
return old.map(apt =>
apt.id === updatedAppointment.id ? updatedAppointment : apt
);
case 'event_updated':
case 'event_status_changed': {
if (!message.event) return old;
const eventUpdate = transformEvent(message.event);
if (!eventUpdate) return old;
const eventId = String(message.event.id);
// Update the matching appointment with new data
const updated = old.map(apt => {
if (apt.id === eventId) {
return {
...apt,
...eventUpdate,
};
}
return apt;
});
return updated;
}
case 'appointment_deleted': {
if (!message.appointment_id) return old;
return old.filter(apt => apt.id !== message.appointment_id);
case 'event_deleted': {
if (!message.event_id) return old;
const eventId = String(message.event_id);
return old.filter(apt => apt.id !== eventId);
}
default:
@@ -160,7 +194,6 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
const url = getWsUrl();
if (!url) {
console.log('WebSocket: Missing token or subdomain, skipping connection');
return;
}
@@ -169,7 +202,6 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
wsRef.current.close();
}
console.log('WebSocket: Connecting to', url.replace(/token=[^&]+/, 'token=***'));
const ws = new WebSocket(url);
ws.onopen = () => {
@@ -179,7 +211,6 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
return;
}
console.log('WebSocket: Connected');
reconnectAttemptsRef.current = 0;
setIsConnected(true);
onConnectedRef.current?.();
@@ -204,40 +235,37 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
switch (message.type) {
case 'connection_established':
console.log('WebSocket: Connection confirmed -', message.message);
break;
case 'pong':
// Heartbeat response, ignore
// Heartbeat/connection responses, ignore
break;
case 'appointment_created':
case 'appointment_updated':
case 'appointment_deleted':
console.log('WebSocket: Received', message.type);
case 'event_created':
case 'event_updated':
case 'event_deleted':
case 'event_status_changed':
updateQueryCache(message);
break;
default:
console.log('WebSocket: Unknown message type', message);
// Unknown message type, ignore
break;
}
} catch (err) {
console.error('WebSocket: Failed to parse message', err);
// Silently ignore parse errors
}
};
ws.onerror = (error) => {
// Only log error if not aborted (StrictMode cleanup causes expected errors)
// Only call error callback if not aborted
if (!effectAborted) {
console.error('WebSocket: Error', error);
onErrorRef.current?.(error);
}
};
ws.onclose = (event) => {
// Don't log or handle if effect was aborted (expected during StrictMode)
// Don't handle if effect was aborted (expected during StrictMode)
if (effectAborted) {
return;
}
console.log('WebSocket: Disconnected', event.code, event.reason);
setIsConnected(false);
onDisconnectedRef.current?.();
@@ -250,7 +278,6 @@ export function useAppointmentWebSocket(options: UseAppointmentWebSocketOptions
// Only attempt reconnection if not cleaning up
if (!isCleaningUpRef.current && reconnectAttemptsRef.current < maxReconnectAttempts) {
const delay = Math.min(1000 * Math.pow(2, reconnectAttemptsRef.current), 30000);
console.log(`WebSocket: Reconnecting in ${delay}ms (attempt ${reconnectAttemptsRef.current + 1})`);
reconnectTimeoutRef.current = setTimeout(() => {
reconnectAttemptsRef.current++;