Commit c09f7698 authored by Gijs Hendriksen's avatar Gijs Hendriksen Committed by Wietse Kuipers
Browse files

Drawer now closes smoothly when loading Calendar or Welcome screen

parent b889f02c
......@@ -44,7 +44,7 @@
"react-native/no-color-literals": 2,
"react/jsx-filename-extension": 0,
"react/prefer-stateless-function": 1,
"import/prefer-default-export": 1,
"import/prefer-default-export": 1
},
"settings": {
"import/resolver": {
......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Text, View, SectionList } from 'react-native';
import { Text, View, SectionList, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
......@@ -9,6 +9,7 @@ import * as actions from '../actions/calendar';
import EventCard from './EventCard';
import styles from './style/calendar';
import { colors } from '../style';
/* eslint no-param-reassign: ["error", { "props": false }]*/
const addEventToSection = (sections, date, event) => {
......@@ -123,7 +124,6 @@ class Calendar extends Component {
componentDidMount() {
Moment.locale('nl');
this.handleRefresh();
}
handleRefresh = () => {
......@@ -134,10 +134,24 @@ class Calendar extends Component {
render() {
if (!this.props.calendarFetched) {
this.props.retrieveCalendar(this.props.token);
return (
<View
style={styles.indicatorView}
>
<ActivityIndicator
animating
color={colors.magenta}
style={styles.indicator}
size="large"
/>
</View>
);
} else if (this.props.eventList.length === 0) {
return (
<View>
<Text>
No calendar retrieved!
No events found!
</Text>
</View>
);
......
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, SectionList, TouchableOpacity } from 'react-native';
import { ActivityIndicator, View, Text, SectionList, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
......@@ -9,6 +9,7 @@ import EventDetailCard from './EventDetailCard';
import { retrieveShortlist } from '../actions/welcome';
import { navigate } from '../actions/navigation';
import styles from './style/welcome';
import { colors } from '../style';
const eventListToSections = (eventList) => {
Moment.locale('nl');
......@@ -72,10 +73,6 @@ class Welcome extends Component {
};
}
componentDidMount() {
this.handleRefresh();
}
handleRefresh = () => {
this.setState({ refreshing: true });
this.props.retrieveShortlist(this.props.token, 5)
......@@ -83,7 +80,21 @@ class Welcome extends Component {
};
render() {
if (this.props.eventList.length === 0) {
if (!this.props.hasLoaded) {
this.props.retrieveShortlist(this.props.token, 5);
return (
<View
style={styles.indicatorView}
>
<ActivityIndicator
animating
color={colors.magenta}
style={styles.indicator}
size="large"
/>
</View>
);
} else if (this.props.eventList.length === 0) {
return (
<View>
<Text>
......@@ -125,12 +136,14 @@ Welcome.propTypes = {
pizza: PropTypes.bool,
})).isRequired,
token: PropTypes.string.isRequired,
hasLoaded: PropTypes.bool.isRequired,
retrieveShortlist: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
eventList: state.welcome.eventList,
token: state.session.token,
hasLoaded: state.welcome.hasLoaded,
});
const mapDispatchToProps = dispatch => ({
......
......@@ -37,6 +37,11 @@ const styles = StyleSheet.create({
paddingBottom: 12,
paddingLeft: 16,
},
indicatorView: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
export default styles;
......@@ -28,6 +28,11 @@ const styles = StyleSheet.create({
fontSize: 14,
color: colors.darkMagenta,
},
indicatorView: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
export default styles;
......@@ -9,7 +9,7 @@ const initialState = {
export default function navigate(state = initialState, action = {}) {
const { currentScene, previousScenes, loggedIn, drawerOpen } = state;
const { currentScene, previousScenes, drawerOpen } = state;
switch (action.type) {
case types.LOGINSUCCESS: {
return {
......@@ -26,10 +26,9 @@ export default function navigate(state = initialState, action = {}) {
}
const scene = previousScenes.pop();
return {
...state,
previousScenes,
currentScene: scene,
loggedIn,
drawerOpen,
};
}
case types.NAVIGATE: {
......@@ -40,19 +39,19 @@ export default function navigate(state = initialState, action = {}) {
};
} else if (action.newSection) {
return {
...state,
previousScenes: [],
currentScene: action.scene,
loggedIn,
drawerOpen: false,
};
}
return {
...state,
previousScenes: [
...previousScenes,
currentScene,
],
currentScene: action.scene,
loggedIn,
drawerOpen: false,
};
}
......
......@@ -2,6 +2,7 @@ import * as types from '../actions/actionTypes';
const initialState = {
eventList: [],
hasLoaded: false,
};
export default function welcome(state = initialState, action = {}) {
......@@ -9,6 +10,7 @@ export default function welcome(state = initialState, action = {}) {
case types.WELCOME:
return {
eventList: action.eventList,
hasLoaded: true,
};
default:
return state;
......
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