Added loading indicator to Profile and Event

app/actions/actionTypes.js

@@ -7,9 +7,11 @@ export const LOGOUT = 'LOGOUT';
 export const OPENDRAWER = 'OPENDRAWER';
 export const CALENDARRETREIVED = 'CALENDARRETREIVED';
 export const CALENDARERROR = 'CALENDARERROR';
+export const LOADEVENTSTART = 'LOADEVENTSTART';
 export const LOADEVENTSUCCESS = 'LOADEVENTSUCCESS';
 export const LOADEVENTFAILURE = 'LOADEVENTFAILURE';
 export const RESETLOGINSTATE = 'RESETLOGINSTATE';
 export const WELCOME = 'WELCOME';
+export const LOADPROFILESTART = 'LOADPROFILESTART';
 export const LOADPROFILESUCCESS = 'LOADPROFILESUCCESS';
 export const LOADPROFILEFAILURE = 'LOADPROFILEFAILURE';

app/actions/events.js

@@ -2,6 +2,12 @@ import * as types from './actionTypes';
 import { navigate } from './navigation';
 import { apiUrl } from '../url';
 
+export function start() {
+  return {
+    type: types.LOADEVENTSTART,
+  };
+}
+
 export function success(data, registrations) {
   return {
     type: types.LOADEVENTSUCCESS,
@@ -37,6 +43,9 @@ function loadRegistrations(id, token) {
 
 export function loadEvent(id, token) {
   return (dispatch) => {
+    dispatch(start());
+    dispatch(navigate('event'));
+
     const data = {
       method: 'GET',
       headers: {
@@ -53,21 +62,14 @@ export function loadEvent(id, token) {
         (response) => {
           if (response.status > -1) {
             loadRegistrations(id, token)
-              .then((registrations) => {
-                dispatch(success(response, registrations));
-                dispatch(navigate('event'));
-              });
+              .then(registrations => dispatch(success(response, registrations)));
           } else {
             dispatch(success(response, []));
-            dispatch(navigate('event'));
           }
         },
       )
       .catch(
-        () => {
-          dispatch(fail());
-          dispatch(navigate('event'));
-        },
+        () => dispatch(fail())
       );
   };
 }

app/actions/profile.js

@@ -3,6 +3,12 @@ import { navigate } from './navigation';
 
 import { apiUrl } from '../url';
 
+export function start() {
+  return {
+    type: types.LOADPROFILESTART,
+  };
+}
+
 export function success(profile) {
   return {
     type: types.LOADPROFILESUCCESS,
@@ -18,6 +24,9 @@ export function fail() {
 
 export function loadProfile(token, member = 'me') {
   return (dispatch) => {
+    dispatch(start());
+    dispatch(navigate('profile'));
+
     const data = {
       method: 'GET',
       headers: {
@@ -32,16 +41,10 @@ export function loadProfile(token, member = 'me') {
         response => response.json(),
       )
       .then(
-        (response) => {
-          dispatch(success(response));
-          dispatch(navigate('profile'));
-        },
+        response => dispatch(success(response)),
       )
       .catch(
-        () => {
-          dispatch(fail());
-          dispatch(navigate('profile'));
-        },
+        () => dispatch(fail()),
       );
   };
 }

app/components/Calendar.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, SectionList, ActivityIndicator } from 'react-native';
+import { Text, View, SectionList } from 'react-native';
 import { connect } from 'react-redux';
 import Moment from 'moment';
 import 'moment/locale/nl';
 
 import * as actions from '../actions/calendar';
 import EventCard from './EventCard';
+import LoadingScreen from './LoadingScreen';
 
 import styles from './style/calendar';
-import { colors } from '../style';
 
 /* eslint no-param-reassign: ["error", { "props": false }]*/
 const addEventToSection = (sections, date, event) => {
@@ -135,18 +135,7 @@ 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>
-      );
+      return <LoadingScreen />;
     } else if (this.props.eventList.length === 0) {
       return (
         <View>

app/components/Event.js

@@ -7,6 +7,7 @@ import 'moment/locale/nl';
 
 import styles from './style/event';
 import MemberView from './MemberView';
+import LoadingScreen from './LoadingScreen';
 import { colors } from '../style';
 
 const REGISTRATION_NOT_NEEDED = -1;
@@ -227,6 +228,10 @@ class Event extends Component {
   };
 
   render() {
+    if (!this.props.hasLoaded) {
+      return <LoadingScreen />;
+    }
+
     if (this.props.success) {
       return (
         <ScrollView backgroundColor={colors.background} contentContainerStyle={styles.eventView}>
@@ -286,12 +291,14 @@ Event.propTypes = {
     name: PropTypes.string.isRequired,
   })).isRequired,
   success: PropTypes.bool.isRequired,
+  hasLoaded: PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = state => ({
   data: state.events.data,
   registrations: state.events.registrations,
   success: state.events.success,
+  hasLoaded: state.events.hasLoaded,
 });
 
 export default connect(mapStateToProps, () => ({}))(Event);

app/components/LoadingScreen.js

+import React from 'react';
+import { View, ActivityIndicator } from 'react-native';
+
+import { colors } from '../style';
+import styles from './style/loadingScreen';
+
+
+const LoadingScreen = () => (
+  <View
+    style={styles.indicatorView}
+  >
+    <ActivityIndicator
+      animating
+      color={colors.magenta}
+      style={styles.indicator}
+      size="large"
+    />
+  </View>
+);
+
+export default LoadingScreen;

app/components/Profile.js

@@ -6,6 +6,8 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import LinearGradient from 'react-native-linear-gradient';
 import Moment from 'moment';
 
+import LoadingScreen from './LoadingScreen';
+
 import { back } from '../actions/navigation';
 
 import styles, { HEADER_MIN_HEIGHT, HEADER_MAX_HEIGHT, HEADER_SCROLL_DISTANCE } from './style/profile';
@@ -107,6 +109,10 @@ class Profile extends Component {
   }
 
   render() {
+    if (!this.props.hasLoaded) {
+      return <LoadingScreen />;
+    }
+
     const headerHeight = this.props.success ? this.scrollY.interpolate({
       inputRange: [0, HEADER_SCROLL_DISTANCE],
       outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
@@ -225,11 +231,13 @@ Profile.propTypes = {
   }).isRequired,
   success: PropTypes.bool.isRequired,
   back: PropTypes.func.isRequired,
+  hasLoaded: PropTypes.bool.isRequired,
 };
 
 const mapStateToProps = state => ({
   profile: state.profile.profile,
   success: state.profile.success,
+  hasLoaded: state.profile.hasLoaded,
 });
 
 const mapDispatchToProps = dispatch => ({

app/components/Welcome.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { ActivityIndicator, View, Text, SectionList, TouchableOpacity } from 'react-native';
+import { View, Text, SectionList, TouchableOpacity } 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 { retrieveShortlist } from '../actions/welcome';
 import { navigate } from '../actions/navigation';
 import styles from './style/welcome';
-import { colors } from '../style';
 
 const eventListToSections = (eventList) => {
   Moment.locale('nl');
@@ -83,18 +83,7 @@ class Welcome extends Component {
   render() {
     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>
-      );
+      return <LoadingScreen />;
     } else if (this.props.eventList.length === 0) {
       return (
         <View>

app/components/style/calendar.js

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

app/components/style/loadingScreen.js

+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  indicatorView: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+  },
+});
+
+export default styles;

app/components/style/welcome.js

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

app/reducers/events.js

@@ -15,21 +15,30 @@ const initialState = {
   },
   registrations: [],
   success: false,
+  hasLoaded: false,
 };
 
 export default function loadEvent(state = initialState, action = {}) {
   switch (action.type) {
+    case types.LOADEVENTSTART: {
+      return {
+        ...state,
+        hasLoaded: false,
+      };
+    }
     case types.LOADEVENTSUCCESS:
       return {
         ...state,
         data: action.data,
         registrations: action.registrations,
         success: true,
+        hasLoaded: true,
       };
     case types.LOADEVENTFAILURE:
       return {
         ...state,
         success: false,
+        hasLoaded: true,
       };
     default:
       return state;

app/reducers/profile.js

@@ -14,20 +14,28 @@ const initialState = {
     achievements: [],
   },
   success: false,
+  hasLoaded: false,
 };
 
 export default function profile(state = initialState, action = {}) {
   switch (action.type) {
+    case types.LOADPROFILESTART:
+      return {
+        ...state,
+        hasLoaded: false,
+      };
     case types.LOADPROFILESUCCESS:
       return {
         ...state,
         profile: action.profile,
         success: true,
+        hasLoaded: true,
       };
     case types.LOADPROFILEFAILURE:
       return {
         ...state,
         success: false,
+        hasLoaded: true,
       };
     default:
       return state;