Untitled
unknown
plain_text
a year ago
3.0 kB
5
Indexable
import React, { useState } from 'react'; import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-native'; import Collapsible from 'react-native-collapsible'; import { useNavigation } from '@react-navigation/native'; import eventsByWeek from '../events_by_week.json'; // Import the events_by_week.json file const CompetitionItem = ({ item, index, expandedWeek, toggleExpanded }) => { const navigation = useNavigation(); const handleEventPress = (event) => { const { id, sku, name, location, divisions } = event; // Navigate to the EventDetails screen, passing event data as params navigation.navigate('Details', { eventId: id, eventSku: sku, eventName: name, eventLocation: location, eventDivisions: divisions, }); }; return ( <TouchableOpacity onPress={() => toggleExpanded(index)}> <View style={styles.competitionContainer}> <Text style={styles.weekHeading}>{`${item.dates[0]} - ${item.dates[1]}`}</Text> <Collapsible collapsed={expandedWeek !== index}> {item.dates.map((date, idx) => ( <View key={idx}> <Text style={styles.weekDate}>{date}</Text> {item.events.map((event, eventIdx) => ( <TouchableOpacity key={eventIdx} onPress={() => handleEventPress(event)}> <View style={styles.eventButton}> <Text style={styles.eventButtonText}>{event.name}</Text> {/* Display other event information */} </View> </TouchableOpacity> ))} </View> ))} </Collapsible> {/* Display number of events */} <Text style={styles.numberOfEvents}>Number of Events: {item.events.length}</Text> </View> </TouchableOpacity> ); }; const CompetitionList = () => { const [expandedWeek, setExpandedWeek] = useState(null); const toggleExpanded = (index) => { setExpandedWeek(expandedWeek === index ? null : index); }; return ( <ScrollView style={styles.container}> {eventsByWeek.map((item, index) => ( <CompetitionItem key={index} item={item} index={index} expandedWeek={expandedWeek} toggleExpanded={toggleExpanded} /> ))} </ScrollView> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 10, }, competitionContainer: { marginBottom: 20, }, weekHeading: { fontSize: 18, fontWeight: 'bold', marginBottom: 5, }, weekDate: { fontSize: 16, marginVertical: 2, }, eventButton: { padding: 10, backgroundColor: '#ddd', borderRadius: 5, marginVertical: 5, }, eventButtonText: { fontSize: 16, }, numberOfEvents: { fontSize: 14, marginTop: 5, }, }); export default CompetitionList;
Editor is loading...
Leave a Comment