@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/ContextSelector/ContextSelector.tsx

@@ -18,7 +18,7 @@
  * - Super admin support (shows all orgs and events)
  * - Loading states and error handling
  * - Accessible interface design
- * - Integration with OrganisationProvider and EventService
+ * - Integration with OrganisationServiceProvider (via UnifiedAuthProvider) and EventService
  * - Automatically shows superset of what user can access
  *
  * @example
@@ -47,56 +47,30 @@
  * - Validates access before selection
  */
 
-import React, { useMemo } from 'react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator } from '../Select';
-import { Alert, AlertDescription } from '../Alert/Alert';
-import { Button } from '../Button/Button';
-import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
-import { RefreshCw, AlertCircle, Building2, Calendar } from 'lucide-react';
-import { useOrganisations } from '../../hooks/useOrganisations';
-import { useEvents } from '../../hooks/useEvents';
-import type { Organisation } from '../../types/organisation';
-import type { Event } from '../../types/event';
-import { logger } from '../../utils/core/logger';
+import React from 'react';
+import { useContextSelectorState } from './useContextSelectorState';
+import {
+  ContextSelectorLoading,
+  ContextSelectorError,
+  ContextSelectorEmpty,
+  ContextSelectorSelect,
+} from './ContextSelector.internals';
+import type { ContextSelectorProps } from './ContextSelector.types';
 
