@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -68,16 +68,12 @@
  * - LoadingSpinner - Loading state UI
  */
 
-import React, { useMemo, useEffect, useRef, useState } from 'react';
+import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
-import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
-import { useSessionRestoration } from '../../hooks/useSessionRestoration';
-import { useEvents } from '../../hooks/useEvents';
-import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { SessionRestorationLoader } from '../SessionRestorationLoader';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { Alert, AlertDescription, AlertTitle } from '../Alert/Alert';
-import { logger } from '../../utils/core/logger';
-import { usePreventTabReload } from '../../hooks/usePreventTabReload';
+import { useProtectedRouteState } from './useProtectedRouteState';
 
 /**
  * Props for the ProtectedRoute component.
@@ -130,233 +126,49 @@ export function ProtectedRoute({
   requireEvent = false,
   noEventsFallback,
   loadingFallback,
-  loginPath = '/login'
+  loginPath = '/login',
 }: ProtectedRouteProps) {
-  const { isAuthenticated, isLoading } = useUnifiedAuth();
-  
-  // Always call useEvents() - UnifiedAuthProvider always includes EventServiceProvider
-  // Only use the values when requireEvent is true
-  const eventsContext = useEvents();
-  const selectedEvent = requireEvent ? eventsContext.selectedEvent : null;
-  const events = requireEvent ? (eventsContext.events || []) : [];
-  const eventLoading = requireEvent ? (eventsContext.isLoading || false) : false;
-  
-  const sessionRestoration = useSessionRestoration();
-
-  // Prevent full page reloads when switching tabs (handles bfcache and visibility changes)
-  usePreventTabReload({ enabled: true, gracePeriodMs: 2000 });
-
-  // Track if user was previously authenticated to prevent redirects during session refresh
-  const wasAuthenticatedRef = useRef(false);
-  const [shouldRedirect, setShouldRedirect] = useState(false);
-  const tabJustBecameVisibleRef = useRef(false);
-  
-  // Track authentication state to detect when user was previously logged in
-  useEffect(() => {
-    if (isAuthenticated) {
-      wasAuthenticatedRef.current = true;
-      setShouldRedirect(false);
-      tabJustBecameVisibleRef.current = false; // Clear visibility flag when authenticated
-    }
-  }, [isAuthenticated]);
-
-  // Handle tab visibility changes - prevent immediate redirects when tab becomes visible
-  // This prevents the page from refreshing when switching back to the tab
-  useEffect(() => {
-    if (typeof document === 'undefined') return;
-
-    let timeoutId: ReturnType<typeof setTimeout> | null = null;
-    let wasHidden = document.hidden;
-
-    const handleVisibilityChange = () => {
-      const isNowVisible = !document.hidden;
-      
-      // When tab becomes visible, immediately prevent redirects and give session refresh time
-      if (isNowVisible && wasHidden) {
-        // Tab just became visible - immediately prevent redirects
-        if (!isAuthenticated && wasAuthenticatedRef.current) {
-          tabJustBecameVisibleRef.current = true;
-          setShouldRedirect(false); // Immediately clear redirect flag
-          
-          // Clear any existing timeout
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-          }
-          
-          // Wait a bit to see if session refresh completes
-          timeoutId = setTimeout(() => {
-            // Only allow redirect if still not authenticated after delay
-            tabJustBecameVisibleRef.current = false;
-            // Use a function to get the latest state
-            setShouldRedirect((prev) => {
-              // Only set to true if we're still not authenticated
-              // This will be checked again in the render logic
-              return prev;
-            });
-          }, 2000); // 2 second grace period for session refresh
-        }
-      } else if (!isNowVisible) {
-        // Tab became hidden - clear the visibility flag
-        tabJustBecameVisibleRef.current = false;
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-          timeoutId = null;
-        }
-      }
-      
-      wasHidden = !isNowVisible;
-    };
-
-    // Check initial state - if tab is visible and user appears logged out, give grace period
-    if (!document.hidden && !isAuthenticated && wasAuthenticatedRef.current) {
-      tabJustBecameVisibleRef.current = true;
-      setShouldRedirect(false);
-      timeoutId = setTimeout(() => {
-        tabJustBecameVisibleRef.current = false;
-      }, 2000);
-    }
+  const { phase, loginPath: resolvedLoginPath } = useProtectedRouteState({
+    requireEvent,
+    loginPath,
+  });
 
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [isAuthenticated]);
-
-  // Reset redirect flag when authenticated
-  useEffect(() => {
-    if (isAuthenticated) {
-      setShouldRedirect(false);
-      tabJustBecameVisibleRef.current = false;
-    }
-  }, [isAuthenticated]);
-
-  const isRestoringSession = useMemo(() => {
-    return sessionRestoration.isRestoring &&
-      !sessionRestoration.restorationComplete &&
-      !sessionRestoration.restorationError &&
-      !sessionRestoration.hasTimedOut;
-  }, [
-    sessionRestoration.isRestoring,
-    sessionRestoration.restorationComplete,
-    sessionRestoration.restorationError,
-    sessionRestoration.hasTimedOut
-  ]);
-
-  // Show session restoration loader during restoration
-  if (isRestoringSession) {
+  if (phase === 'session-restoring') {
     return <SessionRestorationLoader />;
   }
 
-  // Allow rendering during event loading - prevents blocking UI while events load
-  // This must come before auth loading check to avoid blocking when only events are loading
-  if (requireEvent && eventLoading) {
+  if (phase === 'event-loading') {
     return <Outlet />;
   }
 
-  // Show loading state while auth is being determined (but not organisation/event loading)
-  // Use isLoading (combined loading state) for consistency with simpler implementations
-  if (isLoading && !sessionRestoration.hasTimedOut) {
-    return loadingFallback || (
-      <main className="grid place-items-center size-full">
-        <LoadingSpinner />
-      </main>
-    );
-  }
-
-  // Redirect to login if not authenticated
-  // Priority order:
-  // 1. If session restoration has timed out or errored → redirect immediately (even if loading)
-  // 2. If user was never authenticated → redirect immediately (even if loading)
-  // 3. If tab just became visible → show loading (prevent redirect during grace period)
-  // 4. If we've confirmed they should redirect (after visibility change grace period) → redirect
-  // 5. Otherwise, if loading → show loading spinner (session might be refreshing)
-  // 6. Otherwise → redirect (user is not authenticated and not loading)
-  if (!isAuthenticated) {
-    // Session restoration timeout/error always redirects immediately
-    if (sessionRestoration.hasTimedOut || sessionRestoration.restorationError) {
-      logger.warn('ProtectedRoute', 'Session restoration failed, redirecting to login', {
-        timedOut: sessionRestoration.hasTimedOut,
-        error: sessionRestoration.restorationError?.message
-      });
-      return <Navigate to={loginPath} replace />;
-    }
-
-    // User was never authenticated → redirect immediately
-    if (!wasAuthenticatedRef.current) {
-      return <Navigate to={loginPath} replace />;
-    }
-
-    // Tab just became visible - show loading to prevent redirect during grace period
-    // Also check document visibility state directly as a fallback
-    const isTabVisible = typeof document !== 'undefined' && !document.hidden;
-    if (tabJustBecameVisibleRef.current || (isTabVisible && wasAuthenticatedRef.current && isLoading)) {
-      return loadingFallback || (
+  if (phase === 'auth-loading') {
+    return (
+      loadingFallback ?? (
         <main className="grid place-items-center size-full">
           <LoadingSpinner />
         </main>
-      );
-    }
-
-    // We've confirmed redirect after grace period → redirect
-    if (shouldRedirect) {
-      return <Navigate to={loginPath} replace />;
-    }
-
-    // User was authenticated before but now appears logged out
-    // Show loading state while we wait for session refresh (unless we're not loading)
-    if (isLoading) {
-      return loadingFallback || (
-        <main className="grid place-items-center size-full">
-          <LoadingSpinner />
-        </main>
-      );
-    }
-
-    // Not loading and not authenticated → redirect
-    return <Navigate to={loginPath} replace />;
+      )
+    );
   }
 
-  // If event is not required, allow rendering
-  if (!requireEvent) {
-    return <Outlet />;
+  if (phase === 'redirect') {
+    return <Navigate to={resolvedLoginPath} replace />;
   }
 
-  // Note: Super admin bypass would require useRBAC hook which adds complexity
-  // Apps that need super admin access without events should set requireEvent={false}
-  // For now, we keep it simple and always require events when requireEvent=true
-
-  // Event loading check already handled above before auth loading check
-
-  // If no events are available, show error message
-  if (!events || events.length === 0) {
-    return noEventsFallback || (
-      <main className="grid place-items-center text-center min-h-screen p-8">
-        <Alert variant="destructive" className="max-w-md">
-          <AlertTitle>No Events Available</AlertTitle>
-          <AlertDescription>
-            You don't have access to any events. Please contact your administrator if you believe this is an error.
-          </AlertDescription>
-        </Alert>
-      </main>
+  if (phase === 'no-events') {
+    return (
+      noEventsFallback ?? (
+        <main className="grid place-items-center text-center min-h-screen p-8">
+          <Alert variant="destructive" className="max-w-md">
+            <AlertTitle>No Events Available</AlertTitle>
+            <AlertDescription>
+              You don't have access to any events. Please contact your administrator if you believe this is an error.
+            </AlertDescription>
+          </Alert>
+        </main>
+      )
     );
   }
 
-  // KEY FIX: Allow rendering when events exist but none selected
-  // This allows the event selector (typically in PaceAppLayout header) to be visible
-  // Individual pages should handle "no selected event" state gracefully
-  // Auto-selection will handle selecting the next event, or user can manually select
-  
-  // If no event selected but events exist, allow rendering
-  // The event selector will be visible and user can select, or auto-selection will kick in
-  if (!selectedEvent) {
-    // Log for debugging - this is expected behavior, not an error
-    return <Outlet />;
-  }
-
-  // Event is selected - allow rendering
   return <Outlet />;
 }
-

package/src/components/ProtectedRoute/useProtectedRouteState.ts

@@ -0,0 +1,128 @@
+/**
+ * @file Protected Route State Hook
+ * @package @jmruthers/pace-core
+ * @module Components/ProtectedRoute
+ * @since 0.6.0
+ *
+ * Computes the current "phase" for ProtectedRoute (session-restoring, loading, redirect, etc.)
+ * so the component can render from a single discriminated value.
+ */
+
+import { useMemo } from 'react';
+import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
+import { useSessionRestoration } from '../../hooks/useSessionRestoration';
+import { useEvents } from '../../hooks/useEvents';
+import { usePreventTabReload } from '../../hooks/usePreventTabReload';
+import { logger } from '../../utils/core/logger';
+import { useVisibilityRedirectGrace } from './useVisibilityRedirectGrace';
+
+export type ProtectedRoutePhase =
+  | 'session-restoring'
+  | 'event-loading'
+  | 'auth-loading'
+  | 'redirect'
+  | 'no-events'
+  | 'outlet';
+
+export interface UseProtectedRouteStateProps {
+  requireEvent?: boolean;
+  loginPath?: string;
+}
+
+export interface UseProtectedRouteStateResult {
+  phase: ProtectedRoutePhase;
+  loginPath: string;
+}
+
+/**
+ * Computes the current ProtectedRoute phase from auth, session, event, and visibility state.
+ */
+export function useProtectedRouteState({
+  requireEvent = false,
+  loginPath = '/login',
+}: UseProtectedRouteStateProps): UseProtectedRouteStateResult {
+  const { isAuthenticated, isLoading } = useUnifiedAuth();
+  const eventsContext = useEvents();
+  const sessionRestoration = useSessionRestoration();
+
+  usePreventTabReload({ enabled: true, gracePeriodMs: 2000 });
+
+  const visibility = useVisibilityRedirectGrace(isAuthenticated);
+
+  const eventLoading = requireEvent ? (eventsContext.isLoading ?? false) : false;
+
+  const isRestoringSession = useMemo(
+    () =>
+      sessionRestoration.isRestoring &&
+      !sessionRestoration.restorationComplete &&
+      !sessionRestoration.restorationError &&
+      !sessionRestoration.hasTimedOut,
+    [
+      sessionRestoration.isRestoring,
+      sessionRestoration.restorationComplete,
+      sessionRestoration.restorationError,
+      sessionRestoration.hasTimedOut,
+    ]
+  );
+
+  const phase = useMemo((): ProtectedRoutePhase => {
+    if (isRestoringSession) return 'session-restoring';
+    if (requireEvent && eventLoading) return 'event-loading';
+    if (isLoading && !sessionRestoration.hasTimedOut) return 'auth-loading';
+
+    if (!isAuthenticated) {
+      if (sessionRestoration.hasTimedOut || sessionRestoration.restorationError) {
+        logger.warn('ProtectedRoute', 'Session restoration failed, redirecting to login', {
+          timedOut: sessionRestoration.hasTimedOut,
+          error: sessionRestoration.restorationError?.message,
+        });
+        return 'redirect';
+      }
+
+      const restorationNotComplete =
+        !sessionRestoration.restorationComplete &&
+        !sessionRestoration.hasTimedOut &&
+        !sessionRestoration.restorationError;
+
+      if (
+        restorationNotComplete ||
+        sessionRestoration.isRestoring ||
+        isLoading
+      ) {
+        return 'auth-loading';
+      }
+
+      if (!visibility.wasAuthenticatedBefore) return 'redirect';
+      if (visibility.showLoadingForVisibility) return 'auth-loading';
+      if (
+        (typeof document !== 'undefined' && !document.hidden && visibility.wasAuthenticatedBefore && isLoading)
+      ) {
+        return 'auth-loading';
+      }
+      if (visibility.shouldRedirectToLogin) return 'redirect';
+      if (isLoading) return 'auth-loading';
+      return 'redirect';
+    }
+
+    if (!requireEvent) return 'outlet';
+    const eventsList = requireEvent ? (eventsContext.events || []) : [];
+    if (!eventsList.length) return 'no-events';
+    return 'outlet';
+  }, [
+    isRestoringSession,
+    requireEvent,
+    eventLoading,
+    isLoading,
+    sessionRestoration.hasTimedOut,
+    sessionRestoration.restorationError,
+    sessionRestoration.restorationComplete,
+    sessionRestoration.isRestoring,
+    isAuthenticated,
+    visibility.wasAuthenticatedBefore,
+    visibility.showLoadingForVisibility,
+    visibility.shouldRedirectToLogin,
+    eventsContext.events,
+  ]);
+
+  return { phase, loginPath };
+}

