background fetch
This commit is contained in:
m
+141
-34
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user