Archived
137 lines
3.1 KiB
JavaScript
137 lines
3.1 KiB
JavaScript
import { StyleSheet, View, Platform, SectionList, TouchableOpacity } from 'react-native';
|
|
import { Card, Text, Button, Spinner, ArrowForwardIcon, HStack } from 'native-base';
|
|
import React from 'react';
|
|
import moment from 'moment';
|
|
import 'moment/locale/nb';
|
|
|
|
import theme from '../../theme';
|
|
|
|
moment.locale('nb');
|
|
|
|
const _formatTime = (time) => {
|
|
return moment(time).format('llll');
|
|
};
|
|
|
|
const EventList = ({ eventsSectioned, refreshing, handleRefresh, handleLoadMore, showEvent, error, loading }) => {
|
|
const _renderItem = ({ item }) => (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
showEvent(item);
|
|
}}
|
|
style={styles.listItem}
|
|
>
|
|
<HStack>
|
|
<View style={{ flex: 5 }}>
|
|
<Text style={styles.listItemTitle} numberOfLines={1}>
|
|
{item.title.decoded}
|
|
</Text>
|
|
<Text style={styles.listItemTime}>{_formatTime(item.start_time)}</Text>
|
|
</View>
|
|
<View style={{ flex: 1 }}>
|
|
<ArrowForwardIcon size={4} color="#999999" marginTop={3} />
|
|
</View>
|
|
</HStack>
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
const _renderSectionHeader = ({ section }) => {
|
|
return (
|
|
<View style={styles.sectionHeader}>
|
|
<Text style={styles.sectionTitle}>{section.title}</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const _renderFooter = () => {
|
|
if (!loading) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View style={{ paddingVertical: 20 }}>
|
|
<Spinner color="#f58220" />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
if (error) {
|
|
return (
|
|
<View>
|
|
<Card style={{ margin: 4 }}>
|
|
<View>
|
|
<Text style={styles.loadingText}>Kunne ikke hente programmet...</Text>
|
|
</View>
|
|
<View>
|
|
<Button onPress={handleRefresh}>
|
|
<Text>Prøv igjen</Text>
|
|
</Button>
|
|
</View>
|
|
</Card>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SectionList
|
|
sections={eventsSectioned}
|
|
renderItem={_renderItem}
|
|
renderSectionHeader={_renderSectionHeader}
|
|
keyExtractor={(item) => item.id}
|
|
refreshing={refreshing}
|
|
onRefresh={handleRefresh}
|
|
onEndReached={handleLoadMore}
|
|
onEndReachedThreshould={10}
|
|
initialNumToRender={10}
|
|
ListFooterComponent={_renderFooter}
|
|
style={[styles.card, styles.list]}
|
|
ListHeaderComponent={() => {
|
|
return <View style={styles.listHeader} />;
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
export default EventList;
|
|
|
|
const styles = StyleSheet.create({
|
|
listItem: {
|
|
backgroundColor: 'white',
|
|
padding: 8,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#ccc',
|
|
},
|
|
listItemTitle: {
|
|
fontSize: 14,
|
|
},
|
|
listItemTime: {
|
|
fontSize: 14,
|
|
color: '#666',
|
|
},
|
|
sectionHeader: {
|
|
backgroundColor: 'white',
|
|
...Platform.select({
|
|
ios: { marginBottom: -8 },
|
|
}),
|
|
paddingTop: 8,
|
|
paddingLeft: 8,
|
|
paddingRight: 8,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
},
|
|
loadingText: {
|
|
textAlign: 'center',
|
|
paddingBottom: 8,
|
|
},
|
|
card: theme.card,
|
|
list: {
|
|
padding: 0,
|
|
marginTop: 0,
|
|
marginBottom: 0,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
listHeader: {
|
|
paddingTop: 8,
|
|
},
|
|
});
|