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

Improve calendar error messages

parent a516fa8b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, View, SectionList } from 'react-native';
import { Text, View, SectionList, ScrollView, RefreshControl } from 'react-native';
import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
import * as calendarActions from '../actions/calendar';
import EventCard from './EventCard';
import LoadingScreen from './LoadingScreen';
import ErrorScreen from './ErrorScreen';
import styles from './style/calendar';
......@@ -123,17 +125,39 @@ class Calendar extends Component {
};
render() {
if (this.props.eventList.length === 0 && !this.props.loading) {
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={renderItem}
......@@ -167,11 +191,15 @@ Calendar.propTypes = {
})).isRequired,
loading: PropTypes.bool.isRequired,
refresh: PropTypes.func.isRequired,
success: PropTypes.bool.isRequired,
hasLoaded: PropTypes.bool.isRequired,
};
const mapStateToProps = state => ({
eventList: state.calendar.eventList,
loading: state.calendar.loading,
success: state.calendar.success,
hasLoaded: state.calendar.hasLoaded,
});
const mapDispatchToProps = dispatch => ({
......
import React from 'react';
import { Image, Text, View } from 'react-native';
import PropTypes from 'prop-types';
import styles from './style/errorScreen';
const smiley = require('../img/smiley.png');
const ErrorScreen = (props) => (
<View
style={styles.content}
>
<Image
source={smiley}
style={styles.image}
/>
<Text style={styles.text}>{props.message}</Text>
<Text style={styles.text}>Try again later.</Text>
</View>
);
ErrorScreen.propTypes = {
message: PropTypes.string.isRequired,
};
export default ErrorScreen;
\ No newline at end of file
......@@ -4,6 +4,10 @@ import { TOTAL_BAR_HEIGHT } from './navigator';
import { colors } from '../../style';
const styles = StyleSheet.create({
content: {
flex: 1,
backgroundColor: colors.background,
},
day: {
flex: 1,
flexDirection: 'row',
......
import { StyleSheet } from 'react-native';
import { colors } from '../../style';
const styles = StyleSheet.create({
content: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: colors.background,
},
image: {
width: 200,
height: 200,
marginBottom: 30,
},
text: {
fontFamily: 'sans-serif-regular',
fontSize: 18,
color: colors.textColour,
textAlign: 'center',
},
});
export default styles;
\ No newline at end of file
......@@ -3,6 +3,8 @@ import * as calendarActions from '../actions/calendar';
const initialState = {
eventList: [],
loading: true,
success: true,
hasLoaded: false,
};
export default function calendar(state = initialState, action = {}) {
......@@ -11,9 +13,16 @@ export default function calendar(state = initialState, action = {}) {
return {
eventList: action.payload.eventList,
loading: false,
success: true,
hasLoaded: true,
};
case calendarActions.FAILURE:
return { ...state, loading: false };
return {
...state,
loading: false,
success: false,
hasLoaded: true,
};
case calendarActions.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