background fetch

2026-07-29 19:24:13 +02:00
parent 3d63dc1987
commit 00084758bf
9 changed files with 474 additions and 302 deletions
@@ -118,10 +118,6 @@ export function HomeScreen() {
  const { pendingCount, isSyncing } = useSyncQueue();
  useAutoSync();

-  const handleUploadComplete = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ['resources'] });
-  }, [queryClient]);
-
  const itemSize = (SCREEN_WIDTH - PADDING_H * 2 - (numColumns - 1) * ITEM_GAP) / numColumns;

  const loadMore = useCallback(() => {
@@ -659,7 +655,6 @@ export function HomeScreen() {
      <UploadModal
        visible={uploadModalVisible}
        onClose={() => setUploadModalVisible(false)}
-        onUploadComplete={handleUploadComplete}
      />

      <SettingsModal
@@ -5,23 +5,63 @@ import {
  StyleSheet,
  TouchableOpacity,
  Dimensions,
+  ActivityIndicator,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { MaterialIcons } from '@expo/vector-icons';
 import { ONBOARDING_STEPS, CURRENT_ONBOARDING_VERSION, type OnboardingStep } from '../config/onboarding';
 import { onboardingStorage } from '../services/onboardingStorage';
+import { scanSubdirectories } from '../hooks/useDeviceFiles';
+import { safDirectory } from '../services/safDirectory';
+import * as FileSystem from 'expo-file-system/legacy';

 const { width: SCREEN_WIDTH } = Dimensions.get('window');

-const ICON_MAP: Record<string, keyof typeof MaterialIcons.glyphMap> = {
-  'waving-hand': 'waving-hand',
-  'folder-off': 'folder-off',
-  'create-new-folder': 'create-new-folder',
-};
+type ScanState = 'idle' | 'scanning' | 'done';
+
+function stepIcon(step: OnboardingStep): keyof typeof MaterialIcons.glyphMap {
+  if (step.icon === 'waving-hand') return 'waving-hand';
+  if (step.icon === 'create-new-folder') return 'create-new-folder';
+  if (step.icon === 'check-circle') return 'check-circle';
+  if (step.icon === 'folder-off') return 'folder-off';
+  return 'info';
+}
+
+function ScanProgressView() {
+  return (
+    <>
+      <View style={styles.iconContainer}>
+        <ActivityIndicator size={48} color="#1976D2" />
+      </View>
+      <Text style={styles.title}>Scan en cours...</Text>
+      <Text style={styles.description}>
+        Dot. explore les sous-dossiers de votre stockage. Cela peut prendre quelques secondes.
+      </Text>
+    </>
+  );
+}
+
+function ScanDoneView({ folderCount }: { folderCount: number }) {
+  return (
+    <>
+      <View style={[styles.iconContainer, { backgroundColor: '#E8F5E9' }]}>
+        <MaterialIcons name="check-circle" size={64} color="#43A047" />
+      </View>
+      <Text style={styles.title}>Scan terminé !</Text>
+      <Text style={styles.description}>
+        {folderCount > 1
+          ? `${folderCount} dossiers découverts et ajoutés à votre espace Dot.`
+          : '1 dossier ajouté à votre espace Dot.'}
+      </Text>
+    </>
+  );
+}

 export function OnboardingScreen() {
  const navigation = useNavigation();
  const [currentIndex, setCurrentIndex] = useState(0);
+  const [scanState, setScanState] = useState<ScanState>('idle');
+  const [folderCount, setFolderCount] = useState(0);
  const pendingSteps = onboardingStorage.getPendingSteps();

  const step = pendingSteps[currentIndex];
@@ -31,19 +71,33 @@ export function OnboardingScreen() {
    navigation.reset({ index: 0, routes: [{ name: 'Home' as never }] });
  }, [navigation]);

-  const handlePickDirectory = useCallback(async () => {
-    const { safDirectory } = await import('../services/safDirectory');
-    const FileSystem = await import('expo-file-system/legacy');
-
+  const handleRecursiveScan = useCallback(async () => {
    try {
      const result = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();
      if (!result.granted) return;
+
      const dirUri = result.directoryUri;
      const parts = dirUri.split('/');
-      const dirName = decodeURIComponent(parts[parts.length - 1] ?? 'Dossier');
+      const dirName = decodeURIComponent(parts[parts.length - 1] ?? 'Stockage');
+
+      setScanState('scanning');
+
      safDirectory.addFolder(dirUri, dirName);
+
+      const subdirs = await scanSubdirectories(dirUri);
+      if (subdirs.length > 0) {
+        safDirectory.addBatchFolders(
+          subdirs.map((d) => ({ uri: d.uri, name: d.name, source: 'recursive', parentUri: d.parentUri }))
+        );
+      }
+
+      setFolderCount(1 + subdirs.length);
+      setScanState('done');
+
+      safDirectory.setDiscovered();
    } catch (err) {
-      console.error('[Onboarding] pickDirectory error:', err);
+      console.error('[Onboarding] recursive scan error:', err);
+      setScanState('idle');
    }
  }, []);

@@ -53,6 +107,8 @@ export function OnboardingScreen() {

    if (currentIndex < pendingSteps.length - 1) {
      setCurrentIndex(currentIndex + 1);
+      setScanState('idle');
+      setFolderCount(0);
    } else {
      complete();
    }
@@ -67,6 +123,8 @@ export function OnboardingScreen() {
    return null;
  }

+  const isScanStep = step.action?.type === 'recursive_scan';
+
  return (
    <View style={styles.container}>
      <View style={styles.skipContainer}>
@@ -76,22 +134,25 @@ export function OnboardingScreen() {
      </View>

      <View style={styles.content}>
-        <View style={styles.iconContainer}>
-          <MaterialIcons
-            name={ICON_MAP[step.icon] ?? 'info'}
-            size={64}
-            color="#1976D2"
-          />
-        </View>
+        {scanState === 'scanning' && isScanStep ? (
+          <ScanProgressView />
+        ) : scanState === 'done' && isScanStep ? (
+          <ScanDoneView folderCount={folderCount} />
+        ) : (
+          <>
+            <View style={styles.iconContainer}>
+              <MaterialIcons name={stepIcon(step)} size={64} color="#1976D2" />
+            </View>
+            <Text style={styles.title}>{step.title}</Text>
+            <Text style={styles.description}>{step.description}</Text>

-        <Text style={styles.title}>{step.title}</Text>
-        <Text style={styles.description}>{step.description}</Text>
-
-        {step.action?.type === 'pick_directory' && (
-          <TouchableOpacity style={styles.actionBtn} onPress={handlePickDirectory}>
-            <MaterialIcons name="folder-open" size={20} color="#fff" />
-            <Text style={styles.actionBtnText}>{step.action.label}</Text>
-          </TouchableOpacity>
+            {isScanStep && scanState === 'idle' && (
+              <TouchableOpacity style={styles.actionBtn} onPress={handleRecursiveScan}>
+                <MaterialIcons name="folder-open" size={20} color="#fff" />
+                <Text style={styles.actionBtnText}>{step.action?.label ?? 'Choisir un dossier'}</Text>
+              </TouchableOpacity>
+            )}
+          </>
        )}
      </View>

@@ -105,12 +166,21 @@ export function OnboardingScreen() {
          ))}
        </View>

-        <TouchableOpacity style={styles.nextBtn} onPress={handleNext}>
-          <Text style={styles.nextBtnText}>
-            {currentIndex < pendingSteps.length - 1 ? 'Suivant' : 'Commencer'}
-          </Text>
-          <MaterialIcons name="arrow-forward" size={20} color="#fff" />
-        </TouchableOpacity>
+        {(!isScanStep || scanState === 'done') && (
+          <TouchableOpacity style={styles.nextBtn} onPress={handleNext}>
+            <Text style={styles.nextBtnText}>
+              {currentIndex < pendingSteps.length - 1 ? 'Suivant' : 'Commencer'}
+            </Text>
+            <MaterialIcons name="arrow-forward" size={20} color="#fff" />
+          </TouchableOpacity>
+        )}
+
+        {isScanStep && scanState === 'idle' && (
+          <TouchableOpacity style={styles.nextBtn} onPress={handleNext}>
+            <Text style={styles.nextBtnText}>Passer cette étape</Text>
+            <MaterialIcons name="arrow-forward" size={20} color="#fff" />
+          </TouchableOpacity>
+        )}
      </View>
    </View>
  );
@@ -6,6 +6,7 @@ import {
  FlatList,
  TouchableOpacity,
  ActivityIndicator,
+  Alert,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MaterialIcons } from '@expo/vector-icons';
@@ -14,6 +15,8 @@ import { safDirectory } from '../services/safDirectory';
 import { useSyncQueue } from '../hooks/useSyncQueue';
 import { useAutoSync } from '../hooks/useAutoSync';
 import { useSyncPush } from '../hooks/useSyncPush';
+import { useUploadQueue } from '../hooks/useUploadQueue';
+import { UploadTask } from '../services/uploadQueue';

 function formatSize(bytes: number): string {
  if (bytes === 0) return '';
@@ -22,11 +25,25 @@ function formatSize(bytes: number): string {
  return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`;
 }

+function uploadStatusIcon(task: UploadTask) {
+  switch (task.status) {
+    case 'pending':
+      return <MaterialIcons name="schedule" size={20} color="#FFA000" />;
+    case 'uploading':
+      return <ActivityIndicator size="small" color="#1976D2" />;
+    case 'done':
+      return <MaterialIcons name="check-circle" size={20} color="#4CAF50" />;
+    case 'error':
+      return <MaterialIcons name="error" size={20} color="#E53935" />;
+  }
+}
+
 export function SyncDetailScreen() {
  const insets = useSafeAreaInsets();
  const { pendingCount, isSyncing, refresh } = useSyncQueue();
  const { triggerSync } = useAutoSync();
  const { push } = useSyncPush();
+  const { tasks: uploadTasks, retry, retryAll } = useUploadQueue();

  const pendingFiles = useMemo(() => {
    return fileStore.getPendingSync();
@@ -34,74 +51,134 @@ export function SyncDetailScreen() {

  const handleSyncAll = useCallback(async () => {
    await triggerSync();
-
    try {
      const { getStoredDeviceServerId } = await import('../hooks/useDeviceRegistration');
      const serverId = await getStoredDeviceServerId();
      if (serverId) {
        await push(serverId);
      }
-    } catch {
-      // push notification is best-effort
-    }
-
+    } catch { }
    refresh();
  }, [triggerSync, push, refresh]);

-  const renderItem = useCallback(({ item }: { item: FileRecord }) => (
-    <View style={styles.fileRow}>
-      <MaterialIcons name="insert-drive-file" size={20} color="#999" />
-      <View style={styles.fileInfo}>
-        <Text style={styles.fileName} numberOfLines={1}>{item.name}</Text>
-        <Text style={styles.fileMeta}>
-          {formatSize(item.size)}
-          {item.mimeType ? ` · ${item.mimeType.split('/').pop()}` : ''}
-        </Text>
-      </View>
-      <View style={styles.localBadge}>
-        <MaterialIcons name="phone-android" size={14} color="#757575" />
-      </View>
-    </View>
-  ), []);
+  const handleTaskPress = useCallback((task: UploadTask) => {
+    if (task.status !== 'error') return;
+    Alert.alert(
+      'Erreur d\'upload',
+      task.error || 'Erreur inconnue',
+      [
+        { text: 'Annuler', style: 'cancel' },
+        { text: 'Réessayer', onPress: () => retry(task.id) },
+      ],
+    );
+  }, [retry]);
+
+  const hasUploads = uploadTasks.length > 0;
+  const hasPending = pendingFiles.length > 0;
+  const hasContent = hasUploads || hasPending;
+
+  const uploadErrors = uploadTasks.filter((t) => t.status === 'error');

  return (
    <View style={styles.container}>
-      {pendingCount > 0 && (
+      {(hasPending || uploadErrors.length > 0) && (
        <TouchableOpacity
          style={[styles.syncBtn, isSyncing && styles.syncBtnDisabled]}
-          onPress={handleSyncAll}
+          onPress={uploadErrors.length > 0 && hasPending ? retryAll : handleSyncAll}
          disabled={isSyncing}
        >
          {isSyncing ? (
            <ActivityIndicator size="small" color="#fff" />
          ) : (
-            <MaterialIcons name="cloud-upload" size={20} color="#fff" />
+            <MaterialIcons
+              name={uploadErrors.length > 0 ? "refresh" : "cloud-upload"}
+              size={20}
+              color="#fff"
+            />
          )}
          <Text style={styles.syncBtnText}>
-            {isSyncing ? 'Synchronisation...' : `Synchroniser (${pendingCount})`}
+            {isSyncing ? 'Synchronisation...'
+              : uploadErrors.length > 0 && hasPending
+                ? 'Tout réessayer'
+                : hasPending
+                  ? `Synchroniser (${pendingCount})`
+                  : `Réessayer (${uploadErrors.length})`}
          </Text>
        </TouchableOpacity>
      )}

-      {pendingFiles.length === 0 ? (
+      {!hasContent ? (
        <View style={styles.empty}>
          <MaterialIcons name="cloud-done" size={48} color="#4CAF50" />
          <Text style={styles.emptyTitle}>Tout est synchronisé</Text>
          <Text style={styles.emptySubtitle}>
-            Aucun fichier en attente d'upload
+            Aucun fichier en attente
          </Text>
        </View>
      ) : (
        <FlatList
-          data={pendingFiles}
-          keyExtractor={(item) => item.id}
-          renderItem={renderItem}
-          contentContainerStyle={styles.list}
-          ListHeaderComponent={
-            <Text style={styles.headerText}>
-              {pendingFiles.length} fichier{pendingFiles.length > 1 ? 's' : ''} en attente
-            </Text>
+          data={[
+            ...(hasUploads ? [{ type: 'section', label: 'Uploads en cours' } as const] : []),
+            ...uploadTasks.map((t) => ({ type: 'upload' as const, data: t })),
+            ...(hasPending ? [{ type: 'section', label: 'Fichiers locaux à synchroniser' } as const] : []),
+            ...pendingFiles.map((f) => ({ type: 'file' as const, data: f })),
+          ]}
+          keyExtractor={(item) =>
+            item.type === 'section' ? item.label
+              : item.type === 'upload' ? item.data.id
+                : item.data.id
          }
+          renderItem={({ item }) => {
+            if (item.type === 'section') {
+              return <Text style={styles.headerText}>{item.label}</Text>;
+            }
+            if (item.type === 'upload') {
+              const task = item.data;
+              return (
+                <TouchableOpacity
+                  style={[styles.fileRow, task.status === 'error' && styles.fileRowError]}
+                  onPress={() => handleTaskPress(task)}
+                  activeOpacity={task.status === 'error' ? 0.6 : 1}
+                >
+                  {uploadStatusIcon(task)}
+                  <View style={styles.fileInfo}>
+                    <Text style={styles.fileName} numberOfLines={1}>{task.file.name}</Text>
+                    {task.status === 'uploading' && (
+                      <View style={styles.progressBar}>
+                        <View style={[styles.progressFill, { width: `${task.progress}%` }]} />
+                      </View>
+                    )}
+                    {task.status === 'error' && task.error && (
+                      <Text style={styles.errorText} numberOfLines={1}>{task.error}</Text>
+                    )}
+                    {task.status === 'done' && (
+                      <Text style={styles.doneText}>Upload terminé</Text>
+                    )}
+                    {task.status === 'pending' && (
+                      <Text style={styles.pendingText}>En attente</Text>
+                    )}
+                  </View>
+                </TouchableOpacity>
+              );
+            }
+            const file = item.data;
+            return (
+              <View style={styles.fileRow}>
+                <MaterialIcons name="insert-drive-file" size={20} color="#999" />
+                <View style={styles.fileInfo}>
+                  <Text style={styles.fileName} numberOfLines={1}>{file.name}</Text>
+                  <Text style={styles.fileMeta}>
+                    {formatSize(file.size)}
+                    {file.mimeType ? ` · ${file.mimeType.split('/').pop()}` : ''}
+                  </Text>
+                </View>
+                <View style={styles.localBadge}>
+                  <MaterialIcons name="phone-android" size={14} color="#757575" />
+                </View>
+              </View>
+            );
+          }}
+          contentContainerStyle={styles.list}
        />
      )}
    </View>
@@ -170,6 +247,36 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    alignItems: 'center',
  },
+  fileRowError: {
+    backgroundColor: '#FFF0F0',
+  },
+  progressBar: {
+    height: 4,
+    backgroundColor: '#E0E0E0',
+    borderRadius: 2,
+    marginTop: 6,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#1976D2',
+    borderRadius: 2,
+  },
+  errorText: {
+    fontSize: 12,
+    color: '#E53935',
+    marginTop: 2,
+  },
+  doneText: {
+    fontSize: 12,
+    color: '#4CAF50',
+    marginTop: 2,
+  },
+  pendingText: {
+    fontSize: 12,
+    color: '#FFA000',
+    marginTop: 2,
+  },
  empty: {
    flex: 1,
    justifyContent: 'center',