Improve welcome error messages

app/components/ErrorScreen.js

@@ -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}
   >

app/components/Welcome.js

 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 (
-        <View>
-          <Text>
-            No events found!
-          </Text>
-        </View>
+        <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 (
+        <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 => ({

app/components/style/welcome.js

@@ -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,

app/reducers/welcome.js

@@ -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: