Update hooks/useFileUpload.ts

hooks/useFileUpload.ts

@@ -1,15 +1,21 @@
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useRef } from 'react';
 import { FileItem, UploadStatus } from '../types';
 import { uploadBatchToHub } from '../services/hfService';
 
 export const useFileUpload = () => {
   const [files, setFiles] = useState<FileItem[]>([]);
   const [isUploading, setIsUploading] = useState(false);
+  
+  // Use Ref to access latest state inside async loops without dependencies issues
+  const filesRef = useRef<FileItem[]>([]);
+  filesRef.current = files;
 
-  // --- CONFIGURATION ---
-  const BATCH_SIZE = 5; // Files per request
-  const CONCURRENCY_LIMIT = 3; // Parallel requests
+  // --- CONFIGURATION FOR SPEED ---
+  // Tăng số lượng file mỗi lần gửi để giảm thời gian tạo commit trên HF
+  const BATCH_SIZE = 10; 
+  // Số lượng request gửi song song (Browser thường giới hạn 6 domain connections)
+  const CONCURRENCY_LIMIT = 5; 
 
   // --- UPLOAD LOGIC ---
 
@@ -26,73 +32,96 @@ export const useFileUpload = () => {
   }, []);
 
   const startUpload = useCallback(async () => {
-    const filesToUpload = files.filter(
+    // Filter pending files
+    const pendingFiles = filesRef.current.filter(
       (f) => f.status === UploadStatus.IDLE || f.status === UploadStatus.ERROR
     );
 
-    if (filesToUpload.length === 0) return;
+    if (pendingFiles.length === 0) return;
 
     setIsUploading(true);
 
-    // 1. Create Batches (Chunks)
-    const batches = [];
-    for (let i = 0; i < filesToUpload.length; i += BATCH_SIZE) {
-      batches.push(filesToUpload.slice(i, i + BATCH_SIZE));
+    // 1. Chunk files into Batches
+    const batches: FileItem[][] = [];
+    for (let i = 0; i < pendingFiles.length; i += BATCH_SIZE) {
+      batches.push(pendingFiles.slice(i, i + BATCH_SIZE));
     }
 
-    // 2. Process Batch Function
-    const processBatch = async (batch: FileItem[]) => {
-      // Set status UPLOADING for this batch
-      setFiles((prev) =>
-        prev.map((f) =>
-          batch.find((b) => b.id === f.id) 
-            ? { ...f, status: UploadStatus.UPLOADING, error: undefined } 
-            : f
-        )
+    // A queue of batches to process
+    const queue = [...batches];
+    let activeWorkers = 0;
+
+    // Helper to update status safely
+    const updateBatchStatus = (batchItems: FileItem[], status: UploadStatus, result?: { urls?: string[], error?: string }) => {
+      setFiles((prev) => 
+        prev.map((f) => {
+           const batchIndex = batchItems.findIndex(b => b.id === f.id);
+           if (batchIndex !== -1) {
+             return {
+               ...f,
+               status: status,
+               url: status === UploadStatus.SUCCESS ? result?.urls?.[batchIndex] : f.url,
+               error: status === UploadStatus.ERROR ? result?.error : undefined
+             };
+           }
+           return f;
+        })
       );
+    };
+
+    // 2. The Worker Function
+    // Process one batch, then immediately grab the next one from the queue
+    const processNextBatch = async (): Promise<void> => {
+      if (queue.length === 0) return;
+
+      const batch = queue.shift();
+      if (!batch) return;
+
+      activeWorkers++;
+      
+      // Update UI -> UPLOADING
+      updateBatchStatus(batch, UploadStatus.UPLOADING);
 
       try {
-        // Prepare payload for service
-        const batchPayload = batch.map(item => ({
+        const payload = batch.map(item => ({
             id: item.id,
             file: item.file,
             path: item.path
         }));
 
-        // Call API
-        const urls = await uploadBatchToHub(batchPayload);
-
-        // Success: Update status and add URLs
-        setFiles((prev) =>
-          prev.map((f) => {
-            const index = batch.findIndex(b => b.id === f.id);
-            if (index !== -1) {
-                return { ...f, status: UploadStatus.SUCCESS, url: urls[index] };
-            }
-            return f;
-          })
-        );
+        const urls = await uploadBatchToHub(payload);
+        
+        // Update UI -> SUCCESS
+        updateBatchStatus(batch, UploadStatus.SUCCESS, { urls });
+
       } catch (err: any) {
-        // Error: Update status for whole batch
-        setFiles((prev) =>
-          prev.map((f) =>
-            batch.find((b) => b.id === f.id) 
-                ? { ...f, status: UploadStatus.ERROR, error: err.message } 
-                : f
-          )
-        );
+        console.error("Batch failed:", err);
+        // Update UI -> ERROR
+        updateBatchStatus(batch, UploadStatus.ERROR, { error: err.message || "Upload failed" });
+      } finally {
+        activeWorkers--;
+        // Recursively process next batch if available
+        if (queue.length > 0) {
+            await processNextBatch();
+        }
       }
     };
 
-    // 3. Execute with Concurrency Limit
-    // We process batches in groups of CONCURRENCY_LIMIT
-    for (let i = 0; i < batches.length; i += CONCURRENCY_LIMIT) {
-        const activeBatches = batches.slice(i, i + CONCURRENCY_LIMIT);
-        await Promise.allSettled(activeBatches.map(batch => processBatch(batch)));
+    // 3. Start Initial Workers (Pool)
+    // Create exactly CONCURRENCY_LIMIT workers that will keep eating from the queue
+    const initialWorkers = [];
+    const limit = Math.min(CONCURRENCY_LIMIT, batches.length);
+    
+    for (let i = 0; i < limit; i++) {
+        initialWorkers.push(processNextBatch());
     }
 
+    // Wait for all workers to finish depleting the queue
+    await Promise.all(initialWorkers);
+    
     setIsUploading(false);
-  }, [files]);
+
+  }, []); // Remove 'files' dependency to avoid closure staleness, use ref
 
   return {
     files,