148 lines
3.5 KiB
TypeScript
148 lines
3.5 KiB
TypeScript
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
import React, { useMemo, useState } from 'react';
|
|
import { Button, FlatList, Image, StyleSheet, Text, TextInput, View } from 'react-native';
|
|
import rawConcerts from '../../data/concerts.json';
|
|
|
|
type Concert = {
|
|
group: string;
|
|
date: string;
|
|
nationality: string;
|
|
location: string;
|
|
price: number;
|
|
ticketsLeft: number;
|
|
Image: string;
|
|
favorite: boolean;
|
|
};
|
|
|
|
export default function BonjourScreen() {
|
|
|
|
const router = useRouter();
|
|
const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
|
|
const [search, setSearch] = useState('');
|
|
|
|
|
|
const concertsData: Concert[] = Array.isArray(rawConcerts)
|
|
? (rawConcerts as Concert[])
|
|
: [];
|
|
|
|
const filteredData = useMemo(() => {
|
|
if (!Array.isArray(concertsData)) return [];
|
|
const q = search.trim().toLowerCase();
|
|
if (!q) return concertsData;
|
|
return concertsData.filter(
|
|
(item) => !!item && (item.group ?? '').toLowerCase().includes(q)
|
|
);
|
|
}, [concertsData, search]);
|
|
|
|
|
|
const renderItem = ({ item, index }: { item?: Concert; index: number }) => {
|
|
if (!item) {
|
|
// optionnel : afficher un placeholder pour debug
|
|
// return <View style={styles.card}><Text>Item manquant</Text></View>;
|
|
return null;
|
|
}
|
|
return(
|
|
<View style={styles.card}>
|
|
<Image source={{ uri: item.Image }} style={styles.image} />
|
|
<View style={styles.info}>
|
|
<Text style={styles.group}>{item.group}</Text>
|
|
<Text>{item.date}</Text>
|
|
<Text>{item.location}</Text>
|
|
<Text>Prix : {item.price} €</Text>
|
|
<Text>Places restantes : {item.ticketsLeft}</Text>
|
|
</View>
|
|
</View>);
|
|
};
|
|
|
|
return(
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={filteredData}
|
|
renderItem={renderItem}
|
|
keyExtractor={(_, index) => index.toString()}
|
|
contentContainerStyle={{ paddingBottom: 40 }}
|
|
ListHeaderComponent={
|
|
<View style={styles.header}>
|
|
<Text style={styles.text}>
|
|
Bonjour {prenom} {nom}
|
|
</Text>
|
|
|
|
{/* 🔍 Champ de recherche */}
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Rechercher un groupe..."
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
</View>
|
|
}
|
|
ListEmptyComponent={
|
|
<Text style={styles.empty}>Aucun résultat trouvé 😕</Text>
|
|
}
|
|
/>
|
|
|
|
<View style={styles.footer}>
|
|
<Button title="Retour" onPress={() => router.push("/(tabs)/mapScreen") } />
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#fff',
|
|
},
|
|
header: {
|
|
marginTop: 60,
|
|
marginBottom: 20,
|
|
alignItems: 'center',
|
|
paddingHorizontal: 20,
|
|
},
|
|
text: {
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
marginBottom: 10,
|
|
},
|
|
input: {
|
|
width: '100%',
|
|
borderWidth: 1,
|
|
borderColor: '#ccc',
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
fontSize: 16,
|
|
},
|
|
card: {
|
|
flexDirection: 'row',
|
|
marginHorizontal: 20,
|
|
marginBottom: 15,
|
|
borderWidth: 1,
|
|
borderColor: '#ddd',
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
backgroundColor: '#fafafa',
|
|
},
|
|
image: {
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 8,
|
|
marginRight: 10,
|
|
},
|
|
info: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
group: {
|
|
fontWeight: 'bold',
|
|
fontSize: 16,
|
|
marginBottom: 5,
|
|
},
|
|
footer: {
|
|
padding: 20,
|
|
},
|
|
empty: {
|
|
textAlign: 'center',
|
|
marginTop: 30,
|
|
color: '#888',
|
|
},
|
|
}); |