@jmruthers/pace-core 0.6.2 → 0.6.4

package/src/components/EventSelector/EventSelector.tsx

@@ -1,423 +0,0 @@
-/**
- * @file EventSelector Component
- * @package @jmruthers/pace-core
- * @module Components/EventSelector
- * @since 0.1.0
- *
- * A secure event selector component that allows users to choose from events they have
- * access to based on their role-based permissions. Integrates with the RBAC system
- * to ensure users only see events they're authorized to access.
- *
- * Features:
- * - Role-based event access control
- * - Automatic next event detection and selection
- * - Cross-device synchronization via Supabase
- * - Offline support with localStorage fallback
- * - Comprehensive error handling and retry functionality
- * - Event details display in dropdown
- * - Next/upcoming event indicators
- * - Loading states and user feedback
- * - Accessible interface design
- * - Integration with EventProvider
- *
- * @example
- * ```tsx
- * // Basic event selector
- * <EventSelector 
- *   onEventChange={(event) => console.log('Selected event:', event)}
- * />
- * 
- * // With custom configuration
- * <EventSelector
- *   placeholder="Choose an event..."
- *   showEventDetails={true}
- *   showNextEventIndicator={true}
- *   showRetryButton={true}
- *   onEventChange={handleEventChange}
- * />
- * 
- * // In a header component
- * <Header>
- *   <EventSelector 
- *     className="w-64"
- *     showEventDetails={false}
- *     onEventChange={setCurrentEvent}
- *   />
- * </Header>
- * 
- * // With error handling
- * <EventSelector
- *   showNoEventsMessage={true}
- *   showRetryButton={true}
- *   onEventChange={(event) => {
- *     if (event) {
- *       setCurrentEvent(event);
- *       navigate(`/events/${event.id}`);
- *     }
- *   }}
- * />
- * ```
- *
- * @accessibility
- * - WCAG 2.1 AA compliant
- * - Proper ARIA labels and descriptions
- * - Keyboard navigation support
- * - Screen reader friendly
- * - Focus management
- * - High contrast support
- * - Clear error identification
- *
- * @security
- * - Role-based access control integration
- * - Secure event data handling
- * - User permission validation
- * - No unauthorized event exposure
- * - Secure session management
- *
- * @dependencies
- * - EventProvider - Event context and state
- * - Select components - Dropdown interface
- * - Button component - Retry functionality
- * - Alert component - Error display
- * - LoadingSpinner - Loading states
- * - React 19+ - Hooks and effects
- * - Tailwind CSS - Styling
- */
-
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select';
-import { Alert, AlertDescription } from '../Alert/Alert';
-import { Button } from '../Button/Button';
-import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
-import { RefreshCw, AlertCircle, Lock, Calendar, Star } from 'lucide-react';
-import { useEvents } from '../../hooks/useEvents';
-import { Event } from '../../types/event';
-import { useEffect, useMemo, useRef } from 'react';
-import { cn } from '../../utils/core/cn';
-import { logger } from '../../utils/core/logger';
-
-/**
- * Props for the EventSelector component.
- */
-export interface EventSelectorProps {
-  /** Placeholder text for the dropdown */
-  placeholder?: string;
-  /** Additional CSS classes */
-  className?: string;
-  /** Callback fired when an event changes, providing full event object */
-  onEventChange?: (event: Event | null) => void;
-  /** Show friendly message when no events available */
-  showNoEventsMessage?: boolean;
-  /** Show retry button on errors */
-  showRetryButton?: boolean;
-  /** Show event details in dropdown */
-  showEventDetails?: boolean;
-  /** Show indicator for next/upcoming events */
-  showNextEventIndicator?: boolean;
-}
-
-/**
- * EventSelector component for selecting events with built-in access control
- * 
- * This component provides secure event selection with:
- * - Database integration via rbac_event_app_roles table
- * - Auto-selection of next upcoming event by date
- * - Cross-device sync via Supabase user session metadata
- * - localStorage fallback for offline scenarios
- * - Comprehensive error handling and user feedback
- * 
- * @component
- * @example
- * <UnifiedAuthProvider supabaseClient={supabase} appName="PACE">
- *   <EventSelector onEventChange={(event) => console.log(event)} />
- * </UnifiedAuthProvider>
- */
-export function EventSelector({
-  placeholder = "Select an event",
-  className,
-  onEventChange,
-  showNoEventsMessage = true,
-  showRetryButton = true,
-  showEventDetails = true,
-  showNextEventIndicator = true
-}: EventSelectorProps) {
-  const { 
-    events, 
-    selectedEvent, 
-    isLoading, 
-    error, 
-    setSelectedEvent, 
-    refreshEvents,
-  } = useEvents();
-
-  // Removed excessive debug logging - only log on significant state changes, not every render
-
-
-  const handleValueChange = (eventId: string) => {
-    const event = events.find((e) => (e.event_id || e.id) === eventId);
-    
-    if (event) {
-      setSelectedEvent(event);
-      if (onEventChange) {
-        onEventChange(event);
-      }
-    }
-  };
-
-  const handleRetry = () => {
-    refreshEvents();
-  };
-
-  // Helper function to check if an event is the next upcoming event
-  const isNextEvent = (event: Event): boolean => {
-    if (!event.event_date) return false;
-    
-    const now = new Date();
-    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    const eventDate = new Date(event.event_date);
-    
-    return eventDate >= today;
-  };
-
-  // Helper function to format event date
-  const formatEventDate = (dateString: string): string => {
-    const date = new Date(dateString);
-    const today = new Date();
-    const tomorrow = new Date(today);
-    tomorrow.setDate(tomorrow.getDate() + 1);
-    
-    // Normalize dates to compare only the date part (ignore time)
-    const normalizeDate = (d: Date) => {
-      const normalized = new Date(d);
-      normalized.setHours(0, 0, 0, 0);
-      return normalized;
-    };
-    
-    const normalizedDate = normalizeDate(date);
-    const normalizedToday = normalizeDate(today);
-    const normalizedTomorrow = normalizeDate(tomorrow);
-    
-    
-    if (normalizedDate.getTime() === normalizedToday.getTime()) {
-      return 'Today';
-    } else if (normalizedDate.getTime() === normalizedTomorrow.getTime()) {
-      return 'Tomorrow';
-    } else {
-      return date.toLocaleDateString();
-    }
-  };
-
-  // Compute sorted list: descending by event_date (newest first); events without date go last
-  const sortedEvents = useMemo(() => {
-    const getTime = (e: Event) => (e.event_date ? new Date(e.event_date).getTime() : Number.NEGATIVE_INFINITY);
-    return [...events].sort((a, b) => getTime(b) - getTime(a));
-  }, [events]);
-
-  // Default to the next upcoming event if none selected, fallback to most recent past event
-  // IMPORTANT: Only auto-select if there's no persisted event being restored
-  // EventService handles all persistence internally - we don't check storage directly
-  // Use refs to track previous values and prevent unnecessary effect runs
-  const prevEventsLengthRef = useRef(events.length);
-  const prevSelectedEventIdRef = useRef(selectedEvent?.event_id);
-  const hasAutoSelectedRef = useRef(false);
-  
-  useEffect(() => {
-    // Track changes to detect when events are actually loaded
-    const eventsLengthChanged = events.length !== prevEventsLengthRef.current;
-    const selectedEventChanged = selectedEvent?.event_id !== prevSelectedEventIdRef.current;
-    
-    if (eventsLengthChanged) {
-      prevEventsLengthRef.current = events.length;
-      // Reset auto-select flag when new events are loaded
-      if (events.length > 0) {
-        hasAutoSelectedRef.current = false;
-      }
-    }
-    if (selectedEventChanged) {
-      prevSelectedEventIdRef.current = selectedEvent?.event_id;
-      // Reset auto-select flag when selected event changes externally
-      if (selectedEvent) {
-        hasAutoSelectedRef.current = false;
-      }
-    }
-    
-    // Only auto-select if:
-    // 1. Events are loaded (length > 0)
-    // 2. No event is selected
-    // 3. Not currently loading
-    // 4. Events actually changed (new events loaded)
-    // 5. Haven't already auto-selected (prevent loops)
-    if (!selectedEvent && events.length > 0 && !isLoading && eventsLengthChanged && !hasAutoSelectedRef.current) {
-      // No event selected - safe to auto-select
-      // EventService has already checked for persisted events during initialization
-      hasAutoSelectedRef.current = true;
-      autoSelectEvent();
-    }
-    
-    function autoSelectEvent() {
-      const today = new Date();
-      const startOfToday = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
-      
-      // Try to find next future event
-      const next = [...events]
-        .filter(e => e.event_date && new Date(e.event_date).getTime() >= startOfToday)
-        .sort((a, b) => new Date(a.event_date as string).getTime() - new Date(b.event_date as string).getTime())[0];
-      
-      if (next) {
-        setSelectedEvent(next);
-        if (onEventChange) onEventChange(next);
-      } else {
-        // Fallback to most recent past event if no future events found
-        const mostRecentPast = [...events]
-          .filter(e => {
-            if (!e.event_date) return false;
-            const eventDate = new Date(e.event_date);
-            const startOfEventDate = new Date(eventDate.getFullYear(), eventDate.getMonth(), eventDate.getDate()).getTime();
-            return startOfEventDate < startOfToday;
-          })
-          .sort((a, b) => new Date(b.event_date as string).getTime() - new Date(a.event_date as string).getTime())[0];
-        
-        if (mostRecentPast) {
-          setSelectedEvent(mostRecentPast);
-          if (onEventChange) onEventChange(mostRecentPast);
-        }
-      }
-    }
-  }, [events.length, selectedEvent?.event_id, isLoading, setSelectedEvent, onEventChange]);
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <div className={`flex items-center gap-2 ${className}`}>
-        <LoadingSpinner size="sm" />
-        <span className="text-sm text-muted-foreground">Loading events...</span>
-      </div>
-    );
-  }
-
-  // Access error state
-  if (error) {
-    return (
-      <div className={className}>
-        <Alert variant="destructive">
-          <Lock className="size-4" />
-          <AlertDescription className="flex items-center justify-between">
-            <span>{error.message}</span>
-            {showRetryButton && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleRetry}
-                className="ml-2"
-              >
-                <RefreshCw className="size-3 mr-1" />
-                Retry
-              </Button>
-            )}
-          </AlertDescription>
-        </Alert>
-      </div>
-    );
-  }
-
-  // No events available state
-  if (events.length === 0) {
-    if (showNoEventsMessage) {
-      return (
-        <div className={className}>
-          <Alert variant="inline">
-            <AlertCircle className="size-4 text-acc-700" />
-            <AlertDescription className="flex items-center justify-between">
-              <span>No events available.</span>
-              {showRetryButton && (
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={handleRetry}
-                  className="ml-2"
-                >
-                  <RefreshCw className="size-3 mr-1" />
-                  Refresh
-                </Button>
-              )}
-            </AlertDescription>
-          </Alert>
-        </div>
-      );
-    }
-    return null;
-  }
-
-  // Normal selector state
-  return (
-    <Select 
-      value={selectedEvent ? (selectedEvent.event_id || selectedEvent.id) : ''}
-      onValueChange={handleValueChange}
-      className={className}
-    >
-      <SelectTrigger className="text-left" variant="outline">
-        <SelectValue placeholder={placeholder}>
-          {selectedEvent && (
-            <div className="flex items-center gap-2">
-              <Calendar className="size-4 flex-shrink-0" />
-              <span className="truncate">{selectedEvent.event_name}</span>
-              {selectedEvent.event_date && (
-                <span className="text-xs text-muted-foreground flex-shrink-0">
-                  ({formatEventDate(selectedEvent.event_date)})
-                </span>
-              )}
-            </div>
-          )}
-        </SelectValue>
-      </SelectTrigger>
-      <SelectContent>
-        {sortedEvents
-          .map((event) => {
-            const isNext = isNextEvent(event);
-            const isSelected = selectedEvent && (selectedEvent.event_id === event.event_id || selectedEvent.id === event.id);
-            
-            return (
-              <SelectItem 
-                key={event.event_id || event.id}
-                value={event.event_id || event.id}
-                className="flex items-center justify-between"
-              >
-                <div className="flex items-center gap-2 w-full">
-                  {showNextEventIndicator && isNext && (
-                    <Star className="size-3 text-acc-500" />
-                  )}
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      <span className={isSelected ? "font-semibold" : ""}>
-                        {event.event_name}
-                      </span>
-                      {isSelected && (
-                        <span className="text-xs bg-primary text-primary-foreground px-1 rounded">
-                          Current
-                        </span>
-                      )}
-                    </div>
-                    {showEventDetails && event.event_date && (
-                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                        <Calendar className="size-3" />
-                        <span>{formatEventDate(event.event_date)}</span>
-                        {showNextEventIndicator && isNext && (
-                          <span className="text-acc-600 font-medium">
-                            (Next)
-                          </span>
-                        )}
-                      </div>
-                    )}
-                    {showEventDetails && event.event_venue && (
-                      <div className="text-xs text-muted-foreground">
-                        📍 {event.event_venue}
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </SelectItem>
-            );
-          })}
-      </SelectContent>
-    </Select>
-  );
-}

package/src/components/EventSelector/index.ts

@@ -1,3 +0,0 @@
-export { EventSelector } from './EventSelector';
-export type { EventSelectorProps } from './EventSelector';
-export type { Event, EventTheme, EventContextType } from '../../types/event';