@jmruthers/pace-core 0.5.93 → 0.5.94

package/src/components/FileDisplay/FileDisplay.tsx

@@ -1,54 +1,79 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useContext } from 'react';
 import { SupabaseClient } from '@supabase/supabase-js';
 import { FileReference, FileCategory } from '../../types/file-reference';
-import { useFileReferenceForRecord } from '../../hooks/useFileReference';
+import { useFileReferenceForRecord, useFileReference } from '../../hooks/useFileReference';
+import { usePublicFileDisplay } from '../../hooks/public/usePublicFileDisplay';
+import { useFileDisplay } from '../../hooks/useFileDisplay';
 import { getPublicUrl, getSignedUrl } from '../../utils/storage/helpers';
+import { PublicPageContext, useIsPublicPage } from '../PublicLayout/PublicPageProvider';
+import { useUnifiedAuth } from '../../providers/services/UnifiedAuthProvider';
 
 export interface FileDisplayProps {
-  supabase: SupabaseClient;
+  /** Supabase client instance. Optional when used in PublicPageProvider or UnifiedAuthProvider context */
+  supabase?: SupabaseClient;
   table_name: string;
   record_id: string;
   organisation_id: string;
   category?: FileCategory;
+  /** Display only a single file instead of all files. Uses first file (prefers images) from all files, without category filtering */
+  displayOnly?: boolean;
   showUpload?: boolean;
   showDelete?: boolean;
   className?: string;
   children?: React.ReactNode;
 }
 
