@jmruthers/pace-core 0.5.87 → 0.5.89

package/src/components/{FileDisplay.tsx → FileDisplay/FileDisplay.tsx}

@@ -1,10 +1,8 @@
-// File Display Component
-// Provides a file display interface using the file reference system
-
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { SupabaseClient } from '@supabase/supabase-js';
-import { FileReference, FileCategory } from '../types/file-reference';
-import { useFileReferenceForRecord } from '../hooks/useFileReference';
+import { FileReference, FileCategory } from '../../types/file-reference';
+import { useFileReferenceForRecord } from '../../hooks/useFileReference';
+import { getPublicUrl, getSignedUrl } from '../../utils/storage/helpers';
 
 export interface FileDisplayProps {
   supabase: SupabaseClient;
@@ -45,6 +43,25 @@ export function FileDisplay({
   } = useFileReferenceForRecord(supabase, table_name, record_id, organisation_id);
 
   const [imageError, setImageError] = useState(false);
+  const [fileUrls, setFileUrls] = useState<Map<string, string>>(new Map());
+  const [loadingUrls, setLoadingUrls] = useState<Set<string>>(new Set());
+  const loadedFilesRef = useRef<Set<string>>(new Set());
+  const loadingUrlsRef = useRef<Set<string>>(new Set());
+  const fileReferencesRef = useRef<FileReference[]>([]);
+
+  // Track file references to detect when they change
+  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 loaded files ref when file references change
+      loadedFilesRef.current.clear();
+      setFileUrls(new Map());
+      setLoadingUrls(new Set());
+    }
+  }, [fileReferences]);
 
   // Load file data on mount
   useEffect(() => {
@@ -63,6 +80,70 @@ export function FileDisplay({
     }
   }, [fileReference, loadFileUrl]);
 
+  // Fetch URLs for all file references (for multiple files view)
+  useEffect(() => {
+    if (category || fileReferences.length === 0) return;
+
+    const loadFileUrls = async () => {
+      // Find files that need URLs loaded
+      const urlsToLoad = fileReferences.filter(fileRef => {
+        return !loadedFilesRef.current.has(fileRef.id) && !loadingUrlsRef.current.has(fileRef.id);
+      });
+
+      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;
+      });
+
+      // Load URLs for files that need them
+      for (const fileRef of urlsToLoad) {
+        try {
+          let url: string | null = null;
+
+          if (fileRef.is_public) {
+            // Public files: generate public URL
+            url = getPublicUrl(supabase, fileRef.file_path, true);
+          } else {
+            // Private files: generate signed URL
+            const signedUrlResult = await getSignedUrl(supabase, fileRef.file_path, {
+              appName: 'file-reference',
+              orgId: organisation_id,
+              expiresIn: 3600
+            });
+            url = signedUrlResult?.url || null;
+          }
+
+          if (url) {
+            setFileUrls(prev => {
+              const updated = new Map(prev);
+              updated.set(fileRef.id, url!);
+              return updated;
+            });
+            loadedFilesRef.current.add(fileRef.id);
+          }
+        } 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;
+          });
+        }
+      }
+    };
+
+    loadFileUrls();
+  }, [category, fileReferences.map(f => f.id).join(','), supabase, organisation_id]);
+
   const handleDelete = async () => {
     if (window.confirm('Are you sure you want to delete this file?')) {
       const success = await deleteFile(true);
@@ -147,6 +228,7 @@ export function FileDisplay({
                 onClick={handleDelete}
                 className="absolute top-2 right-2 bg-acc-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm hover:bg-acc-600"
                 title="Delete file"
+                aria-label="Delete file"
               >
                 ×
               </button>
@@ -171,6 +253,7 @@ export function FileDisplay({
                 onClick={handleDelete}
                 className="text-acc-500 hover:text-acc-700 p-1"
                 title="Delete file"
+                aria-label="Delete file"
               >
                 ×
               </button>
@@ -187,13 +270,17 @@ export function FileDisplay({
     <div className={`space-y-2 ${className}`}>
       {fileReferences.map((fileRef) => {
         const isImage = fileRef.file_metadata.fileType?.startsWith('image/');
-        const fileUrl = fileRef.is_public 
-          ? `https://your-supabase-url.supabase.co/storage/v1/object/public/files/${fileRef.file_path}`
-          : null; // Would need to get signed URL for private files
+        const fileUrl = fileUrls.get(fileRef.id) || null;
+        const isLoadingUrl = loadingUrls.has(fileRef.id);
+        const canDownload = !isImage && fileUrl;
         
         return (
           <div key={fileRef.id} className="flex items-center space-x-3 p-3 bg-sec-50 rounded-lg border border-sec-200">
-            {isImage && fileUrl ? (
+            {isLoadingUrl ? (
+              <div className="w-12 h-12 flex items-center justify-center">
+                <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-main-500"></div>
+              </div>
+            ) : isImage && fileUrl ? (
               <img
                 src={fileUrl}
                 alt={fileRef.file_metadata.fileName || 'File'}
@@ -215,6 +302,17 @@ export function FileDisplay({
                 {fileRef.file_metadata.category && ` • ${fileRef.file_metadata.category}`}
               </div>
             </div>
+            <div className="flex items-center space-x-2">
+              {canDownload && (
+                <a
+                  href={fileRef.file_path}
+                  download={fileRef.file_metadata.fileName || 'download'}
+                  className="text-main-500 hover:text-main-700 p-1"
+                  title="Download file"
+                >
+                  ↓
+                </a>
+              )}
             {showDelete && (
               <button
                 onClick={() => deleteFile(true)}
@@ -224,6 +322,7 @@ export function FileDisplay({
                 ×
               </button>
             )}
+            </div>
           </div>
         );
       })}
@@ -231,3 +330,5 @@ export function FileDisplay({
     </div>
   );
 }
+
+

package/src/components/FileDisplay/index.tsx

@@ -0,0 +1,4 @@
+export * from './FileDisplay';
+export { FileDisplay as default } from './FileDisplay';
+
+