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'; ...@@ -6,7 +6,7 @@ import styles from './style/errorScreen';
const smiley = require('../img/smiley.png'); const smiley = require('../img/smiley.png');
const ErrorScreen = (props) => ( const ErrorScreen = props => (
<View <View
style={styles.content} style={styles.content}
> >
...@@ -23,4 +23,4 @@ ErrorScreen.propTypes = { ...@@ -23,4 +23,4 @@ ErrorScreen.propTypes = {
message: PropTypes.string.isRequired, message: PropTypes.string.isRequired,
}; };
export default ErrorScreen; export default ErrorScreen;
\ No newline at end of file
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; 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 { connect } from 'react-redux';
import Moment from 'moment'; import Moment from 'moment';
import 'moment/locale/nl'; import 'moment/locale/nl';
import EventDetailCard from './EventDetailCard'; import EventDetailCard from './EventDetailCard';
import LoadingScreen from './LoadingScreen';
import ErrorScreen from './ErrorScreen';
import * as welcomeActions from '../actions/welcome'; import * as welcomeActions from '../actions/welcome';
import { navigate } from '../actions/navigation'; import { navigate } from '../actions/navigation';
...@@ -67,17 +70,39 @@ class Welcome extends Component { ...@@ -67,17 +70,39 @@ class Welcome extends Component {
}; };
render() { 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 ( return (
<View> <ScrollView
<Text> contentContainerStyle={styles.content}
No events found! refreshControl={(
</Text> <RefreshControl
</View> onRefresh={this.handleRefresh}
refreshing={this.props.loading}
/>
)}
>
<ErrorScreen message="No events found!" />
</ScrollView>
); );
} }
return ( return (
<View> <View style={styles.content}>
<SectionList <SectionList
style={styles.sectionList} style={styles.sectionList}
renderItem={item => <EventDetailCard event={item.item} />} renderItem={item => <EventDetailCard event={item.item} />}
...@@ -110,11 +135,15 @@ Welcome.propTypes = { ...@@ -110,11 +135,15 @@ Welcome.propTypes = {
})).isRequired, })).isRequired,
refresh: PropTypes.func.isRequired, refresh: PropTypes.func.isRequired,
loading: PropTypes.bool.isRequired, loading: PropTypes.bool.isRequired,
success: PropTypes.bool.isRequired,
hasLoaded: PropTypes.bool.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
eventList: state.welcome.eventList, eventList: state.welcome.eventList,
loading: state.welcome.loading, loading: state.welcome.loading,
success: state.welcome.success,
hasLoaded: state.welcome.hasLoaded,
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
......
...@@ -22,4 +22,4 @@ const styles = StyleSheet.create({ ...@@ -22,4 +22,4 @@ const styles = StyleSheet.create({
}, },
}); });
export default styles; export default styles;
\ No newline at end of file
...@@ -4,6 +4,10 @@ import { TOTAL_BAR_HEIGHT } from './navigator'; ...@@ -4,6 +4,10 @@ import { TOTAL_BAR_HEIGHT } from './navigator';
import { colors } from '../../style'; import { colors } from '../../style';
const styles = StyleSheet.create({ const styles = StyleSheet.create({
content: {
flex: 1,
backgroundColor: colors.background,
},
sectionList: { sectionList: {
backgroundColor: colors.background, backgroundColor: colors.background,
height: Dimensions.get('window').height - TOTAL_BAR_HEIGHT, height: Dimensions.get('window').height - TOTAL_BAR_HEIGHT,
......
...@@ -3,6 +3,8 @@ import * as welcomeActions from '../actions/welcome'; ...@@ -3,6 +3,8 @@ import * as welcomeActions from '../actions/welcome';
const initialState = { const initialState = {
eventList: [], eventList: [],
loading: true, loading: true,
success: true,
hasLoaded: false,
}; };
export default function welcome(state = initialState, action = {}) { export default function welcome(state = initialState, action = {}) {
...@@ -11,9 +13,16 @@ export default function welcome(state = initialState, action = {}) { ...@@ -11,9 +13,16 @@ export default function welcome(state = initialState, action = {}) {
return { return {
eventList: action.payload.eventList, eventList: action.payload.eventList,
loading: false, loading: false,
success: true,
hasLoaded: true,
}; };
case welcomeActions.FAILURE: case welcomeActions.FAILURE:
return { ...state, loading: false }; return {
...state,
loading: false,
success: false,
hasLoaded: true,
};
case welcomeActions.REFRESH: case welcomeActions.REFRESH:
return { ...state, loading: true }; return { ...state, loading: true };
default: 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