package/src/components/ProtectedRoute/useVisibilityRedirectGrace.ts

@@ -0,0 +1,89 @@
+/**
+ * @file Visibility Redirect Grace Hook
+ * @package @jmruthers/pace-core
+ * @module Components/ProtectedRoute
+ * @since 0.6.0
+ *
+ * Encapsulates tab visibility and redirect grace period logic for ProtectedRoute.
+ * Prevents immediate redirects to login when the tab becomes visible (e.g. after
+ * switching back) so session refresh has time to complete.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+const GRACE_PERIOD_MS = 2000;
+
+export interface UseVisibilityRedirectGraceResult {
+  /** True when we are in the "tab just became visible" grace period (show loading, do not redirect). */
+  showLoadingForVisibility: boolean;
+  /** True when we have confirmed the user should redirect to login after the grace period. */
+  shouldRedirectToLogin: boolean;
+  /** True if the user was previously authenticated (used to decide immediate redirect vs grace). */
+  wasAuthenticatedBefore: boolean;
+}
+
+/**
+ * Tracks visibility and auth state to avoid redirecting to login during tab visibility changes.
+ * Returns booleans for the parent to decide "show loading" vs "redirect".
+ */
+export function useVisibilityRedirectGrace(isAuthenticated: boolean): UseVisibilityRedirectGraceResult {
+  const wasAuthenticatedRef = useRef(false);
+  const [shouldRedirect, setShouldRedirect] = useState(false);
+  const [inGracePeriod, setInGracePeriod] = useState(false);
+
+  // Track auth and clear flags when authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      wasAuthenticatedRef.current = true;
+      setShouldRedirect(false);
+      setInGracePeriod(false);
+    }
+  }, [isAuthenticated]);
+
+  // Visibility change: grace period when tab becomes visible and user appears logged out
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    let wasHidden = document.hidden;
+
+    const handleVisibilityChange = () => {
+      const isNowVisible = !document.hidden;
+
+      if (isNowVisible && wasHidden) {
+        if (!isAuthenticated && wasAuthenticatedRef.current) {
+          setInGracePeriod(true);
+          setShouldRedirect(false);
+          if (timeoutId) clearTimeout(timeoutId);
+          timeoutId = setTimeout(() => {
+            setInGracePeriod(false);
+            setShouldRedirect((prev) => prev);
+          }, GRACE_PERIOD_MS);
+        }
+      } else if (!isNowVisible) {
+        setInGracePeriod(false);
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = null;
+        }
+      }
+
+      wasHidden = !isNowVisible;
+    };
+
+    // Only start grace period from visibilitychange (tab became visible), not when effect runs
+    // after isAuthenticated changes (e.g. auth→unauth), so we don't show loading instead of redirect.
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [isAuthenticated]);
+
+  return {
+    showLoadingForVisibility: inGracePeriod,
+    shouldRedirectToLogin: shouldRedirect,
+    wasAuthenticatedBefore: wasAuthenticatedRef.current,
+  };
+}