Commit a279bc5b authored by Gijs Hendriksen's avatar Gijs Hendriksen
Browse files

Improve welcome error messages

parent b590c8b8
......@@ -6,7 +6,7 @@ import styles from './style/errorScreen';
const smiley = require('../img/smiley.png');
const ErrorScreen = (props) => (
const ErrorScreen = props => (
<View
style={styles.content}
>
......@@ -23,4 +23,4 @@ ErrorScreen.propTypes = {
message: PropTypes.string.isRequired,
};
export default ErrorScreen;
\ No newline at end of file
export default ErrorScreen;
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, SectionList, TouchableOpacity } from 'react-native';
import { View, Text, SectionList, TouchableOpacity, ScrollView, RefreshControl } from 'react-native';
import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
import EventDetailCard from './EventDetailCard';
import LoadingScreen from './LoadingScreen';
import ErrorScreen from './ErrorScreen';
import * as welcomeActions from '../actions/welcome';
import { navigate } from '../actions/navigation';
......@@ -67,17 +70,39 @@ class Welcome extends Component {
};
render() {
if (this.props.eventList.length === 0) {
if (!this.props.hasLoaded) {
return <LoadingScreen />;
} else if (!this.props.success) {
return (
<ScrollView
contentContainerStyle={styles.content}
refreshControl={(
<RefreshControl
onRefresh={this.handleRefresh}
refreshing={this.props.loading}
/>
)}
>
<ErrorScreen message="Sorry! We couldn't load any data." />
</ScrollView>
);
} else if (this.props.eventList.length === 0) {
return (
<View>
<Text>
No events found!
</Text>
</View>
<ScrollView
contentContainerStyle={styles.content}
refreshControl={(
<RefreshControl
onRefresh={this.handleRefresh}
refreshing={this.props.loading}
/>
)}
>
<ErrorScreen message="No events found!" />
</ScrollView>
);
}
return (
<View>
<View style={styles.content}>
<SectionList
style={styles.sectionList}
renderItem={item => <EventDetailCard event={item.item} />}
......@@ -110,11 +135,15 @@ Welcome.propTypes = {
})).isRequired,
refresh: PropTypes.func.isRequired,
loading: PropTypes.bool.isRequired,
success: PropTypes.bool.isRequired,
hasLoaded: PropTypes.bool.isRequired,
};
const mapStateToProps = state => ({
eventList: state.welcome.eventList,
loading: state.welcome.loading,
success: state.welcome.success,
hasLoaded: state.welcome.hasLoaded,
});
const mapDispatchToProps = dispatch => ({
......
......@@ -22,4 +22,4 @@ const styles = StyleSheet.create({
},
});
export default styles;
\ No newline at end of file
export default styles;
......@@ -4,6 +4,10 @@ import { TOTAL_BAR_HEIGHT } from './navigator';
import { colors } from '../../style';
const styles = StyleSheet.create({
content: {
flex: 1,
backgroundColor: colors.background,
},
sectionList: {
backgroundColor: colors.background,
height: Dimensions.get('window').height - TOTAL_BAR_HEIGHT,
......
......@@ -3,6 +3,8 @@ import * as welcomeActions from '../actions/welcome';
const initialState = {
eventList: [],
loading: true,
success: true,
hasLoaded: false,
};
export default function welcome(state = initialState, action = {}) {
......@@ -11,9 +13,16 @@ export default function welcome(state = initialState, action = {}) {
return {
eventList: action.payload.eventList,
loading: false,
success: true,
hasLoaded: true,
};
case welcomeActions.FAILURE:
return { ...state, loading: false };
return {
...state,
loading: false,
success: false,
hasLoaded: true,
};
case welcomeActions.REFRESH:
return { ...state, loading: true };
default:
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment