@jmruthers/pace-core 0.5.185 → 0.5.187

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -68,7 +68,7 @@
  * - LoadingSpinner - Loading state UI
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useRef, useState } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 import { useSessionRestoration } from '../../hooks/useSessionRestoration';
@@ -77,6 +77,7 @@ import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { SessionRestorationLoader } from '../SessionRestorationLoader';
 import { Alert, AlertDescription, AlertTitle } from '../Alert/Alert';
 import { logger } from '../../utils/core/logger';
+import { usePreventTabReload } from '../../hooks/usePreventTabReload';
 
 export interface ProtectedRouteProps {
   /**
@@ -148,6 +149,96 @@ export function ProtectedRoute({
   
   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);
+    }
+
+    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 &&
@@ -182,13 +273,55 @@ export function ProtectedRoute({
   }
 
   // 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 || (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+          <LoadingSpinner />
+        </div>
+      );
     }
+
+    // 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 || (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+          <LoadingSpinner />
+        </div>
+      );
+    }
+
+    // Not loading and not authenticated → redirect
     return <Navigate to={loginPath} replace />;
   }
 

package/src/components/index.ts

@@ -43,6 +43,8 @@ export type { CardProps, CardActionsProps } from './Card';
 
 export { Input } from './Input';
 export type { InputProps } from './Input';
+export { AddressField } from './AddressField';
+export type { AddressFieldProps, AddressFieldRef, ParsedAddress, AutocompleteOptions } from './AddressField';
 export { Label } from './Label';
 export type { LabelProps } from './Label';
 

package/src/hooks/__tests__/useFileDisplay.unit.test.ts

@@ -25,7 +25,18 @@ import { FileCategory as FileCategoryEnum } from '../../types/file-reference';
 // Mock storage helpers
 vi.mock('../../utils/storage/helpers', () => ({
   getPublicUrl: vi.fn((supabase: any, path: string) => `https://example.com/${path}`),
-  getSignedUrl: vi.fn().mockResolvedValue({ url: 'https://example.com/signed-file.jpg', expiresAt: new Date().toISOString() })
+  getSignedUrl: vi.fn().mockResolvedValue({ url: 'https://example.com/signed-file.jpg', expiresAt: new Date().toISOString() }),
+  generateFileUrlsBatch: vi.fn().mockImplementation(async (supabase, files) => {
+    const urlMap = new Map<string, string>();
+    for (const file of files) {
+      if (file.is_public) {
+        urlMap.set(file.id, `https://example.com/${file.file_path}`);
+      } else {
+        urlMap.set(file.id, `https://example.com/signed/${file.file_path}`);
+      }
+    }
+    return urlMap;
+  })
 }));
 
 // Mock file reference service
@@ -38,7 +49,7 @@ vi.mock('../../utils/file-reference', () => ({
   createFileReferenceService: vi.fn(() => mockService)
 }));
 
-import { getPublicUrl, getSignedUrl } from '../../utils/storage/helpers';
+import { getPublicUrl, getSignedUrl, generateFileUrlsBatch } from '../../utils/storage/helpers';
 import { createFileReferenceService } from '../../utils/file-reference';
 
 describe('useFileDisplay Hook', () => {
@@ -87,6 +98,19 @@ describe('useFileDisplay Hook', () => {
     mockSupabase = createMockSupabaseClient() as any;
     mockService.getFilesByCategory.mockResolvedValue([]);
     mockService.listFileReferences.mockResolvedValue([]);
+    
+    // Reset generateFileUrlsBatch mock to ensure it returns a Map
+    vi.mocked(generateFileUrlsBatch).mockImplementation(async (supabase, files) => {
+      const urlMap = new Map<string, string>();
+      for (const file of files) {
+        if (file.is_public) {
+          urlMap.set(file.id, `https://example.com/${file.file_path}`);
+        } else {
+          urlMap.set(file.id, `https://example.com/signed/${file.file_path}`);
+        }
+      }
+      return urlMap;
+    });
   });
 
   afterEach(() => {
@@ -305,13 +329,14 @@ describe('useFileDisplay Hook', () => {
       await waitFor(
         () => {
           expect(result.current.isLoading).toBe(false);
+          expect(result.current.fileCount).toBe(2);
+          expect(result.current.fileReferences.length).toBe(2);
+          expect(result.current.fileUrls).toBeDefined();
+          expect(result.current.fileUrls.size).toBe(2);
         },
         { timeout: 2000 }
       );
 
-      expect(result.current.fileCount).toBe(2);
-      expect(result.current.fileReferences.length).toBe(2);
-      expect(result.current.fileUrls.size).toBe(2);
       expect(result.current.fileUrl).toBe(null); // No single file URL in multiple mode
       expect(result.current.fileReference).toBe(null); // No single file reference in multiple mode
     });

package/src/hooks/__tests__/useOrganisationSecurity.unit.test.tsx

@@ -19,6 +19,7 @@ vi.mock('../../hooks/useOrganisations', () => ({
 // Mock the RBAC API
 vi.mock('../../rbac/api', () => ({
   isPermitted: vi.fn(),
+  isPermittedCached: vi.fn(),
   getPermissionMap: vi.fn(),
   emitAuditEvent: vi.fn()
 }));
@@ -451,8 +452,8 @@ describe('useOrganisationSecurity', () => {
       const mockOrg = { id: 'org-123' };
 
       // Mock the RBAC API
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(true);
+      const { isPermittedCached } = await import('../../rbac/api');
+      vi.mocked(isPermittedCached).mockResolvedValue(true);
       
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
@@ -469,7 +470,7 @@ describe('useOrganisationSecurity', () => {
       const hasPermission = await result.current.hasPermission('view_basic');
 
       expect(hasPermission).toBe(true);
-      expect(isPermitted).toHaveBeenCalledWith({
+      expect(isPermittedCached).toHaveBeenCalledWith({
         userId: 'user-123',
         scope: {
           organisationId: 'org-123',
@@ -485,8 +486,8 @@ describe('useOrganisationSecurity', () => {
       const mockOrg = { id: 'org-123' };
 
       // Mock the RBAC API to throw an error
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockRejectedValue(new Error('RBAC API error'));
+      const { isPermittedCached } = await import('../../rbac/api');
+      vi.mocked(isPermittedCached).mockRejectedValue(new Error('RBAC API error'));
       
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
@@ -510,8 +511,8 @@ describe('useOrganisationSecurity', () => {
       const mockOrg = { id: 'org-123' };
 
       // Mock the RBAC API to throw an error
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockImplementation(() => {
+      const { isPermittedCached } = await import('../../rbac/api');
+      vi.mocked(isPermittedCached).mockImplementation(() => {
         throw new Error('RBAC API exception');
       });
       
@@ -536,8 +537,8 @@ describe('useOrganisationSecurity', () => {
       const mockUser = { id: 'user-123', user_metadata: { eventId: 'event-123', appId: 'app-123' } };
 
       // Mock the RBAC API
-      const { isPermitted } = await import('../../rbac/api');
-      vi.mocked(isPermitted).mockResolvedValue(true);
+      const { isPermittedCached } = await import('../../rbac/api');
+      vi.mocked(isPermittedCached).mockResolvedValue(true);
       
       vi.mocked(useUnifiedAuth).mockReturnValue({
         ...mockUseUnifiedAuth,
@@ -549,7 +550,7 @@ describe('useOrganisationSecurity', () => {
 
       await result.current.hasPermission('view_basic', 'org-456');
 
-      expect(isPermitted).toHaveBeenCalledWith({
+      expect(isPermittedCached).toHaveBeenCalledWith({
         userId: 'user-123',
         scope: {
           organisationId: 'org-456',

package/src/hooks/__tests__/usePublicFileDisplay.test.ts

@@ -21,9 +21,20 @@ import type { Database } from '../../types/database';
 import type { FileCategory } from '../../types/file-reference';
 import { FileCategory as FileCategoryEnum } from '../../types/file-reference';
 
-// Mock getPublicUrl
+// Mock getPublicUrl and generateFileUrlsBatch
 vi.mock('../../utils/storage/helpers', () => ({
-  getPublicUrl: vi.fn((supabase: any, path: string) => `https://example.com/${path}`)
+  getPublicUrl: vi.fn((supabase: any, path: string) => `https://example.com/${path}`),
+  generateFileUrlsBatch: vi.fn().mockImplementation(async (supabase, files) => {
+    const urlMap = new Map<string, string>();
+    for (const file of files) {
+      if (file.is_public) {
+        urlMap.set(file.id, `https://example.com/${file.file_path}`);
+      } else {
+        urlMap.set(file.id, `https://example.com/signed/${file.file_path}`);
+      }
+    }
+    return urlMap;
+  })
 }));
 
 // Mock logger
@@ -36,7 +47,7 @@ vi.mock('../../utils/core/logger', () => ({
   },
 }));
 
-import { getPublicUrl } from '../../utils/storage/helpers';
+import { getPublicUrl, generateFileUrlsBatch } from '../../utils/storage/helpers';
 
 describe('usePublicFileDisplay Hook', () => {
   let mockSupabase: SupabaseClient<Database>;
@@ -61,6 +72,19 @@ describe('usePublicFileDisplay Hook', () => {
     vi.clearAllMocks();
     clearPublicFileDisplayCache();
     mockSupabase = createMockSupabaseClient() as any;
+    
+    // Reset generateFileUrlsBatch mock to ensure it returns a Map
+    vi.mocked(generateFileUrlsBatch).mockImplementation(async (supabase, files) => {
+      const urlMap = new Map<string, string>();
+      for (const file of files) {
+        if (file.is_public) {
+          urlMap.set(file.id, `https://example.com/${file.file_path}`);
+        } else {
+          urlMap.set(file.id, `https://example.com/signed/${file.file_path}`);
+        }
+      }
+      return urlMap;
+    });
   });
 
   afterEach(() => {
@@ -256,13 +280,14 @@ describe('usePublicFileDisplay Hook', () => {
       await waitFor(
         () => {
           expect(result.current.isLoading).toBe(false);
+          expect(result.current.fileCount).toBe(2);
+          expect(result.current.fileReferences.length).toBe(2);
+          expect(result.current.fileUrls).toBeDefined();
+          expect(result.current.fileUrls.size).toBe(2);
         },
         { timeout: 2000 }
       );
 
-      expect(result.current.fileCount).toBe(2);
-      expect(result.current.fileReferences.length).toBe(2);
-      expect(result.current.fileUrls.size).toBe(2);
       expect(result.current.fileUrls.get('file-123')).toBe('https://example.com/org-123/logos/logo.png');
       expect(result.current.fileUrls.get('file-456')).toBe('https://example.com/org-123/logos/logo2.png');
       expect(result.current.fileUrl).toBe(null); // No single file URL in multiple mode

package/src/hooks/index.ts

@@ -28,6 +28,8 @@ export { useEventTheme } from './useEventTheme';
 // === DATA & STATE HOOKS ===
 export { useDebounce } from './useDebounce';
 export { useDataTableState } from './useDataTableState';
+export { useAddressAutocomplete } from './useAddressAutocomplete';
+export type { UseAddressAutocompleteOptions, UseAddressAutocompleteReturn } from './useAddressAutocomplete';
 
 // === ORGANISATION HOOKS ===
 export { useOrganisationPermissions } from './useOrganisationPermissions';
@@ -48,6 +50,8 @@ export { useComponentPerformance } from './useComponentPerformance';
 export { useAppConfig } from './useAppConfig';
 export type { UseAppConfigReturn } from './useAppConfig';
 export { usePerformanceMonitor } from './usePerformanceMonitor';
+export { useQueryCache, queryCacheHelpers } from './useQueryCache';
+export type { UseQueryCacheReturn, UseQueryCacheOptions } from './useQueryCache';
 
 // DataTable performance hook
 export { useDataTablePerformance } from './useDataTablePerformance';
@@ -56,6 +60,8 @@ export type { UseDataTablePerformanceOptions, UseDataTablePerformanceReturn } fr
 // === FILE DISPLAY HOOKS ===
 export { useFileDisplay, clearFileDisplayCache, getFileDisplayCacheStats, invalidateFileDisplayCache } from './useFileDisplay';
 export type { UseFileDisplayReturn, UseFileDisplayOptions } from './useFileDisplay';
+export { useFileUrlCache } from './useFileUrlCache';
+export type { UseFileUrlCacheReturn } from './useFileUrlCache';
 
 // === STORAGE HOOKS ===
 export { useStorage, useFileUpload } from './useStorage';
@@ -64,6 +70,9 @@ export type { UseStorageOptions, UseStorageReturn } from './useStorage';
 // === PUBLIC DATA ACCESS HOOKS ===
 export * from './public';
 
+// === PAGE LIFECYCLE HOOKS ===
+export { usePreventTabReload } from './usePreventTabReload';
+export type { UsePreventTabReloadOptions } from './usePreventTabReload';
 
 // RBAC Hooks - Use @jmruthers/pace-core/rbac instead
 // Note: RBAC functionality has been moved to the dedicated RBAC module

package/src/hooks/public/usePublicFileDisplay.ts

@@ -40,7 +40,7 @@ import { useState, useEffect, useCallback } from 'react';
 import type { SupabaseClient } from '@supabase/supabase-js';
 import type { Database } from '../../types/database';
 import { FileReference, FileCategory } from '../../types/file-reference';
-import { getPublicUrl } from '../../utils/storage/helpers';
+import { getPublicUrl, generateFileUrlsBatch } from '../../utils/storage/helpers';
 import { logger } from '../../utils/core/logger';
 
 // Simple in-memory cache for public file data
@@ -236,7 +236,7 @@ export function usePublicFileDisplay(
           const ids = fileIds.map((item: any) => item.id);
           const { data: fullData, error: fetchError } = await supabase
             .from('file_references')
-            .select('*')
+            .select('id, table_name, record_id, file_path, file_metadata, organisation_id, app_id, is_public, created_at, updated_at')
             .in('id', ids)
             .eq('is_public', true); // Only public files in public context
 
@@ -295,14 +295,12 @@ export function usePublicFileDisplay(
         const url = getPublicUrl(supabase, firstFile.file_path, true);
         setFileUrl(url);
       } else {
-        // Multiple files mode - generate URLs for all files
-        const urlMap = new Map<string, string>();
-        for (const fileRef of fileRefs) {
-          const url = getPublicUrl(supabase, fileRef.file_path, true);
-          if (url) {
-            urlMap.set(fileRef.id, url);
-          }
-        }
+        // Multiple files mode - generate URLs for all files in batch
+        const urlMap = await generateFileUrlsBatch(supabase, fileRefs, {
+          appName: 'pace-core',
+          orgId: organisation_id,
+          expiresIn: 3600
+        });
         setFileUrls(urlMap);
         setFileReference(null);
         setFileUrl(null);