import React, { useState } from 'react';
import { StyleSheet, View, Text, SectionList } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import * as actions from '../../store/actions/action';
import NewAds from './newAds';
const NewAdsScreen = props => {
const session = useSelector(state => state.init.sessionData);
const ads = useSelector(state => state.init.ads);
const dispatch = useDispatch();
const { navigation } = props;
const [refreshing, setRefreshing] = useState(false);
/**
* Sorting new ads
* latest ad comes at the top of the secionList
*/
let newads = ads.sort(function(a, b) {
let dateA = new Date(a.published),
dateB = new Date(b.published);
return dateB - dateA;
});
let order =
newads.length > 0
? [{ title: 'Trykk på annonsen for å se mer informasjon', data: newads }]
: [];
function onRefresh() {
setRefreshing(true);
dispatch(actions.getAds());
setTimeout(function() {
setRefreshing(false);
}, 1000);
}
return (
<View style={styles.wrapper}>
<SectionList
style={{ marginHorizontal: 16 }}
onRefresh={() => onRefresh()}
refreshing={refreshing}
sections={order}
ListEmptyComponent={
<View style={styles.emptyComponent}>
<Text style={{ fontSize: 30, fontFamily: 'MuseoSansRounded-700' }}>
Det er ingen nye annonser lagt til marketsplassen
</Text>
</View>
}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <NewAds item={item} styles={styles} nav={navigation} />}
/>
</View>
);
};
const styles = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: '#EEEEEE'
},
item: {
backgroundColor: '#FFFFFF',
padding: 20,
marginVertical: 8
},
header: {
fontSize: 32,
fontWeight: 'bold',
fontFamily: 'MuseoSansRounded-700',
backgroundColor: '#EEEEEE',
paddingTop: 20
},
title: {
fontSize: 24
},
emptyComponent: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
marginTop: 10
}
});
export default NewAdsScreen;