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

Added loading indicator to Profile and Event

parent 0c0e52bd
......@@ -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';
......@@ -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())
);
};
}
......@@ -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()),
);
};
}
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>
......
......@@ -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);
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;
......@@ -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 => ({
......
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>
......
......@@ -37,11 +37,6 @@ const styles = StyleSheet.create({
paddingBottom: 12,
paddingLeft: 16,
},
indicatorView: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
export default styles;
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
indicatorView: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
export default styles;
......@@ -28,11 +28,6 @@ const styles = StyleSheet.create({
fontSize: 14,
color: colors.darkMagenta,
},
indicatorView: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
export default styles;
......@@ -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;
......
......@@ -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;
......
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