-export function FileDisplay({
+// Shared rendering logic for file display
+interface FileDisplayContentProps {
+  isLoading: boolean;
+  error: string | Error | null;
+  fileUrl: string | null;
+  fileReference: FileReference | null;
+  fileReferences: FileReference[];
+  fileUrls: Map<string, string>;
+  fileCount: number;
+  category: FileCategory | undefined;
+  displayOnly: boolean;
+  showDelete: boolean;
+  className: string;
+  children?: React.ReactNode;
+  onDelete?: () => Promise<void>;
+  clearError?: () => void;
+  supabase?: SupabaseClient;
+  organisation_id: string;
+  loadingUrls?: Set<string>;
+}
+
+function FileDisplayContent({
+  isLoading,
+  error,
+  fileUrl,
+  fileReference,
+  fileReferences,
+  fileUrls,
+  fileCount,
+  category,
+  displayOnly,
+  showDelete,
+  className,
+  children,
+  onDelete,
+  clearError,
   supabase,
-  table_name,
-  record_id,
   organisation_id,
-  category,
-  showUpload = false,
-  showDelete = false,
-  className = '',
-  children
-}: FileDisplayProps) {
-  const {
-    isLoading,
-    error,
-    fileUrl,
-    fileReference,
-    fileReferences,
-    fileCount,
-    loadFileReference,
-    loadFileUrl,
-    loadFileReferences,
-    loadFileCount,
-    deleteFile,
-    clearError
-  } = useFileReferenceForRecord(supabase, table_name, record_id, organisation_id);
-
+  loadingUrls = new Set()
+}: FileDisplayContentProps) {
   const [imageError, setImageError] = useState(false);
-  const [fileUrls, setFileUrls] = useState<Map<string, string>>(new Map());
-  const [loadingUrls, setLoadingUrls] = useState<Set<string>>(new Set());
+  const [internalFileUrls, setInternalFileUrls] = useState<Map<string, string>>(new Map(fileUrls));
   const loadedFilesRef = useRef<Set<string>>(new Set());
-  const loadingUrlsRef = useRef<Set<string>>(new Set());
+  const loadingUrlsRef = useRef<Set<string>>(new Set(loadingUrls));
   const fileReferencesRef = useRef<FileReference[]>([]);
 
+  // Sync fileUrls prop with internal state
+  useEffect(() => {
+    setInternalFileUrls(new Map(fileUrls));
+  }, [fileUrls]);
+
   // Track file references to detect when they change
   useEffect(() => {
     const currentIds = fileReferences.map(f => f.id).join(',');
@@ -58,31 +83,13 @@ export function FileDisplay({
       fileReferencesRef.current = fileReferences;
       // Reset loaded files ref when file references change
       loadedFilesRef.current.clear();
-      setFileUrls(new Map());
-      setLoadingUrls(new Set());
+      setInternalFileUrls(new Map());
     }
   }, [fileReferences]);
 
-  // Load file data on mount
-  useEffect(() => {
-    loadFileCount();
-    if (category) {
-      loadFileReference();
-    } else {
-      loadFileReferences();
-    }
-  }, [loadFileCount, loadFileReference, loadFileReferences, category]);
-
-  // Load file URL when file reference is available
+  // Fetch URLs for all file references (for multiple files view when not using context hooks)
   useEffect(() => {
-    if (fileReference) {
-      loadFileUrl();
-    }
-  }, [fileReference, loadFileUrl]);
-
-  // Fetch URLs for all file references (for multiple files view)
-  useEffect(() => {
-    if (category || fileReferences.length === 0) return;
+    if (!supabase || category || fileReferences.length === 0) return;
 
     const loadFileUrls = async () => {
       // Find files that need URLs loaded
@@ -93,14 +100,7 @@ export function FileDisplay({
       if (urlsToLoad.length === 0) return;
 
       // Mark files as loading (update both state and ref)
-      setLoadingUrls(prev => {
-        const updated = new Set(prev);
-        urlsToLoad.forEach(fileRef => {
-          updated.add(fileRef.id);
-          loadingUrlsRef.current.add(fileRef.id);
-        });
-        return updated;
-      });
+      loadingUrlsRef.current = new Set([...loadingUrlsRef.current, ...urlsToLoad.map(f => f.id)]);
 
       // Load URLs for files that need them
       for (const fileRef of urlsToLoad) {
@@ -121,7 +121,7 @@ export function FileDisplay({
           }
 
           if (url) {
-            setFileUrls(prev => {
+            setInternalFileUrls(prev => {
               const updated = new Map(prev);
               updated.set(fileRef.id, url!);
               return updated;
@@ -131,12 +131,7 @@ export function FileDisplay({
         } catch (error) {
           console.error(`Failed to load URL for file ${fileRef.id}:`, error);
         } finally {
-          setLoadingUrls(prev => {
-            const updated = new Set(prev);
-            updated.delete(fileRef.id);
-            loadingUrlsRef.current.delete(fileRef.id);
-            return updated;
-          });
+          loadingUrlsRef.current.delete(fileRef.id);
         }
       }
     };
@@ -146,10 +141,10 @@ export function FileDisplay({
 
   const handleDelete = async () => {
     if (window.confirm('Are you sure you want to delete this file?')) {
-      const success = await deleteFile(true);
-      if (success) {
-        setImageError(false);
+      if (onDelete) {
+        await onDelete();
       }
+      setImageError(false);
     }
   };
 
@@ -188,14 +183,16 @@ export function FileDisplay({
     return (
       <div className={`p-4 bg-acc-50 border border-acc-200 rounded-lg ${className}`}>
         <div className="text-acc-600">
-          Error loading file: {error}
+          Error loading file: {error instanceof Error ? error.message : String(error)}
         </div>
-        <button
-          onClick={clearError}
-          className="mt-2 text-sm text-acc-700 hover:text-acc-800 underline"
-        >
-          Try again
-        </button>
+        {clearError && (
+          <button
+            onClick={clearError}
+            className="mt-2 text-sm text-acc-700 hover:text-acc-800 underline"
+          >
+            Try again
+          </button>
+        )}
       </div>
     );
   }
@@ -209,10 +206,23 @@ export function FileDisplay({
     );
   }
 
-  // Single file display (when category is specified)
-  if (category && fileReference) {
+  // Single file display (when category or displayOnly is specified)
+  if ((category || displayOnly) && fileReference) {
     const isImage = fileReference.file_metadata.fileType?.startsWith('image/');
     
+    // Simplified image-only display when displayOnly is true and it's an image
+    if (displayOnly && isImage && fileUrl && !imageError && !showDelete) {
+      return (
+        <img
+          src={fileUrl}
+          alt={fileReference.file_metadata.fileName || 'File'}
+          className={className || "max-w-full h-auto"}
+          onError={handleImageError}
+        />
+      );
+    }
+    
+    // Standard single file display with wrapper
     return (
       <div className={`space-y-2 ${className}`}>
         {isImage && fileUrl && !imageError ? (
@@ -220,7 +230,7 @@ export function FileDisplay({
             <img
               src={fileUrl}
               alt={fileReference.file_metadata.fileName || 'File'}
-              className="max-w-full h-auto rounded-lg border border-sec-200"
+              className="max-w-full h-auto"
               onError={handleImageError}
             />
             {showDelete && (
@@ -270,8 +280,8 @@ export function FileDisplay({
     <div className={`space-y-2 ${className}`}>
       {fileReferences.map((fileRef) => {
         const isImage = fileRef.file_metadata.fileType?.startsWith('image/');
-        const fileUrl = fileUrls.get(fileRef.id) || null;
-        const isLoadingUrl = loadingUrls.has(fileRef.id);
+        const fileUrl = internalFileUrls.get(fileRef.id) || null;
+        const isLoadingUrl = loadingUrlsRef.current.has(fileRef.id);
         const canDownload = !isImage && fileUrl;
         
         return (
@@ -313,9 +323,14 @@ export function FileDisplay({
                   ↓
                 </a>
               )}
-            {showDelete && (
+            {showDelete && onDelete && (
               <button
-                onClick={() => deleteFile(true)}
+                onClick={() => {
+                  // For multiple files, we'd need file-specific delete
+                  // For now, call onDelete which may handle the first file
+                  // TODO: Implement file-specific delete functionality
+                  onDelete();
+                }}
                 className="text-acc-500 hover:text-acc-700 p-1"
                 title="Delete file"
               >
@@ -331,4 +346,511 @@ export function FileDisplay({
   );
 }
 
+/**
+ * Internal component for backwards compatibility (when supabase is explicitly provided)
+ */
+function FileDisplayBackwardsCompat({
+  supabase,
+  table_name,
+  record_id,
+  organisation_id,
+  category,
+  displayOnly = false,
+  showUpload = false,
+  showDelete = false,
+  className = '',
+  children
+}: Required<Pick<FileDisplayProps, 'supabase'>> & Omit<FileDisplayProps, 'supabase'>) {
+  const {
+    isLoading: isLoadingForRecord,
+    error: errorForRecord,
+    fileUrl,
+    fileReference,
+    fileReferences,
+    fileCount,
+    loadFileReference,
+    loadFileUrl,
+    loadFileReferences,
+    loadFileCount,
+    deleteFile,
+    clearError
+  } = useFileReferenceForRecord(supabase, table_name, record_id, organisation_id);
+
+  // Use useFileReference to get getFilesByCategory when category is provided
+  const {
+    getFilesByCategory,
+    isLoading: isLoadingCategory,
+    error: errorCategory
+  } = useFileReference(supabase);
+
+  const [categoryFileReference, setCategoryFileReference] = useState<FileReference | null>(null);
+  const [categoryFileUrl, setCategoryFileUrl] = useState<string | null>(null);
+  const [categoryFileReferences, setCategoryFileReferences] = useState<FileReference[]>([]);
+  const [displayOnlyFileReference, setDisplayOnlyFileReference] = useState<FileReference | null>(null);
+  const [displayOnlyFileUrl, setDisplayOnlyFileUrl] = useState<string | null>(null);
+
+  // Load files by category when category is provided
+  useEffect(() => {
+    if (category) {
+      const loadCategoryFiles = async () => {
+        try {
+          const files = await getFilesByCategory(table_name, record_id, category, organisation_id);
+          setCategoryFileReferences(files);
+          
+          if (files.length > 0) {
+            const firstFile = files[0];
+            setCategoryFileReference(firstFile);
+            
+            // Generate URL for the file
+            let url: string | null = null;
+            if (firstFile.is_public) {
+              url = getPublicUrl(supabase, firstFile.file_path, true);
+            } else {
+              const signedUrlResult = await getSignedUrl(supabase, firstFile.file_path, {
+                appName: 'file-reference',
+                orgId: organisation_id,
+                expiresIn: 3600
+              });
+              url = signedUrlResult?.url || null;
+            }
+            setCategoryFileUrl(url);
+          } else {
+            setCategoryFileReference(null);
+            setCategoryFileUrl(null);
+          }
+        } catch (err) {
+          console.error('[FileDisplayBackwardsCompat] Error loading files by category:', err);
+        }
+      };
+      
+      loadCategoryFiles();
+    } else {
+      // Clear category files when no category
+      setCategoryFileReference(null);
+      setCategoryFileUrl(null);
+      setCategoryFileReferences([]);
+    }
+  }, [category, table_name, record_id, organisation_id, supabase, getFilesByCategory]);
+
+  // Load file data on mount (when no category)
+  useEffect(() => {
+    if (!category) {
+      loadFileCount();
+      loadFileReferences();
+    }
+  }, [loadFileCount, loadFileReferences, category]);
+
+  // Load file URL when file reference is available (when no category)
+  useEffect(() => {
+    if (!category && fileReference) {
+      loadFileUrl();
+    }
+  }, [category, fileReference, loadFileUrl]);
+
+  // Handle displayOnly mode: select first file (prefer images) from all files
+  useEffect(() => {
+    if (displayOnly && !category && fileReferences.length > 0) {
+      const loadDisplayOnlyFile = async () => {
+        try {
+          // Prefer image files
+          const imageFiles = fileReferences.filter(f => 
+            f.file_metadata.fileType?.startsWith('image/')
+          );
+          const targetFile = imageFiles.length > 0 ? imageFiles[0] : fileReferences[0];
+          
+          setDisplayOnlyFileReference(targetFile);
+          
+          // Generate URL for the file
+          let url: string | null = null;
+          if (targetFile.is_public) {
+            url = getPublicUrl(supabase, targetFile.file_path, true);
+          } else {
+            const signedUrlResult = await getSignedUrl(supabase, targetFile.file_path, {
+              appName: 'file-reference',
+              orgId: organisation_id,
+              expiresIn: 3600
+            });
+            url = signedUrlResult?.url || null;
+          }
+          setDisplayOnlyFileUrl(url);
+        } catch (err) {
+          console.error('[FileDisplayBackwardsCompat] Error loading displayOnly file:', err);
+        }
+      };
+      
+      loadDisplayOnlyFile();
+    } else if (!displayOnly || category) {
+      // Clear displayOnly files when not in displayOnly mode or when category is specified
+      setDisplayOnlyFileReference(null);
+      setDisplayOnlyFileUrl(null);
+    }
+  }, [displayOnly, category, fileReferences, supabase, organisation_id]);
+
+  const handleDelete = async () => {
+    if (window.confirm('Are you sure you want to delete this file?')) {
+      await deleteFile(true);
+    }
+  };
+
+  // Determine final file reference and URL based on mode
+  // Priority: category > displayOnly > default (all files)
+  let finalFileReference: FileReference | null = null;
+  let finalFileUrl: string | null = null;
+  let finalFileReferences: FileReference[] = [];
+  let finalFileCount = 0;
+  let finalIsLoading = false;
+  let finalError: string | Error | null = null;
+
+  if (category) {
+    // Category mode: use category-filtered files
+    finalFileReference = categoryFileReference;
+    finalFileUrl = categoryFileUrl;
+    finalFileReferences = categoryFileReferences;
+    finalFileCount = categoryFileReferences.length;
+    finalIsLoading = isLoadingCategory;
+    finalError = errorCategory;
+  } else if (displayOnly) {
+    // DisplayOnly mode: use first file from all files (prefers images)
+    finalFileReference = displayOnlyFileReference;
+    finalFileUrl = displayOnlyFileUrl;
+    finalFileReferences = displayOnlyFileReference ? [displayOnlyFileReference] : [];
+    finalFileCount = displayOnlyFileReference ? 1 : 0;
+    finalIsLoading = isLoadingForRecord;
+    finalError = errorForRecord;
+  } else {
+    // Default mode: show all files
+    finalFileReference = fileReference;
+    finalFileUrl = fileUrl;
+    finalFileReferences = fileReferences;
+    finalFileCount = fileCount;
+    finalIsLoading = isLoadingForRecord;
+    finalError = errorForRecord;
+  }
+
+  return (
+    <FileDisplayContent
+      isLoading={finalIsLoading}
+      error={finalError}
+      fileUrl={finalFileUrl}
+      fileReference={finalFileReference}
+      fileReferences={finalFileReferences}
+      fileUrls={new Map()} // Will be populated by FileDisplayContent's useEffect
+      fileCount={finalFileCount}
+      category={category}
+      displayOnly={displayOnly}
+      showDelete={showDelete}
+      className={className}
+      children={children}
+      onDelete={handleDelete}
+      clearError={clearError}
+      supabase={supabase}
+      organisation_id={organisation_id}
+      loadingUrls={new Set()}
+    />
+  );
+}
+
+/**
+ * Internal component for public page context
+ * Uses PublicPageContext to get Supabase client
+ */
+function FileDisplayPublic({
+  table_name,
+  record_id,
+  organisation_id,
+  category,
+  displayOnly = false,
+  showUpload = false,
+  showDelete = false,
+  className = '',
+  children
+}: Omit<FileDisplayProps, 'supabase'>) {
+  const publicPageContext = useContext(PublicPageContext);
+  const supabase = publicPageContext?.supabase ?? null;
+
+  if (!supabase) {
+    return (
+      <div className={`text-sec-500 text-center p-4 ${className}`}>
+        Supabase client not available in public context
+      </div>
+    );
+  }
+
+  const {
+    fileUrl,
+    fileReference,
+    fileReferences,
+    fileUrls,
+    fileCount,
+    isLoading,
+    error,
+    refetch
+  } = usePublicFileDisplay(
+    table_name,
+    record_id,
+    organisation_id,
+    category,
+    { supabase }
+  );
 
+  // Note: Public context doesn't support delete operations
+  const handleDelete = async () => {
+    console.warn('[FileDisplay] Delete operation not supported in public context');
+  };
+
+  // Handle displayOnly mode: select first file (prefer images) from all files
+  let finalFileReference = fileReference;
+  let finalFileUrl = fileUrl;
+  let finalFileReferences = fileReferences;
+  let finalFileCount = fileCount;
+
+  if (displayOnly && !category && fileReferences.length > 0) {
+    // Prefer image files
+    const imageFiles = fileReferences.filter(f => 
+      f.file_metadata.fileType?.startsWith('image/')
+    );
+    const targetFile = imageFiles.length > 0 ? imageFiles[0] : fileReferences[0];
+    finalFileReference = targetFile;
+    finalFileReferences = [targetFile];
+    finalFileCount = 1;
+    
+    // Get URL for target file from fileUrls map
+    finalFileUrl = fileUrls.get(targetFile.id) || null;
+  }
+
+  return (
+    <FileDisplayContent
+      isLoading={isLoading}
+      error={error}
+      fileUrl={finalFileUrl}
+      fileReference={finalFileReference}
+      fileReferences={finalFileReferences}
+      fileUrls={fileUrls}
+      fileCount={finalFileCount}
+      category={category}
+      displayOnly={displayOnly}
+      showDelete={false} // Never show delete in public context
+      className={className}
+      children={children}
+      onDelete={showDelete ? handleDelete : undefined}
+      supabase={supabase}
+      organisation_id={organisation_id}
+    />
+  );
+}
+
+/**
+ * Internal component for authenticated page context
+ * Uses UnifiedAuthProvider to get Supabase client
+ */
+function FileDisplayAuthenticated({
+  table_name,
+  record_id,
+  organisation_id,
+  category,
+  displayOnly = false,
+  showUpload = false,
+  showDelete = false,
+  className = '',
+  children
+}: Omit<FileDisplayProps, 'supabase'>) {
+  const { supabase } = useUnifiedAuth();
+
+  if (!supabase) {
+    return (
+      <div className={`text-sec-500 text-center p-4 ${className}`}>
+        Supabase client not available in authenticated context
+      </div>
+    );
+  }
+
+  const {
+    fileUrl,
+    fileReference,
+    fileReferences,
+    fileUrls,
+    fileCount,
+    isLoading,
+    error,
+    refetch
+  } = useFileDisplay(
+    table_name,
+    record_id,
+    organisation_id,
+    category,
+    { supabase }
+  );
+
+  // State for displayOnly mode URL generation
+  const [displayOnlyFileReference, setDisplayOnlyFileReference] = useState<FileReference | null>(null);
+  const [displayOnlyFileUrl, setDisplayOnlyFileUrl] = useState<string | null>(null);
+
+  // Handle displayOnly mode: select first file (prefer images) from all files and generate URL on-demand
+  useEffect(() => {
+    if (displayOnly && !category && fileReferences.length > 0) {
+      const loadDisplayOnlyFile = async () => {
+        try {
+          // Prefer image files
+          const imageFiles = fileReferences.filter(f => 
+            f.file_metadata.fileType?.startsWith('image/')
+          );
+          const targetFile = imageFiles.length > 0 ? imageFiles[0] : fileReferences[0];
+          
+          setDisplayOnlyFileReference(targetFile);
+          
+          // Check if URL exists in fileUrls Map first
+          const existingUrl = fileUrls.get(targetFile.id);
+          if (existingUrl) {
+            setDisplayOnlyFileUrl(existingUrl);
+            return;
+          }
+          
+          // Generate URL for the file if not in Map
+          let url: string | null = null;
+          if (targetFile.is_public) {
+            url = getPublicUrl(supabase, targetFile.file_path, true);
+          } else {
+            const signedUrlResult = await getSignedUrl(supabase, targetFile.file_path, {
+              appName: 'file-reference',
+              orgId: organisation_id,
+              expiresIn: 3600
+            });
+            url = signedUrlResult?.url || null;
+          }
+          setDisplayOnlyFileUrl(url);
+        } catch (err) {
+          console.error('[FileDisplayAuthenticated] Error loading displayOnly file:', err);
+        }
+      };
+      
+      loadDisplayOnlyFile();
+    } else if (!displayOnly || category) {
+      // Clear displayOnly files when not in displayOnly mode or when category is specified
+      setDisplayOnlyFileReference(null);
+      setDisplayOnlyFileUrl(null);
+    }
+  }, [displayOnly, category, fileReferences, fileUrls, supabase, organisation_id]);
+
+  // Note: Delete would need to be implemented via FileReferenceService
+  // For now, we'll show a warning
+  const handleDelete = async () => {
+    console.warn('[FileDisplay] Delete operation needs to be implemented via FileReferenceService');
+  };
+
+  // Determine final file reference and URL based on mode
+  let finalFileReference = fileReference;
+  let finalFileUrl = fileUrl;
+  let finalFileReferences = fileReferences;
+  let finalFileCount = fileCount;
+
+  if (displayOnly && !category) {
+    // DisplayOnly mode: use state-managed file reference and URL
+    finalFileReference = displayOnlyFileReference;
+    finalFileUrl = displayOnlyFileUrl;
+    finalFileReferences = displayOnlyFileReference ? [displayOnlyFileReference] : [];
+    finalFileCount = displayOnlyFileReference ? 1 : 0;
+  }
+
+  return (
+    <FileDisplayContent
+      isLoading={isLoading}
+      error={error}
+      fileUrl={finalFileUrl}
+      fileReference={finalFileReference}
+      fileReferences={finalFileReferences}
+      fileUrls={fileUrls}
+      fileCount={finalFileCount}
+      category={category}
+      displayOnly={displayOnly}
+      showDelete={showDelete}
+      className={className}
+      children={children}
+      onDelete={showDelete ? handleDelete : undefined}
+      supabase={supabase}
+      organisation_id={organisation_id}
+    />
+  );
+}
+
+/**
+ * Component for displaying file references with context-awareness
+ * 
+ * This component is context-aware and automatically detects whether it's being used
+ * in a public or authenticated context. It fetches and displays files from storage.
+ * 
+ * When `supabase` prop is provided, it uses the explicit client (backwards compatible).
+ * When `supabase` prop is not provided, it automatically detects context and uses:
+ * - PublicPageProvider context for public pages
+ * - UnifiedAuthProvider context for authenticated pages
+ * 
+ * @param props - File display configuration
+ * @param props.displayOnly - Display only a single file instead of all files. Uses first file (prefers images) from all files, without category filtering. When true with an image, renders a simplified image-only display without metadata or wrapper divs.
+ * @param props.category - Optional category filter. When specified, only displays files matching this category and uses single file display variant.
+ * @returns React element with file display
+ */
+export function FileDisplay({
+  supabase,
+  table_name,
+  record_id,
+  organisation_id,
+  category,
+  displayOnly = false,
+  showUpload = false,
+  showDelete = false,
+  className = '',
+  children
+}: FileDisplayProps) {
+  // If supabase is explicitly provided, use backwards compatible mode
+  if (supabase) {
+    return (
+      <FileDisplayBackwardsCompat
+        supabase={supabase}
+        table_name={table_name}
+        record_id={record_id}
+        organisation_id={organisation_id}
+        category={category}
+        displayOnly={displayOnly}
+        showUpload={showUpload}
+        showDelete={showDelete}
+        className={className}
+        children={children}
+      />
+    );
+  }
+
+  // Check which context we're in and route to the appropriate component
+  const isPublicPage = useIsPublicPage();
+  
+  // If we're in a public page context, use the public component
+  if (isPublicPage) {
+    return (
+      <FileDisplayPublic
+        table_name={table_name}
+        record_id={record_id}
+        organisation_id={organisation_id}
+        category={category}
+        displayOnly={displayOnly}
+        showUpload={showUpload}
+        showDelete={showDelete}
+        className={className}
+        children={children}
+      />
+    );
+  }
+  
+  // Otherwise, try to use the authenticated component
+  // It will show an error if not in UnifiedAuthProvider
+  return (
+    <FileDisplayAuthenticated
+      table_name={table_name}
+      record_id={record_id}
+      organisation_id={organisation_id}
+      category={category}
+      displayOnly={displayOnly}
+      showUpload={showUpload}
+      showDelete={showDelete}
+      className={className}
+      children={children}
+    />
+  );
+}