119 lines
3.2 KiB
TypeScript
119 lines
3.2 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { FlatList, StyleSheet, View, Text, Alert, RefreshControl } from 'react-native';
|
|
import Animated, { FadeInUp } from 'react-native-reanimated';
|
|
import OrderItem from '@/components/OrderItem';
|
|
import { getAuth } from 'firebase/auth';
|
|
import { collection, query, where, getDocs } from 'firebase/firestore';
|
|
import { db } from '@/firebase/config';
|
|
import { Order } from '@/constants/types';
|
|
import COLORS from '@/constants/colors';
|
|
|
|
interface OrderListProps {
|
|
}
|
|
|
|
export default function OrderList() {
|
|
const [orders, setOrders] = useState<Order[]>([]);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
|
|
const fetchOrders = async () => {
|
|
const user = getAuth().currentUser;
|
|
if (!user) {
|
|
Alert.alert('Erreur', 'Utilisateur non connecté');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const ordersQuery = query(
|
|
collection(db, 'orders'),
|
|
where('userId', '==', user.uid)
|
|
);
|
|
|
|
const querySnapshot = await getDocs(ordersQuery);
|
|
|
|
const ordersData = querySnapshot.docs.map((doc) => {
|
|
const data = doc.data();
|
|
const order: Order = {
|
|
id: doc.id,
|
|
orderId: data.orderId || '',
|
|
items: Object.keys(data)
|
|
.filter(key => key.startsWith('item'))
|
|
.map((key) => ({
|
|
name: data[key].name,
|
|
quantity: data[key].quantity,
|
|
})),
|
|
status: data.status || '',
|
|
timeAgo: data.createdAt ? new Date(data.createdAt).toLocaleString() : '',
|
|
userId: data.userId || '',
|
|
createdAt: data.createdAt ? new Date(data.createdAt.seconds * 1000) : new Date(),
|
|
};
|
|
return order;
|
|
});
|
|
|
|
const sortedOrders = ordersData.sort((a, b) =>
|
|
b.orderId.localeCompare(a.orderId)
|
|
);
|
|
|
|
setOrders(sortedOrders);
|
|
} catch (error) {
|
|
console.error('Erreur lors de la récupération des commandes:', error);
|
|
Alert.alert('Erreur', "Impossible de récupérer les commandes.");
|
|
} finally {
|
|
setRefreshing(false);
|
|
}
|
|
};
|
|
|
|
const onRefresh = () => {
|
|
setRefreshing(true);
|
|
fetchOrders();
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchOrders();
|
|
}, []);
|
|
|
|
return (
|
|
<FlatList
|
|
data={orders}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item, index }) => (
|
|
<Animated.View
|
|
entering={FadeInUp.delay(index * 100).springify()}
|
|
style={styles.itemContainer}
|
|
>
|
|
<OrderItem order={item} />
|
|
</Animated.View>
|
|
)}
|
|
contentContainerStyle={styles.listContent}
|
|
showsVerticalScrollIndicator={false}
|
|
ListEmptyComponent={
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyText}>Aucune commande trouvée</Text>
|
|
</View>
|
|
}
|
|
refreshControl={
|
|
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
listContent: {
|
|
paddingTop: 16,
|
|
paddingBottom: 24,
|
|
},
|
|
itemContainer: {
|
|
marginBottom: 12,
|
|
},
|
|
emptyContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
paddingVertical: 10,
|
|
},
|
|
emptyText: {
|
|
color: COLORS.text,
|
|
fontSize: 18,
|
|
},
|
|
});
|