import React, { useState } from 'react';
import { SectionList, View, StyleSheet, Text } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import * as actions from '../../store/actions/action';
import TodoItem from './TodoItem';
const todoScreen = props => {
const session = useSelector(state => state.init.sessionData);
const todo = useSelector(state => state.init.orders);
const dispatch = useDispatch();
const { navigation } = props;
const [refreshing, setRefreshing] = useState(false);
/**
* Sorting todoItems
* Oldest task comes at the top of the secionList
*/
let newtodo = todo.sort(function(a, b) {
let dateA = new Date(a.lastModified);
let dateB = new Date(b.lastModified);
return dateA - dateB;
});
let order = [];
if (newtodo.length > 0) {
order = [{ data: newtodo }];
}
function onRefresh() {
setRefreshing(true);
dispatch(actions.getOrders(session.organisationType));
setTimeout(function() {
setRefreshing(false);
}, 1000);
}
return (
<View style={styles.wrapper}>
<SectionList
style={{ marginHorizontal: 16 }}
onRefresh={() => onRefresh()}
refreshing={refreshing}
sections={order}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <TodoItem item={item} nav={navigation} />}
ListEmptyComponent={() => <EmptyListComponent />}
/>
</View>
);
};
const EmptyListComponent = () => {
return (
<View>
<Text style={{ fontSize: 30, fontFamily: 'MuseoSansRounded-700' }}>
Vi gir beskjed så snart det dukker opp noe du trenger å gjøre{' '}
</Text>
</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'
},
title: {
fontSize: 24
},
emptyComponent: {
fontSize: 20
}
});
export default todoScreen;