302 lines
7.9 KiB
TypeScript
302 lines
7.9 KiB
TypeScript
import React, { useState, useMemo } from 'react';
|
|
import { View, FlatList, StyleSheet, TouchableOpacity, Text, Dimensions, Image, ActivityIndicator, TextInput } from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
|
import { MaterialIcons } from '@expo/vector-icons';
|
|
import { useFiles, useFileImage } from '../hooks/useFiles';
|
|
import { FileItem } from '../types';
|
|
|
|
const NUM_COLUMNS = 3;
|
|
const SCREEN_WIDTH = Dimensions.get('window').width;
|
|
const ITEM_SIZE = (SCREEN_WIDTH - 16 * 2 - (NUM_COLUMNS - 1) * 6) / NUM_COLUMNS;
|
|
|
|
type RootStackParamList = {
|
|
Home: undefined;
|
|
Upload: undefined;
|
|
Scan: undefined;
|
|
};
|
|
|
|
type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
|
|
|
|
type GroupedFiles = Record<string, FileItem[]>;
|
|
|
|
function parseBackendDate(dateStr: string): Date | null {
|
|
if (!dateStr) return null;
|
|
const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})\s+(\d{2}):(\d{2}):(\d{2})/);
|
|
if (!match) return new Date(dateStr);
|
|
return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]), Number(match[4]), Number(match[5]), Number(match[6]));
|
|
}
|
|
|
|
function groupByDate(files: FileItem[]): GroupedFiles {
|
|
const groups: GroupedFiles = {};
|
|
for (const file of files) {
|
|
const d = parseBackendDate(file.createdAt);
|
|
if (!d) continue;
|
|
const key = d.toLocaleDateString('fr-FR', {
|
|
weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
|
|
});
|
|
if (!groups[key]) groups[key] = [];
|
|
groups[key].push(file);
|
|
}
|
|
return groups;
|
|
}
|
|
|
|
function formatDateLabel(key: string): string {
|
|
const d = new Date();
|
|
const today = d.toLocaleDateString('fr-FR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
|
d.setDate(d.getDate() - 1);
|
|
const yesterday = d.toLocaleDateString('fr-FR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
|
|
if (key === today) return "Aujourd'hui";
|
|
if (key === yesterday) return 'Hier';
|
|
return key.charAt(0).toUpperCase() + key.slice(1);
|
|
}
|
|
|
|
function FileGridItem({ file }: { file: FileItem }) {
|
|
const { data, isLoading } = useFileImage(file.id);
|
|
|
|
const uri = data?.data?.url;
|
|
|
|
return (
|
|
<View style={styles.gridItem}>
|
|
{isLoading ? (
|
|
<View style={styles.placeholder}>
|
|
<ActivityIndicator size="small" color="#1976D2" />
|
|
</View>
|
|
) : uri ? (
|
|
<Image source={{ uri }} style={styles.thumb} />
|
|
) : (
|
|
<View style={styles.placeholder}>
|
|
<Text style={styles.placeholderText}>PDF</Text>
|
|
</View>
|
|
)}
|
|
<Text style={styles.fileName} numberOfLines={1}>{file.name}</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function matchesQuery(file: FileItem, query: string): boolean {
|
|
if (!query) return true;
|
|
const q = query.toLowerCase();
|
|
if (file.name.toLowerCase().includes(q)) return true;
|
|
if (file.ocrText?.toLowerCase().includes(q)) return true;
|
|
if (file.tags?.some((t) => {
|
|
const tagName = typeof t === 'string' ? t : t.name;
|
|
return tagName?.toLowerCase().includes(q);
|
|
})) return true;
|
|
return false;
|
|
}
|
|
|
|
export function HomeScreen() {
|
|
const navigation = useNavigation<NavigationProp>();
|
|
const { data, isLoading, error } = useFiles();
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
const files = data?.data ?? [];
|
|
|
|
const filteredFiles = useMemo(
|
|
() => searchQuery.trim() ? files.filter((f) => matchesQuery(f, searchQuery)) : files,
|
|
[files, searchQuery]
|
|
);
|
|
|
|
const groups = groupByDate(filteredFiles);
|
|
const groupKeys = Object.keys(groups);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View style={styles.center}>
|
|
<Text style={styles.infoText}>Chargement...</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<View style={styles.center}>
|
|
<Text style={styles.infoText}>Erreur de chargement</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.searchBar}>
|
|
<TextInput
|
|
style={styles.searchInput}
|
|
placeholder="Rechercher par nom, tag ou texte OCR..."
|
|
placeholderTextColor="#999"
|
|
value={searchQuery}
|
|
onChangeText={setSearchQuery}
|
|
returnKeyType="search"
|
|
autoCorrect={false}
|
|
/>
|
|
{searchQuery.length > 0 && (
|
|
<TouchableOpacity onPress={() => setSearchQuery('')} style={styles.clearBtn}>
|
|
<Text style={styles.clearText}>✕</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
<FlatList
|
|
data={groupKeys}
|
|
keyExtractor={(item) => item}
|
|
contentContainerStyle={styles.list}
|
|
ListEmptyComponent={
|
|
<View style={styles.empty}>
|
|
<Text style={styles.emptyText}>
|
|
{searchQuery ? 'Aucun résultat' : 'Aucun fichier'}
|
|
</Text>
|
|
</View>
|
|
}
|
|
renderItem={({ item: dateKey }) => {
|
|
const groupFiles = groups[dateKey];
|
|
return (
|
|
<View style={styles.section}>
|
|
<Text style={styles.sectionTitle}>{formatDateLabel(dateKey)}</Text>
|
|
<View style={styles.grid}>
|
|
{groupFiles.map((file) => (
|
|
<FileGridItem key={file.id} file={file} />
|
|
))}
|
|
</View>
|
|
</View>
|
|
);
|
|
}}
|
|
/>
|
|
|
|
<View style={styles.bottomNav}>
|
|
<TouchableOpacity style={styles.navButton} onPress={() => {}}>
|
|
<MaterialIcons name="home" size={24} color="#1976D2" />
|
|
<Text style={styles.navText}>Accueil</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.navButton}
|
|
onPress={() => navigation.navigate('Upload')}
|
|
>
|
|
<MaterialIcons name="cloud-upload" size={24} color="#1976D2" />
|
|
<Text style={styles.navText}>Upload</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.navButton}
|
|
onPress={() => navigation.navigate('Scan')}
|
|
>
|
|
<MaterialIcons name="document-scanner" size={24} color="#1976D2" />
|
|
<Text style={styles.navText}>Scan</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#f5f5f5',
|
|
},
|
|
center: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
infoText: {
|
|
fontSize: 16,
|
|
color: '#666',
|
|
},
|
|
searchBar: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingTop: 12,
|
|
paddingBottom: 8,
|
|
},
|
|
searchInput: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
borderRadius: 10,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 10,
|
|
fontSize: 15,
|
|
borderWidth: 1,
|
|
borderColor: '#e0e0e0',
|
|
},
|
|
clearBtn: {
|
|
marginLeft: 8,
|
|
padding: 6,
|
|
},
|
|
clearText: {
|
|
fontSize: 18,
|
|
color: '#999',
|
|
},
|
|
list: {
|
|
padding: 16,
|
|
paddingBottom: 80,
|
|
},
|
|
empty: {
|
|
paddingVertical: 60,
|
|
alignItems: 'center',
|
|
},
|
|
emptyText: {
|
|
fontSize: 16,
|
|
color: '#999',
|
|
},
|
|
section: {
|
|
marginBottom: 24,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
marginBottom: 12,
|
|
color: '#333',
|
|
},
|
|
grid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 6,
|
|
},
|
|
gridItem: {
|
|
width: ITEM_SIZE,
|
|
},
|
|
thumb: {
|
|
width: ITEM_SIZE,
|
|
height: ITEM_SIZE,
|
|
borderRadius: 6,
|
|
backgroundColor: '#e0e0e0',
|
|
},
|
|
placeholder: {
|
|
width: ITEM_SIZE,
|
|
height: ITEM_SIZE,
|
|
borderRadius: 6,
|
|
backgroundColor: '#e3f2fd',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
placeholderText: {
|
|
fontSize: 12,
|
|
color: '#1976D2',
|
|
fontWeight: '600',
|
|
},
|
|
fileName: {
|
|
fontSize: 11,
|
|
color: '#666',
|
|
marginTop: 4,
|
|
textAlign: 'center',
|
|
},
|
|
bottomNav: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-around',
|
|
paddingVertical: 12,
|
|
backgroundColor: '#fff',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#e0e0e0',
|
|
},
|
|
navButton: {
|
|
alignItems: 'center',
|
|
padding: 8,
|
|
gap: 4,
|
|
},
|
|
navText: {
|
|
fontSize: 16,
|
|
color: '#1976D2',
|
|
},
|
|
});
|