Drawer now closes smoothly when loading Calendar or Welcome screen

.eslintrc.json

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

app/components/Calendar.js

 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>
       );

app/components/Welcome.js

 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 => ({

app/components/style/calendar.js

@@ -37,6 +37,11 @@ const styles = StyleSheet.create({
     paddingBottom: 12,
     paddingLeft: 16,
   },
+  indicatorView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
 });
 
 export default styles;

app/components/style/welcome.js

@@ -28,6 +28,11 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: colors.darkMagenta,
   },
+  indicatorView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
 });
 
 export default styles;

app/reducers/navigation.js

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

app/reducers/welcome.js

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