161 lines
3.9 KiB
TypeScript
161 lines
3.9 KiB
TypeScript
import SelectChantier from '@/components/selectChantier';
|
|
import { ThemedText } from '@/components/themed-text';
|
|
import { ThemedTextInput } from '@/components/themed-textinpute';
|
|
import { ThemedView } from '@/components/themed-view';
|
|
import { useLocalSearchParams, useRouter } from 'expo-router';
|
|
import React, { useMemo, useState } from 'react';
|
|
import { Button, FlatList, Image, StyleSheet, Text } 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) {
|
|
return null;
|
|
}
|
|
return(
|
|
<ThemedView lvl={2} style={styles.card}>
|
|
<Image source={{ uri: item.Image }} style={styles.image} />
|
|
<ThemedView lvl={2} style={styles.info}>
|
|
<ThemedText style={styles.group}>{item.group}</ThemedText>
|
|
<ThemedText>{item.date}</ThemedText>
|
|
<ThemedText>{item.location}</ThemedText>
|
|
<ThemedText>Prix : {item.price} €</ThemedText>
|
|
<ThemedText>Places restantes : {item.ticketsLeft}</ThemedText>
|
|
</ThemedView>
|
|
</ThemedView>);
|
|
};
|
|
|
|
|
|
|
|
|
|
return(
|
|
<ThemedView style={styles.container}>
|
|
<ThemedView style={styles.selectChantier}>
|
|
<SelectChantier ></SelectChantier>
|
|
</ThemedView>
|
|
<FlatList
|
|
data={filteredData}
|
|
renderItem={renderItem}
|
|
keyExtractor={(_, index) => index.toString()}
|
|
contentContainerStyle={{ paddingBottom: 40 }}
|
|
ListHeaderComponent={
|
|
<ThemedView style={styles.header}>
|
|
<ThemedText style={styles.text}>
|
|
Bonjour {prenom} {nom}
|
|
</ThemedText>
|
|
|
|
<ThemedTextInput
|
|
style={styles.input}
|
|
placeholder="Rechercher un groupe..."
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
</ThemedView>
|
|
}
|
|
ListEmptyComponent={
|
|
<Text style={styles.empty}>Aucun résultat n'a été trouvé</Text>
|
|
}
|
|
/>
|
|
|
|
<ThemedView style={styles.footer}>
|
|
<Button title="Retour" onPress={() => router.push("/(tabs)/mapScreen") } />
|
|
</ThemedView>
|
|
</ThemedView>
|
|
)
|
|
}
|
|
|
|
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',
|
|
},
|
|
selectChantier:{
|
|
width:"100%",
|
|
padding:10,
|
|
margin:10,
|
|
marginTop:50,
|
|
},
|
|
}); |