background fetch

mobile/components/UploadModal.tsx

@@ -1,132 +1,18 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react';
+import React from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, Modal, Alert } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
-import { useUpload, UploadFile } from '../hooks/useUpload';
-import { usePollOcr, SseOcrListener } from '../hooks/usePollOcr';
-import { UploadProgress } from './UploadProgress';
-import { UploadError } from '../types';
-import { apiClient } from '../api/client';
-import { ENDPOINTS } from '../constants/api';
+import { UploadFile } from '../services/uploadQueue';
+import { useUploadQueue } from '../hooks/useUploadQueue';
 
 interface UploadModalProps {
   visible: boolean;
   onClose: () => void;
-  onUploadComplete?: () => void;
 }
 
-function getUploadErrorMessage(err: UploadError): string {
-  switch (err.status) {
-    case 400:
-      return `${err.fileName} : format invalide (${err.message})`;
-    case 404:
-      return `${err.fileName} : endpoint introuvable`;
-    case 413:
-      return `${err.fileName} : fichier trop volumineux`;
-    case 500:
-      return `${err.fileName} : erreur serveur (${err.message})`;
-    case 0:
-      return `${err.fileName} : impossible de contacter le serveur`;
-    default:
-      return `${err.fileName} : erreur ${err.status} (${err.message})`;
-  }
-}
-
-export function UploadModal({ visible, onClose, onUploadComplete }: UploadModalProps) {
-  const [status, setStatus] = useState<'idle' | 'uploading' | 'processing' | 'success' | 'error'>('idle');
-  const [error, setError] = useState<string>();
-  const [uploadedCount, setUploadedCount] = useState(0);
-  const [totalCount, setTotalCount] = useState(0);
-  const upload = useUpload();
-  const { pollOcr } = usePollOcr();
-
-  const canClose = status === 'idle' || status === 'success' || status === 'error';
-
-  const checkDupBeforeUpload = useCallback(async (files: UploadFile[]): Promise<UploadFile[]> => {
-    const toUpload: UploadFile[] = [];
-    for (const file of files) {
-      try {
-        const result = await apiClient.post<{ data: { duplicates: Array<{ id: string; name: string }>; count: number } }>(
-          ENDPOINTS.DEDUP_CHECK,
-          { name: file.name, size: 0 },
-        );
-        const duplicates = result.data?.duplicates ?? [];
-        if (duplicates.length > 0) {
-          const names = duplicates.map((d: { name: string }) => d.name).join(', ');
-          let proceed = false;
-          await new Promise<void>((resolve) => {
-            Alert.alert(
-              'Fichier existant',
-              `"${file.name}" existe déjà sur le serveur (${names}).\nUploader quand même ?`,
-              [
-                { text: 'Ignorer', style: 'cancel', onPress: () => resolve() },
-                { text: 'Uploader', onPress: () => { proceed = true; resolve(); } },
-              ],
-            );
-          });
-          if (proceed) toUpload.push(file);
-        } else {
-          toUpload.push(file);
-        }
-      } catch {
-        toUpload.push(file);
-      }
-    }
-    return toUpload;
-  }, []);
-
-  const doUpload = async (files: UploadFile[]) => {
-    setStatus('uploading');
-    setUploadedCount(0);
-    setTotalCount(files.length);
-    setError(undefined);
-
-    try {
-      const deduped = await checkDupBeforeUpload(files);
-      if (deduped.length === 0) {
-        setStatus('success');
-        setUploadedCount(files.length);
-        return;
-      }
-
-      setTotalCount(deduped.length);
-      const response = await upload.mutateAsync(deduped);
-      setUploadedCount(response.uploaded.length);
-
-      if (response.uploaded.length > 0) {
-        setStatus('processing');
-        const results = await Promise.allSettled(
-          response.uploaded.map((f) => pollOcr(f.id)),
-        );
-        const completed = results.filter(
-          (r) => r.status === 'fulfilled' && r.value.status === 'completed',
-        ).length;
-        if (completed > 0) {
-          setStatus('success');
-        }
-      }
-
-      if (response.errors.length > 0) {
-        setStatus('error');
-        const messages = response.errors.map((e) => getUploadErrorMessage(e));
-        setError(
-          `${response.uploaded.length}/${totalCount} uploadés.\n${messages.join('\n')}`
-        );
-      } else {
-        setStatus('success');
-      }
-    } catch (err) {
-      setStatus('error');
-      if (err instanceof UploadError) {
-        setError(getUploadErrorMessage(err));
-      } else if (err instanceof Error) {
-        setError(err.message);
-      } else {
-        setError("Erreur inconnue lors de l'upload");
-      }
-    }
-  };
+export function UploadModal({ visible, onClose }: UploadModalProps) {
+  const { enqueue } = useUploadQueue();
 
   const pickImages = async () => {
     try {
@@ -150,8 +36,9 @@ export function UploadModal({ visible, onClose, onUploadComplete }: UploadModalP
         name: asset.fileName || 'photo.jpg',
       }));
 
-      await doUpload(files);
-    } catch (err) {
+      enqueue(files);
+      onClose();
+    } catch {
       Alert.alert('Erreur', "Impossible d'accéder à la galerie");
     }
   };
