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