@jmruthers/pace-core 0.5.105 → 0.5.107

package/src/components/FileDisplay/FileDisplay.test.tsx

@@ -2,9 +2,16 @@ import React from 'react';
 import { renderWithProviders, screen, userEvent, act, waitFor } from '../../__tests__/helpers/test-utils';
 import { FileDisplay } from './FileDisplay';
 import { createMockSupabaseClient } from '../../__tests__/helpers/test-utils';
+import { UnifiedAuthProvider } from '../../providers/services/UnifiedAuthProvider';
 
 const supabase = createMockSupabaseClient() as any;
 
+// Mock useIsPublicPage to return false so FileDisplay uses authenticated version
+vi.mock('../PublicLayout/PublicPageProvider', () => ({
+  useIsPublicPage: vi.fn(() => false),
+  PublicPageContext: React.createContext(null)
+}));
+
 vi.mock('../../hooks/useFileReference', () => ({
   useFileReferenceForRecord: vi.fn(),
   useFileReference: vi.fn(() => ({
@@ -14,11 +21,32 @@ vi.mock('../../hooks/useFileReference', () => ({
   })),
 }));
 
+// Mock useFileDisplay hook which is used by FileDisplayAuthenticated
+vi.mock('../../hooks/useFileDisplay', () => ({
+  useFileDisplay: vi.fn()
+}));
+
 vi.mock('../../utils/storage/helpers', () => ({
   getPublicUrl: vi.fn((_, path: string) => `https://example.com/${path}`),
   getSignedUrl: vi.fn(async (_: any, path: string) => ({ url: `https://signed.example.com/${path}` })),
 }));
 
+// Helper to render with UnifiedAuthProvider
+const renderWithUnifiedAuth = (ui: React.ReactElement) => {
+  return renderWithProviders(
+    <UnifiedAuthProvider 
+      supabaseClient={supabase} 
+      appName="test-app"
+      idleTimeoutMs={30 * 60 * 1000}
+      warnBeforeMs={60 * 1000}
+      onIdleLogout={() => {}}
+      dangerouslyDisableInactivity={true}
+    >
+      {ui}
+    </UnifiedAuthProvider>
+  );
+};
+
 const baseProps = {
   supabase,
   table_name: 'person',
@@ -27,59 +55,62 @@ const baseProps = {
 };
 
 describe('[component] FileDisplay', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     vi.clearAllMocks();
+    // Set up default mock for useFileDisplay
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
+      isLoading: false,
+      error: null,
+      fileUrl: null,
+      fileReference: null,
+      fileReferences: [],
+      fileCount: 0,
+      fileUrls: new Map(),
+      refetch: vi.fn(),
+    });
   });
 
   it('renders error state and clears error on retry', async () => {
-    const clearError = vi.fn();
-    const useFileReferenceForRecord = (await import('../../hooks/useFileReference')).useFileReferenceForRecord as unknown as vi.Mock;
-    useFileReferenceForRecord.mockReturnValue({
+    const refetch = vi.fn();
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
       isLoading: false,
-      error: 'boom',
+      error: new Error('boom'),
       fileUrl: null,
       fileReference: null,
       fileReferences: [],
       fileCount: 0,
-      loadFileReference: vi.fn(),
-      loadFileUrl: vi.fn(),
-      loadFileReferences: vi.fn(),
-      loadFileCount: vi.fn(),
-      deleteFile: vi.fn(),
-      clearError,
+      fileUrls: new Map(),
+      refetch,
     });
 
-    renderWithProviders(<FileDisplay {...baseProps} />);
+    renderWithUnifiedAuth(<FileDisplay {...baseProps} />);
 
     expect(screen.getByText(/Error loading file: boom/i)).toBeInTheDocument();
     const retry = screen.getByRole('button', { name: /Try again/i });
     await userEvent.click(retry);
-    expect(clearError).toHaveBeenCalled();
+    expect(refetch).toHaveBeenCalled();
   });
 
   it('renders empty state when no files are found', async () => {
-    const useFileReferenceForRecord = (await import('../../hooks/useFileReference')).useFileReferenceForRecord as unknown as vi.Mock;
-    useFileReferenceForRecord.mockReturnValue({
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
       fileUrl: null,
       fileReference: null,
       fileReferences: [],
       fileCount: 0,
-      loadFileReference: vi.fn(),
-      loadFileUrl: vi.fn(),
-      loadFileReferences: vi.fn(),
-      loadFileCount: vi.fn(),
-      deleteFile: vi.fn(),
-      clearError: vi.fn(),
+      fileUrls: new Map(),
+      refetch: vi.fn(),
     });
 
-    renderWithProviders(<FileDisplay {...baseProps} />);
+    renderWithUnifiedAuth(<FileDisplay {...baseProps} />);
     expect(screen.getByText(/No files found/i)).toBeInTheDocument();
   });
 
   it('renders a single image with delete button and handles delete', async () => {
-    const deleteFile = vi.fn(async () => true);
     const categoryFile = {
       id: 'fr-1',
       table_name: 'person',
@@ -90,49 +121,36 @@ describe('[component] FileDisplay', () => {
       file_metadata: { fileName: 'file.png', fileSize: 2048, fileType: 'image/png' },
     };
 
-    // Mock getFilesByCategory for category mode
-    const useFileReference = (await import('../../hooks/useFileReference')).useFileReference as unknown as vi.Mock;
-    useFileReference.mockReturnValue({
-      getFilesByCategory: vi.fn(() => Promise.resolve([categoryFile])),
-      isLoading: false,
-      error: null,
-    });
+    const fileUrlsMap = new Map<string, string>();
+    fileUrlsMap.set('fr-1', 'https://example.com/file.png');
 
-    const useFileReferenceForRecord = (await import('../../hooks/useFileReference')).useFileReferenceForRecord as unknown as vi.Mock;
-    useFileReferenceForRecord.mockReturnValue({
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
-      fileUrl: null,
-      fileReference: null,
-      fileReferences: [],
-      fileCount: 0,
-      loadFileReference: vi.fn(),
-      loadFileUrl: vi.fn(),
-      loadFileReferences: vi.fn(),
-      loadFileCount: vi.fn(),
-      deleteFile,
-      clearError: vi.fn(),
-    });
-
-    // Mock getSignedUrl for the category file URL generation
-    const { getSignedUrl } = await import('../../utils/storage/helpers');
-    vi.spyOn(await import('../../utils/storage/helpers'), 'getSignedUrl').mockResolvedValue({ 
-      url: 'https://example.com/file.png' 
+      fileUrl: 'https://example.com/file.png',
+      fileReference: categoryFile,
+      fileReferences: [categoryFile],
+      fileCount: 1,
+      fileUrls: fileUrlsMap,
+      refetch: vi.fn(),
     });
 
     // Confirm dialog needs to be accepted for deletion
     const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
 
-    renderWithProviders(<FileDisplay {...baseProps} showDelete category={1 as any} />);
+    renderWithUnifiedAuth(<FileDisplay {...baseProps} showDelete category={1 as any} />);
 
     const image = await screen.findByRole('img', { name: /file\.png/i });
     expect(image).toBeInTheDocument();
 
     const deleteBtn = screen.getByRole('button', { name: /Delete file/i });
     await userEvent.click(deleteBtn);
-    expect(confirmSpy).toHaveBeenCalled();
-    // Note: deleteFile from useFileReferenceForRecord won't be called in category mode
-    // Category mode uses a different delete mechanism
+    
+    // Dialog should open
+    expect(await screen.findByText('Confirm Delete')).toBeInTheDocument();
+    const confirmDeleteBtn = screen.getByRole('button', { name: /^Delete$/i });
+    await userEvent.click(confirmDeleteBtn);
 
     confirmSpy.mockRestore();
   });
@@ -148,42 +166,24 @@ describe('[component] FileDisplay', () => {
       file_metadata: { fileName: 'report.pdf', fileSize: 4096, fileType: 'application/pdf' },
     };
 
-    // Mock getFilesByCategory for category mode
-    const useFileReference = (await import('../../hooks/useFileReference')).useFileReference as unknown as vi.Mock;
-    useFileReference.mockReturnValue({
-      getFilesByCategory: vi.fn(() => Promise.resolve([categoryFile])),
-      isLoading: false,
-      error: null,
-    });
-
-    const useFileReferenceForRecord = (await import('../../hooks/useFileReference')).useFileReferenceForRecord as unknown as vi.Mock;
-    useFileReferenceForRecord.mockReturnValue({
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
-      fileUrl: null,
-      fileReference: null,
-      fileReferences: [],
-      fileCount: 0,
-      loadFileReference: vi.fn(),
-      loadFileUrl: vi.fn(),
-      loadFileReferences: vi.fn(),
-      loadFileCount: vi.fn(),
-      deleteFile: vi.fn(),
-      clearError: vi.fn(),
-    });
-
-    // Mock getSignedUrl for the category file URL generation
-    const { getSignedUrl } = await import('../../utils/storage/helpers');
-    vi.spyOn(await import('../../utils/storage/helpers'), 'getSignedUrl').mockResolvedValue({ 
-      url: null // PDFs don't need URLs for display
+      fileUrl: null, // PDFs don't need URLs for display
+      fileReference: categoryFile,
+      fileReferences: [categoryFile],
+      fileCount: 1,
+      fileUrls: new Map(),
+      refetch: vi.fn(),
     });
 
-    renderWithProviders(<FileDisplay {...baseProps} category={1 as any} />);
+    renderWithUnifiedAuth(<FileDisplay {...baseProps} category={1 as any} />);
     expect(await screen.findByText('report.pdf')).toBeInTheDocument();
     expect(screen.getByText(/application\/pdf/i)).toBeInTheDocument();
   });
 
-  it.skip('renders multiple files and shows download link for non-image files', async () => {
+  it('renders multiple files and shows download link for non-image files', async () => {
     const fileRefs = [
       {
         id: 'f1',
@@ -205,60 +205,45 @@ describe('[component] FileDisplay', () => {
       },
     ];
 
-    const useFileReferenceForRecord = (await import('../../hooks/useFileReference')).useFileReferenceForRecord as unknown as vi.Mock;
-    useFileReferenceForRecord.mockReturnValue({
+    // Create a stable Map reference that won't trigger unnecessary resets
+    const fileUrlsMap = new Map<string, string>();
+    fileUrlsMap.set('f1', 'https://example.com/bucket/path/a.png');
+    fileUrlsMap.set('f2', 'https://signed.example.com/bucket/path/b.pdf');
+
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
       fileUrl: null,
       fileReference: null,
       fileReferences: fileRefs,
       fileCount: 2,
-      loadFileReference: vi.fn(),
-      loadFileUrl: vi.fn(),
-      loadFileReferences: vi.fn(),
-      loadFileCount: vi.fn(),
-      deleteFile: vi.fn(),
-      clearError: vi.fn(),
+      fileUrls: fileUrlsMap,
+      refetch: vi.fn(),
     });
 
-    // Verify mocks are set up
-    const storageHelpers = await import('../../utils/storage/helpers');
-    const getPublicUrlMock = vi.mocked(storageHelpers.getPublicUrl);
-    const getSignedUrlMock = vi.mocked(storageHelpers.getSignedUrl);
+    renderWithUnifiedAuth(<FileDisplay {...baseProps} />);
 
-    renderWithProviders(<FileDisplay {...baseProps} />);
-
-    // Wait for files to render (they should appear immediately)
+    // Wait for files to render - both file names should appear
     await waitFor(() => {
       expect(screen.getByText('a.png')).toBeInTheDocument();
       expect(screen.getByText('b.pdf')).toBeInTheDocument();
     });
 
-    // The image URL loads asynchronously in FileDisplayContent's useEffect (line 91-140)
-    // It calls getPublicUrl for public files (synchronously), then updates state asynchronously
-    // Wait for getPublicUrl to be called (it should be called immediately for the public file)
+    // The component syncs fileUrls in useEffect - wait for the sync to complete
+    // The download link appears when canDownload is true: !isImage && fileUrl (from internalFileUrls map)
     await waitFor(() => {
-      expect(getPublicUrlMock).toHaveBeenCalledWith(
-        expect.anything(),
-        'bucket/path/a.png',
-        true
-      );
-    }, { timeout: 2000 });
-
-    // Wait for the image to appear - React state update happens asynchronously
-    const image = await screen.findByRole('img', { name: /a\.png/i }, { timeout: 5000 });
-    expect(image).toBeInTheDocument();
-    // The top-level mock returns `https://example.com/${path}`, so for 'bucket/path/a.png':
-    expect(image).toHaveAttribute('src', 'https://example.com/bucket/path/a.png');
-
-    // Wait for getSignedUrl to be called for the private PDF file
-    await waitFor(() => {
-      expect(getSignedUrlMock).toHaveBeenCalled();
-    }, { timeout: 2000 });
+      const link = screen.queryByRole('link');
+      if (link) {
+        expect(link).toHaveAttribute('href', 'bucket/path/b.pdf');
+        expect(link).toHaveAttribute('download', 'b.pdf');
+        return true;
+      }
+      return false;
+    }, { timeout: 3000 });
 
-    // The PDF download link should appear once the signed URL loads
-    // Note: canDownload requires fileUrl to exist (line 285), and download link uses file_path (line 318)
-    const link = await screen.findByRole('link', { name: /↓/i }, { timeout: 5000 });
+    // Verify download link exists and has correct attributes
+    const link = screen.getByRole('link');
     expect(link).toBeInTheDocument();
     expect(link).toHaveAttribute('href', 'bucket/path/b.pdf');
     expect(link).toHaveAttribute('download', 'b.pdf');
@@ -275,27 +260,22 @@ describe('[component] FileDisplay', () => {
       file_metadata: { fileName: 'logo.png', fileSize: 1024, fileType: 'image/png' },
     };
     
-    const useFileReferenceForRecord = (await import('../../hooks/useFileReference')).useFileReferenceForRecord as unknown as vi.Mock;
-    useFileReferenceForRecord.mockReturnValue({
+    const fileUrlsMap = new Map<string, string>();
+    fileUrlsMap.set('fr-3', 'https://example.com/logo.png');
+
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
-      fileUrl: null, // displayOnly mode generates its own URL
-      fileReference: null, // displayOnly mode uses first from fileReferences
+      fileUrl: null,
+      fileReference: null,
       fileReferences: [logoFileRef],
       fileCount: 1,
-      loadFileReference: vi.fn(),
-      loadFileUrl: vi.fn(),
-      loadFileReferences: vi.fn(),
-      loadFileCount: vi.fn(),
-      deleteFile: vi.fn(),
-      clearError: vi.fn(),
+      fileUrls: fileUrlsMap,
+      refetch: vi.fn(),
     });
 
-    // Mock getPublicUrl for displayOnly URL generation
-    const { getPublicUrl } = await import('../../utils/storage/helpers');
-    vi.spyOn(await import('../../utils/storage/helpers'), 'getPublicUrl').mockReturnValue('https://example.com/logo.png');
-
-    renderWithProviders(<FileDisplay {...baseProps} displayOnly />);
+    renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
 
     // Wait for async URL generation in displayOnly mode
     const image = await screen.findByRole('img', { name: /logo\.png/i });
@@ -310,43 +290,32 @@ describe('[component] FileDisplay', () => {
   });
 
   it('renders with wrapper when displayOnly is true but showDelete is also true', async () => {
-    const deleteFile = vi.fn(async () => true);
-    const useFileReferenceForRecord = (await import('../../hooks/useFileReference')).useFileReferenceForRecord as unknown as vi.Mock;
-    useFileReferenceForRecord.mockReturnValue({
+    const logoFileRef = {
+      id: 'fr-4',
+      table_name: 'event',
+      record_id: 'event-1',
+      organisation_id: 'org-1',
+      file_path: 'bucket/path/logo.png',
+      is_public: true,
+      file_metadata: { fileName: 'logo.png', fileSize: 1024, fileType: 'image/png' },
+    };
+
+    const fileUrlsMap = new Map<string, string>();
+    fileUrlsMap.set('fr-4', 'https://example.com/logo.png');
+
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
       fileUrl: 'https://example.com/logo.png',
-      fileReference: {
-        id: 'fr-4',
-        table_name: 'event',
-        record_id: 'event-1',
-        organisation_id: 'org-1',
-        file_path: 'bucket/path/logo.png',
-        is_public: true,
-        file_metadata: { fileName: 'logo.png', fileSize: 1024, fileType: 'image/png' },
-      },
-      fileReferences: [
-        {
-          id: 'fr-4',
-          table_name: 'event',
-          record_id: 'event-1',
-          organisation_id: 'org-1',
-          file_path: 'bucket/path/logo.png',
-          is_public: true,
-          file_metadata: { fileName: 'logo.png', fileSize: 1024, fileType: 'image/png' },
-        },
-      ],
+      fileReference: logoFileRef,
+      fileReferences: [logoFileRef],
       fileCount: 1,
-      loadFileReference: vi.fn(),
-      loadFileUrl: vi.fn(),
-      loadFileReferences: vi.fn(),
-      loadFileCount: vi.fn(),
-      deleteFile,
-      clearError: vi.fn(),
+      fileUrls: fileUrlsMap,
+      refetch: vi.fn(),
     });
 
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
-    renderWithProviders(<FileDisplay {...baseProps} displayOnly showDelete />);
+    renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly showDelete />);
 
     const image = await screen.findByRole('img', { name: /logo\.png/i });
     expect(image).toBeInTheDocument();
@@ -357,55 +326,56 @@ describe('[component] FileDisplay', () => {
 
     const deleteBtn = screen.getByRole('button', { name: /Delete file/i });
     await userEvent.click(deleteBtn);
-    expect(deleteFile).toHaveBeenCalled();
-
-    confirmSpy.mockRestore();
+    
+    // Dialog should open
+    expect(await screen.findByText('Confirm Delete')).toBeInTheDocument();
+    const confirmDeleteBtn = screen.getByRole('button', { name: /^Delete$/i });
+    await userEvent.click(confirmDeleteBtn);
   });
 
   it('prefers image files when displayOnly is true and multiple files exist', async () => {
-    const useFileReferenceForRecord = (await import('../../hooks/useFileReference')).useFileReferenceForRecord as unknown as vi.Mock;
-    useFileReferenceForRecord.mockReturnValue({
+    const docFile = {
+      id: 'fr-doc',
+      table_name: 'person',
+      record_id: 'rec-1',
+      organisation_id: 'org-1',
+      file_path: 'bucket/path/doc.pdf',
+      is_public: false,
+      file_metadata: { fileName: 'doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
+    };
+    const imageFile = {
+      id: 'fr-img',
+      table_name: 'person',
+      record_id: 'rec-1',
+      organisation_id: 'org-1',
+      file_path: 'bucket/path/image.png',
+      is_public: true,
+      file_metadata: { fileName: 'image.png', fileSize: 1024, fileType: 'image/png' },
+    };
+
+    const fileUrlsMap = new Map<string, string>();
+    fileUrlsMap.set('fr-img', 'https://example.com/image.png');
+
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
       fileUrl: null,
       fileReference: null,
-      fileReferences: [
-        {
-          id: 'fr-doc',
-          table_name: 'person',
-          record_id: 'rec-1',
-          organisation_id: 'org-1',
-          file_path: 'bucket/path/doc.pdf',
-          is_public: false,
-          file_metadata: { fileName: 'doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
-        },
-        {
-          id: 'fr-img',
-          table_name: 'person',
-          record_id: 'rec-1',
-          organisation_id: 'org-1',
-          file_path: 'bucket/path/image.png',
-          is_public: true,
-          file_metadata: { fileName: 'image.png', fileSize: 1024, fileType: 'image/png' },
-        },
-      ],
+      fileReferences: [docFile, imageFile], // PDF first, but component should prefer image
       fileCount: 2,
-      loadFileReference: vi.fn(),
-      loadFileUrl: vi.fn(),
-      loadFileReferences: vi.fn(),
-      loadFileCount: vi.fn(),
-      deleteFile: vi.fn(),
-      clearError: vi.fn(),
+      fileUrls: fileUrlsMap,
+      refetch: vi.fn(),
     });
 
     // This test verifies that displayOnly logic prefers images
     // The component should select the image file over the PDF
-    renderWithProviders(<FileDisplay {...baseProps} displayOnly />);
+    renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
     
     // Wait for the component to process and select the image
     await waitFor(() => {
       // The component should eventually show the image file
-      expect(useFileReferenceForRecord).toHaveBeenCalled();
+      expect(screen.queryByRole('img', { name: /image\.png/i })).toBeInTheDocument();
     }, { timeout: 3000 });
   });
 });
@@ -431,8 +401,20 @@ const mockUseFileReference = vi.fn();
 const mockGetPublicUrl = vi.fn();
 const mockGetSignedUrl = vi.fn();
 
-beforeEach(() => {
+beforeEach(async () => {
   vi.clearAllMocks();
+  // Set up default mock for useFileDisplay
+  const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+  useFileDisplay.mockReturnValue({
+    isLoading: false,
+    error: null,
+    fileUrl: null,
+    fileReference: null,
+    fileReferences: [],
+    fileCount: 0,
+    fileUrls: new Map(),
+    refetch: vi.fn(),
+  });
   mockUseFileReferenceForRecord.mockReturnValue({
     isLoading: false,
     error: null,
@@ -472,9 +454,10 @@ const defaultProps = {
 };
 
 describe('FileDisplay Component (relocated)', () => {
-  it('renders with default props', () => {
-    renderWithProviders(<FileDisplay {...defaultProps} />);
-    expect(mockUseFileReferenceForRecord).toHaveBeenCalled();
+  it('renders with default props', async () => {
+    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    renderWithUnifiedAuth(<FileDisplay {...defaultProps} />);
+    expect(useFileDisplay).toHaveBeenCalled();
   });
 });
 

package/src/components/FileDisplay/FileDisplay.tsx

@@ -130,21 +130,20 @@ function FileDisplayContent({
   }, [fallbackSize, className]);
 
   // Sync fileUrls prop with internal state
-  useEffect(() => {
-    setInternalFileUrls(new Map(fileUrls));
-  }, [fileUrls]);
-
-  // Track file references to detect when they change
+  // Track file references to detect when they change and sync URLs
   useEffect(() => {
     const currentIds = fileReferences.map(f => f.id).join(',');
     const prevIds = fileReferencesRef.current.map(f => f.id).join(',');
     
     if (currentIds !== prevIds) {
       fileReferencesRef.current = fileReferences;
-      // Reset internal URLs when file references change
-      setInternalFileUrls(new Map());
+      // Reset internal URLs when file references change, then immediately sync from props
+      setInternalFileUrls(new Map(fileUrls));
+    } else {
+      // If file references haven't changed, just sync URLs
+      setInternalFileUrls(new Map(fileUrls));
     }
-  }, [fileReferences]);
+  }, [fileReferences, fileUrls]);
 
   const handleDeleteClick = () => {
     setDeleteDialogOpen(true);
@@ -201,6 +200,38 @@ function FileDisplayContent({
     return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
   };
 
+  // Check for errors first - errors should be shown even if fileCount is 0
+  if (error) {
+    if (ErrorComponent) {
+      return <ErrorComponent error={error} retry={clearError} />;
+    }
+    
+    // Show fallback if enabled
+    if (showFallback) {
+      return (
+        <div className={fallbackClasses} title="File unavailable">
+          {computedFallbackText}
+        </div>
+      );
+    }
+    
+    return (
+      <div className={`p-4 bg-acc-50 border border-acc-200 rounded-lg ${className}`}>
+        <div className="text-acc-600">
+          Error loading file: {error instanceof Error ? error.message : String(error)}
+        </div>
+        {clearError && (
+          <button
+            onClick={clearError}
+            className="mt-2 text-sm text-acc-700 hover:text-acc-800 underline"
+          >
+            Try again
+          </button>
+        )}
+      </div>
+    );
+  }
+
   // Show fallback immediately if enabled and we have no files (even during loading)
   // This provides better UX by showing fallback UI instead of a spinner when we know there are no files
   if (fileCount === 0 && !isLoading) {
@@ -243,37 +274,6 @@ function FileDisplayContent({
     );
   }
 
-  if (error) {
-    if (ErrorComponent) {
-      return <ErrorComponent error={error} retry={clearError} />;
-    }
-    
-    // Show fallback if enabled
-    if (showFallback) {
-      return (
-        <div className={fallbackClasses} title="File unavailable">
-          {computedFallbackText}
-        </div>
-      );
-    }
-    
-    return (
-      <div className={`p-4 bg-acc-50 border border-acc-200 rounded-lg ${className}`}>
-        <div className="text-acc-600">
-          Error loading file: {error instanceof Error ? error.message : String(error)}
-        </div>
-        {clearError && (
-          <button
-            onClick={clearError}
-            className="mt-2 text-sm text-acc-700 hover:text-acc-800 underline"
-          >
-            Try again
-          </button>
-        )}
-      </div>
-    );
-  }
-
   // Single file display (when category or displayOnly is specified)
   if ((category || displayOnly) && fileReference) {
     const isImage = fileReference.file_metadata.fileType?.startsWith('image/');
@@ -697,6 +697,7 @@ function FileDisplayAuthenticated({
       className={className}
       children={children}
       onDelete={showDelete ? handleDelete : undefined}
+      clearError={refetch}
       organisation_id={organisation_id}
       loadingComponent={loadingComponent}
       errorComponent={errorComponent}