@@ -171,73 +58,38 @@ export function UploadModal({ visible, onClose, onUploadComplete }: UploadModalP
         name: asset.name,
       }));
 
-      await doUpload(files);
-    } catch (err) {
+      enqueue(files);
+      onClose();
+    } catch {
       Alert.alert('Erreur', "Impossible de sélectionner des documents");
     }
   };
 
-  const handleClose = useCallback(() => {
-    if (!canClose) return;
-    setStatus('idle');
-    setError(undefined);
-    setUploadedCount(0);
-    setTotalCount(0);
-    if (status === 'success') {
-      onUploadComplete?.();
-    }
-    onClose();
-  }, [canClose, status, onClose, onUploadComplete]);
-
-  useEffect(() => {
-    if (status === 'success') {
-      const timer = setTimeout(() => {
-        setStatus('idle');
-        setError(undefined);
-        setUploadedCount(0);
-        setTotalCount(0);
-        onUploadComplete?.();
-        onClose();
-      }, 2000);
-      return () => clearTimeout(timer);
-    }
-  }, [status, onClose, onUploadComplete]);
-
   return (
     <Modal
       visible={visible}
       transparent
       animationType="fade"
-      onRequestClose={handleClose}
+      onRequestClose={onClose}
     >
       <TouchableOpacity
         style={styles.overlay}
         activeOpacity={1}
-        onPress={canClose ? handleClose : undefined}
+        onPress={onClose}
       >
         <TouchableOpacity activeOpacity={1} style={styles.container} onPress={() => {}}>
           <View style={styles.handle} />
 
           <View style={styles.header}>
             <Text style={styles.title}>Ajouter des fichiers</Text>
-            {canClose && (
-              <TouchableOpacity onPress={handleClose} style={styles.closeBtn}>
-                <MaterialIcons name="close" size={22} color="#999" />
-              </TouchableOpacity>
-            )}
+            <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
+              <MaterialIcons name="close" size={22} color="#999" />
+            </TouchableOpacity>
           </View>
 
-          <UploadProgress
-            status={status}
-            error={error}
-            uploadedCount={uploadedCount}
-            totalCount={totalCount}
-          />
-
           <TouchableOpacity
             style={styles.photoButton}
             onPress={pickImages}
-            disabled={status === 'uploading' || status === 'processing'}
           >
             <MaterialIcons name="photo-library" size={20} color="#fff" />
             <Text style={styles.buttonText}>Sélectionner des photos</Text>
@@ -246,7 +98,6 @@ export function UploadModal({ visible, onClose, onUploadComplete }: UploadModalP
           <TouchableOpacity
             style={styles.docButton}
             onPress={pickDocuments}
-            disabled={status === 'uploading' || status === 'processing'}
           >
             <MaterialIcons name="description" size={20} color="#fff" />
             <Text style={styles.buttonText}>Sélectionner des documents</Text>