Frontend Hooks

This directory contains custom React hooks that encapsulate stateful logic and side effects.

Handles authentication and authorization logic.

Returns: UseAuthReturn

• userEmail - Current user's email from window data
• isAuthorized(pageProperties) - Function to check if user can access a page

Usage:

const { userEmail, isAuthorized } = useAuth();
const canView = isAuthorized(pageProperties);

Manages glimpse data fetching and state.

Parameters:

• glimpseId - ID of the glimpse to fetch
• initialData - Optional initial data to avoid refetching

Returns: UseGlimpseDataReturn

• data - Current glimpse data
• loading - Loading state
• error - Error state
• refetch - Function to manually refetch data

Usage:

const { data, loading, error, refetch } = useGlimpseData(glimpseId, initialData);

Manages agent data fetching with automatic polling.

Parameters:

• glimpseId - ID of the glimpse
• isAuthorized - Whether user is authorized (controls polling)

Returns: UseAgentDataReturn

• agentData - Current agent data
• hasAgents - Boolean indicating if agents exist

Usage:

const { agentData, hasAgents } = useAgentData(glimpseId, isAuthorized);

Handles viewing status tracking with automatic updates and reliable session ending.

Parameters:

• glimpseId - ID of the glimpse being viewed
• isAuthorized - Whether user is authorized (controls tracking)

Side Effects:

• Sends initial viewing status update on mount
• Sends periodic viewing status updates every 10 seconds
• Tracks page visibility changes (tab focus/blur)
• Handles page unload events for reliable session ending
• Cleans up all listeners and intervals on unmount

Session Tracking:

• Uses sendBeacon API for reliable session ending during page unload
• Falls back to synchronous fetch if sendBeacon fails
• Handles both normal component unmount and browser tab closure

Usage:

useViewingTracking(glimpseId, isAuthorized);

• Reusable logic: Hooks can be used across multiple components
• Separation of concerns: Stateful logic separate from rendering
• Easier testing: Hooks can be tested independently
• Better performance: Optimized state management and cleanup
• Consistent patterns: Standardized approach to common operations