-/**
- * Props for the ContextSelector component.
- */
-export interface ContextSelectorProps {
-  /** Placeholder text for the dropdown */
-  placeholder?: string;
-  /** Additional CSS classes */
-  className?: string;
-  /** Callback fired when an organisation is selected */
-  onOrganisationSelect?: (org: Organisation) => void;
-  /** Callback fired when an event is selected */
-  onEventSelect?: (event: Event) => void;
-  /** Show friendly message when no items available */
-  showNoItemsMessage?: boolean;
-  /** Show retry button on errors */
-  showRetryButton?: boolean;
-  /** Compact display mode */
-  compact?: boolean;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Show organisations section (default: true) */
-  showOrganisations?: boolean;
-  /** Show events section (default: true) */
-  showEvents?: boolean;
-}
+export type { ContextSelectorProps } from './ContextSelector.types';
 
 /**
  * ContextSelector component for selecting organisations or events
- * 
+ *
  * This is the unified intelligent selector that shows all organisations and events
  * a user can access. It automatically determines what to show based on the user's
  * roles and permissions - no need to configure separate org/event selectors.
- * 
+ *
  * The selector intelligently shows:
  * - All organisations the user has access to (via organisation roles)
  * - All events the user has access to (via event-app roles or organisation membership)
  * - Everything for super admins
- * 
+ *
  * @component
  * @example
  * <ContextSelector
@@ -105,7 +79,7 @@ export interface ContextSelectorProps {
  * />
  */
 export function ContextSelector({
-  placeholder = "Select organisation or event",
+  placeholder = 'Select organisation or event',
   className,
   onOrganisationSelect,
   onEventSelect,
@@ -114,256 +88,68 @@ export function ContextSelector({
   compact = false,
   disabled = false,
   showOrganisations = true,
-  showEvents = true
+  showEvents = true,
 }: ContextSelectorProps) {
-  const {
-    organisations,
-    selectedOrganisation,
-    isLoading: orgLoading,
-    error: orgError,
-    refreshOrganisations
-  } = useOrganisations();
-
-  const {
-    events,
-    selectedEvent,
-    isLoading: eventLoading,
-    error: eventError,
-    refreshEvents
-  } = useEvents();
-
-
-  const isLoading = (showOrganisations && orgLoading) || (showEvents && eventLoading);
-  const hasError = (showOrganisations && orgError) || (showEvents && eventError);
-  const hasItems =
-    (showOrganisations && (organisations?.length || 0) > 0) ||
-    (showEvents && (events?.length || 0) > 0);
-
-  // Determine current selection value
-  // Priority: Event selection takes precedence over organisation selection
-  // When an event is selected, show the event (even if an org is also selected)
-  // The organisation remains in context (derived from event) but selector shows the active selection
-  const currentValue = useMemo(() => {
-    if (showEvents && selectedEvent) {
-      return `event:${selectedEvent.event_id || selectedEvent.id}`;
-    }
-    if (showOrganisations && selectedOrganisation) {
-      return `org:${selectedOrganisation.id}`;
-    }
-    return '';
-  }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
-
-  // Format display value
-  // Priority: Event selection takes precedence over organisation selection (matches currentValue)
-  const displayValue = useMemo(() => {
-    if (showEvents && selectedEvent) {
-      return (
-        <>
-          <Calendar className="inline-block size-4 mr-2" />
-          <span className="truncate">{selectedEvent.event_name}</span>
-        </>
-      );
-    }
-    if (showOrganisations && selectedOrganisation) {
-      return (
-        <>
-          <Building2 className="inline-block size-4 mr-2" />
-          <span className="truncate">{selectedOrganisation.display_name}</span>
-        </>
-      );
-    }
-    return null;
-  }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
-
-  // Determine placeholder text based on what's shown
-  const effectivePlaceholder = useMemo(() => {
-    if (placeholder !== "Select organisation or event") {
-      return placeholder;
-    }
-    if (showOrganisations && showEvents) {
-      return "Select organisation or event";
-    }
-    if (showOrganisations) {
-      return "Select organisation";
-    }
-    if (showEvents) {
-      return "Select event";
-    }
-    return placeholder;
-  }, [placeholder, showOrganisations, showEvents]);
-
-  const handleValueChange = (value: string) => {
-    if (disabled || isLoading) return;
-
-    if (value.startsWith('org:') && showOrganisations) {
-      const orgId = value.replace('org:', '');
-      const org = organisations?.find(o => o.id === orgId);
-      if (org && onOrganisationSelect) {
-        onOrganisationSelect(org);
-      }
-    } else if (value.startsWith('event:') && showEvents) {
-      const eventId = value.replace('event:', '');
-      const event = events?.find(e => (e.event_id || e.id) === eventId);
-      if (event && onEventSelect) {
-        onEventSelect(event);
-      }
-    }
-  };
-
-  const handleRetry = async () => {
-    try {
-      if (showOrganisations && orgError) {
-        await refreshOrganisations();
-      }
-      if (showEvents && eventError) {
-        await refreshEvents();
-      }
-    } catch (error) {
-      logger.error('ContextSelector', 'Failed to refresh:', error);
-    }
-  };
-
-  // Loading state - only show loading if we don't have any items yet
-  // This prevents the selector from being stuck in loading when data exists
-  if (isLoading && !hasItems) {
-    const loadingText = compact ? "Loading..." :
-      showOrganisations && showEvents ? "Loading organisations and events..." :
-        showOrganisations ? "Loading organisations..." :
-          "Loading events...";
+  const state = useContextSelectorState({
+    placeholder,
+    className,
+    onOrganisationSelect,
+    onEventSelect,
+    showNoItemsMessage,
+    showRetryButton,
+    compact,
+    disabled,
+    showOrganisations,
+    showEvents,
+  });
+
+  if (state.status === 'loading') {
     return (
-      <div className={className}>
-        <LoadingSpinner size="sm" /><br/>
-        <span className="text-sm text-muted-foreground">
-          {loadingText}
-        </span>
-      </div>
+      <ContextSelectorLoading
+        message={state.loadingText}
+        className={className}
+      />
     );
   }
 
-  // Error state
-  if (hasError) {
-    const errorMessages = [];
-    if (showOrganisations && orgError) {
-      errorMessages.push(`Failed to load organisations: ${orgError.message}`);
-    }
-    if (showEvents && eventError) {
-      errorMessages.push(`Failed to load events: ${eventError.message}`);
-    }
+  if (state.status === 'error') {
     return (
-      <Alert variant="destructive" className={`space-y-2 ${className}`}>
-        <AlertCircle className="size-4" />
-        <AlertDescription>
-          {errorMessages.join(' ')}
-        </AlertDescription>
-        {showRetryButton && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleRetry}
-            disabled={isLoading}
-            className="w-full"
-          >
-            <RefreshCw className={`size-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-            Retry
-          </Button>
-        )}
-      </Alert>
+      <ContextSelectorError
+        messages={state.errorMessages}
+        onRetry={state.handleRetry}
+        isLoading={state.isLoading}
+        showRetryButton={showRetryButton}
+        className={className}
+      />
     );
   }
 
-  // No items available
-  if (!hasItems) {
-    if (showNoItemsMessage) {
-      const noItemsText =
-        showOrganisations && showEvents ? "No organisations or events available. Please contact your administrator." :
-          showOrganisations ? "No organisations available. Please contact your administrator." :
-            "No events available. Please contact your administrator.";
-      return (
-          <Alert className={`space-y-2 ${className}`}>
-            <AlertCircle className="size-4" />
-            <AlertDescription>
-              {noItemsText}
-            </AlertDescription>
-          {showRetryButton && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleRetry}
-              disabled={isLoading}
-              className="w-full"
-            >
-              <RefreshCw className={`size-4 mr-2 ${isLoading ? 'animate-spin' : ''}`} />
-              Check Again
-            </Button>
-          )}
-      </Alert>
-      );
-    }
-    return null;
+  if (state.status === 'empty') {
+    if (!showNoItemsMessage) return null;
+    return (
+      <ContextSelectorEmpty
+        message={state.noItemsText}
+        onRetry={state.handleRetry}
+        isLoading={state.isLoading}
+        showRetryButton={showRetryButton}
+        className={className}
+      />
+    );
   }
 
   return (
-    <Select
-      value={currentValue}
-      onValueChange={handleValueChange}
-      disabled={disabled || isLoading}
-      className={className} data-testid="context-selector"
-    >
-      <SelectTrigger
-        className="text-left"
-        variant="outline"
-      >
-        <SelectValue placeholder={effectivePlaceholder}>
-          {displayValue}
-        </SelectValue>
-      </SelectTrigger>
-      <SelectContent>
-        {/* Organisations Section */}
-        {showOrganisations && organisations && organisations.length > 0 && (
-          <>
-            <SelectGroup>
-              <SelectLabel>Organisations</SelectLabel>
-              {organisations.map((org) => (
-                <SelectItem
-                  key={org.id}
-                  value={`org:${org.id}`}
-                >
-                  <Building2 className="inline-block size-4 mr-2" />
-                  <span className="font-medium">{org.display_name}</span><br />
-                  {!compact && org.description && (
-                    <span className="text-xs text-muted-foreground">
-                      {org.description}
-                    </span>
-                  )}
-                </SelectItem>
-              ))}
-            </SelectGroup>
-            {showEvents && events && events.length > 0 && <SelectSeparator />}
-          </>
-        )}
-
-        {/* Events Section */}
-        {showEvents && events && events.length > 0 && (
-          <SelectGroup>
-            <SelectLabel>Events</SelectLabel>
-            {events.map((event) => (
-              <SelectItem
-                key={event.event_id || event.id}
-                value={`event:${event.event_id || event.id}`}
-              >
-                <Calendar className=" inline-block size-4 mr-2" />
-                <span className="font-medium">{event.event_name}</span><br />
-                {!compact && event.event_date && (
-                  <span className="text-xs text-muted-foreground">
-                    {new Date(event.event_date).toLocaleDateString()}
-                  </span>
-                )}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        )}
-      </SelectContent>
-    </Select>
+    <ContextSelectorSelect
+      currentValue={state.currentValue}
+      displayValue={state.displayValue}
+      effectivePlaceholder={state.effectivePlaceholder}
+      disabled={disabled || state.isLoading}
+      onValueChange={state.handleValueChange}
+      organisations={state.organisations}
+      events={state.events}
+      showOrganisations={showOrganisations}
+      showEvents={showEvents}
+      compact={compact}
+      className={className}
+    />
   );
 }
-

package/src/components/ContextSelector/ContextSelector.types.ts

@@ -0,0 +1,35 @@
+/**
+ * @file Context Selector Types
+ * @package @jmruthers/pace-core
+ * @module Components/ContextSelector
+ * @since 0.6.4
+ */
+
+import type { Organisation } from '../../types/organisation';
+import type { Event } from '../../types/event';
+
+/**
+ * Props for the ContextSelector component.
+ */
+export interface ContextSelectorProps {
+  /** Placeholder text for the dropdown */
+  placeholder?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Callback fired when an organisation is selected */
+  onOrganisationSelect?: (org: Organisation) => void;
+  /** Callback fired when an event is selected */
+  onEventSelect?: (event: Event) => void;
+  /** Show friendly message when no items available */
+  showNoItemsMessage?: boolean;
+  /** Show retry button on errors */
+  showRetryButton?: boolean;
+  /** Compact display mode */
+  compact?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Show organisations section (default: true) */
+  showOrganisations?: boolean;
+  /** Show events section (default: true) */
+  showEvents?: boolean;
+}

package/src/components/ContextSelector/useContextSelectorState.tsx

@@ -0,0 +1,195 @@
+/**
+ * @file Context Selector State Hook
+ * @package @jmruthers/pace-core
+ * @module Components/ContextSelector
+ * @since 0.6.4
+ *
+ * Encapsulates derived state, handlers, and status for ContextSelector.
+ * Keeps the component presentational and reduces complexity.
+ */
+
+import React, { useMemo } from 'react';
+import { Building2, Calendar } from 'lucide-react';
+import { useOrganisations } from '../../hooks/useOrganisations';
+import { useEvents } from '../../hooks/useEvents';
+import type { Organisation } from '../../types/organisation';
+import type { Event } from '../../types/event';
+import { logger } from '../../utils/core/logger';
+import type { ContextSelectorProps } from './ContextSelector.types';
+
+export type ContextSelectorStatus = 'loading' | 'error' | 'empty' | 'ready';
+
+export interface ContextSelectorState {
+  status: ContextSelectorStatus;
+  organisations: Organisation[] | undefined;
+  events: Event[] | undefined;
+  selectedOrganisation: Organisation | null;
+  selectedEvent: Event | null;
+  isLoading: boolean;
+  currentValue: string;
+  displayValue: React.ReactNode;
+  effectivePlaceholder: string;
+  loadingText: string;
+  errorMessages: string[];
+  noItemsText: string;
+  handleValueChange: (value: string) => void;
+  handleRetry: () => Promise<void>;
+}
+
+function getStatus(
+  isLoading: boolean,
+  hasError: boolean,
+  hasItems: boolean
+): ContextSelectorStatus {
+  if (isLoading && !hasItems) return 'loading';
+  if (hasError) return 'error';
+  if (!hasItems) return 'empty';
+  return 'ready';
+}
+
+export function useContextSelectorState(
+  props: ContextSelectorProps
+): ContextSelectorState {
+  const {
+    placeholder = 'Select organisation or event',
+    onOrganisationSelect,
+    onEventSelect,
+    disabled = false,
+    showOrganisations = true,
+    showEvents = true,
+  } = props;
+
+  const {
+    organisations,
+    selectedOrganisation,
+    isLoading: orgLoading,
+    error: orgError,
+    refreshOrganisations,
+  } = useOrganisations();
+
+  const {
+    events,
+    selectedEvent,
+    isLoading: eventLoading,
+    error: eventError,
+    refreshEvents,
+  } = useEvents();
+
+  const isLoading =
+    (showOrganisations && orgLoading) || (showEvents && eventLoading);
+  const hasError =
+    (showOrganisations && !!orgError) || (showEvents && !!eventError);
+  const hasItems =
+    (showOrganisations && (organisations?.length ?? 0) > 0) ||
+    (showEvents && (events?.length ?? 0) > 0);
+
+  const status = useMemo(
+    () => getStatus(isLoading, hasError, hasItems),
+    [isLoading, hasError, hasItems]
+  );
+
+  const currentValue = useMemo(() => {
+    if (showEvents && selectedEvent) {
+      return `event:${selectedEvent.event_id || selectedEvent.id}`;
+    }
+    if (showOrganisations && selectedOrganisation) {
+      return `org:${selectedOrganisation.id}`;
+    }
+    return '';
+  }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
+
+  const displayValue = useMemo(() => {
+    if (showEvents && selectedEvent) {
+      return (
+        <>
+          <Calendar className="inline-block size-4 mr-2" />
+          <span className="truncate">{selectedEvent.event_name}</span>
+        </>
+      );
+    }
+    if (showOrganisations && selectedOrganisation) {
+      return (
+        <>
+          <Building2 className="inline-block size-4 mr-2" />
+          <span className="truncate">{selectedOrganisation.display_name}</span>
+        </>
+      );
+    }
+    return null;
+  }, [showOrganisations, showEvents, selectedOrganisation, selectedEvent]);
+
+  const effectivePlaceholder = useMemo(() => {
+    if (placeholder !== 'Select organisation or event') return placeholder;
+    if (showOrganisations && showEvents) return 'Select organisation or event';
+    if (showOrganisations) return 'Select organisation';
+    if (showEvents) return 'Select event';
+    return placeholder;
+  }, [placeholder, showOrganisations, showEvents]);
+
+  const loadingText = useMemo(() => {
+    if (props.compact) return 'Loading...';
+    if (showOrganisations && showEvents) return 'Loading organisations and events...';
+    if (showOrganisations) return 'Loading organisations...';
+    return 'Loading events...';
+  }, [props.compact, showOrganisations, showEvents]);
+
+  const errorMessages = useMemo(() => {
+    const messages: string[] = [];
+    if (showOrganisations && orgError) {
+      messages.push(`Failed to load organisations: ${orgError.message}`);
+    }
+    if (showEvents && eventError) {
+      messages.push(`Failed to load events: ${eventError.message}`);
+    }
+    return messages;
+  }, [showOrganisations, showEvents, orgError, eventError]);
+
+  const noItemsText = useMemo(() => {
+    if (showOrganisations && showEvents) {
+      return 'No organisations or events available. Please contact your administrator.';
+    }
+    if (showOrganisations) {
+      return 'No organisations available. Please contact your administrator.';
+    }
+    return 'No events available. Please contact your administrator.';
+  }, [showOrganisations, showEvents]);
+
+  const handleValueChange = (value: string) => {
+    if (disabled || isLoading) return;
+    if (value.startsWith('org:') && showOrganisations) {
+      const orgId = value.replace('org:', '');
+      const org = organisations?.find((o) => o.id === orgId);
+      if (org && onOrganisationSelect) onOrganisationSelect(org);
+    } else if (value.startsWith('event:') && showEvents) {
+      const eventId = value.replace('event:', '');
+      const event = events?.find((e) => (e.event_id || e.id) === eventId);
+      if (event && onEventSelect) onEventSelect(event);
+    }
+  };
+
+  const handleRetry = async () => {
+    try {
+      if (showOrganisations && orgError) await refreshOrganisations();
+      if (showEvents && eventError) await refreshEvents();
+    } catch (error) {
+      logger.error('ContextSelector', 'Failed to refresh:', error);
+    }
+  };
+
+  return {
+    status,
+    organisations,
+    events,
+    selectedOrganisation: selectedOrganisation ?? null,
+    selectedEvent: selectedEvent ?? null,
+    isLoading,
+    currentValue,
+    displayValue,
+    effectivePlaceholder,
+    loadingText,
+    errorMessages,
+    noItemsText,
+    handleValueChange,
+    handleRetry,
+  };
+}