diff --git a/app/actions/calendar.js b/app/actions/calendar.js
index c9b660d3f962a732657472743a196e80e9ed9df0..779a5b57516c25975d0c83a2e76d3526132c510c 100644
--- a/app/actions/calendar.js
+++ b/app/actions/calendar.js
@@ -1,34 +1,20 @@
-import * as types from './actionTypes';
-import { apiUrl } from '../url';
+export const REFRESH = 'CALENDAR_REFRESH';
+export const SUCCESS = 'CALENDAR_SUCCESS';
+export const FAILURE = 'CALENDAR_FAILURE';
-export function calendarRetrieved(eventList) {
+export function refresh() {
return {
- type: types.CALENDARRETREIVED,
- eventList,
+ type: REFRESH,
};
}
-export function calendarNotRetrieved() {
+export function success(eventList) {
return {
- type: types.CALENDARERROR,
+ type: SUCCESS,
+ payload: { eventList },
};
}
-export function retrieveCalendar(token) {
- return (dispatch) => {
- const data = {
- method: 'GET',
- headers: {
- Accept: 'application/json',
- 'Content-Type': 'application/json',
- Authorization: `Token ${token}`,
- },
- };
- return fetch(`${apiUrl}/events/`, data)
- .then(
- response => response.json())
- .then(
- responseJson => dispatch(calendarRetrieved(responseJson)))
- .catch(() => dispatch(calendarNotRetrieved()));
- };
+export function failure() {
+ return { type: FAILURE };
}
diff --git a/app/components/Calendar.js b/app/components/Calendar.js
index 58cf1a62bd5f27ce210fd524a57b086266afd078..eee21d5fbc712d3f1840066b32e54a8c8548d650 100644
--- a/app/components/Calendar.js
+++ b/app/components/Calendar.js
@@ -5,9 +5,8 @@ import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
-import * as actions from '../actions/calendar';
+import * as calendarActions from '../actions/calendar';
import EventCard from './EventCard';
-import LoadingScreen from './LoadingScreen';
import styles from './style/calendar';
@@ -115,28 +114,16 @@ const renderItem = (item) => {
};
class Calendar extends Component {
- constructor(props) {
- super(props);
- this.state = {
- refreshing: false,
- };
- }
-
componentDidMount() {
Moment.locale('nl');
}
handleRefresh = () => {
- this.setState({ refreshing: true });
- this.props.retrieveCalendar(this.props.token)
- .then(() => this.setState({ refreshing: false }));
+ this.props.refresh();
};
render() {
- if (!this.props.calendarFetched) {
- this.props.retrieveCalendar(this.props.token);
- return ;
- } else if (this.props.eventList.length === 0) {
+ if (this.props.eventList.length === 0 && !this.props.loading) {
return (
@@ -157,7 +144,7 @@ class Calendar extends Component {
keyExtractor={item => item.dayNumber}
stickySectionHeadersEnabled
onRefresh={this.handleRefresh}
- refreshing={this.state.refreshing}
+ refreshing={this.props.loading}
/>
);
@@ -176,18 +163,17 @@ Calendar.propTypes = {
registered: PropTypes.bool,
pizza: PropTypes.bool,
})).isRequired,
- calendarFetched: PropTypes.bool.isRequired,
- retrieveCalendar: PropTypes.func.isRequired,
- token: PropTypes.string.isRequired,
+ loading: PropTypes.bool.isRequired,
+ refresh: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
- ...state.calendar,
- token: state.session.token,
+ eventList: state.calendar.eventList,
+ loading: state.calendar.loading,
});
const mapDispatchToProps = dispatch => ({
- retrieveCalendar: token => dispatch(actions.retrieveCalendar(token)),
+ refresh: () => dispatch(calendarActions.refresh()),
});
export default connect(mapStateToProps, mapDispatchToProps)(Calendar);
diff --git a/app/reducers/calendar.js b/app/reducers/calendar.js
index aab8902bd323fea52bb15da60453560d96723722..e9cda03c0d0dfb068f6adfd1aa0467c58a965f4a 100644
--- a/app/reducers/calendar.js
+++ b/app/reducers/calendar.js
@@ -1,16 +1,21 @@
-import * as types from '../actions/actionTypes';
+import * as calendarActions from '../actions/calendar';
const initialState = {
eventList: [],
- calendarFetched: false,
+ loading: true,
};
export default function calendar(state = initialState, action = {}) {
switch (action.type) {
- case types.CALENDARRETREIVED:
- return { ...state, eventList: action.eventList, calendarFetched: true };
- case types.CALENDARERROR:
- return { ...state, calendarFetched: true };
+ case calendarActions.SUCCESS:
+ return {
+ eventList: action.payload.eventList,
+ loading: false,
+ };
+ case calendarActions.FAILURE:
+ return { ...state, loading: false };
+ case calendarActions.REFRESH:
+ return { ...state, loading: true };
default:
return { ...state };
}
diff --git a/app/sagas/calendar.js b/app/sagas/calendar.js
new file mode 100644
index 0000000000000000000000000000000000000000..835c59ca08ca596109efdc0bbd1c6a13e7e91d69
--- /dev/null
+++ b/app/sagas/calendar.js
@@ -0,0 +1,33 @@
+import { call, put, select, takeEvery } from 'redux-saga/effects';
+
+import { apiRequest, tokenSelector } from '../url';
+import * as types from '../actions/actionTypes';
+import * as calendarActions from '../actions/calendar';
+
+const calendar = function* calendar() {
+ const token = yield select(tokenSelector);
+ const data = {
+ method: 'GET',
+ headers: {
+ Accept: 'application/json',
+ 'Content-Type': 'application/json',
+ Authorization: `Token ${token}`,
+ },
+ };
+
+ try {
+ const events = yield call(apiRequest, 'events', data);
+ yield put(calendarActions.success(events));
+ } catch (error) {
+ yield put(calendarActions.failure());
+ }
+};
+
+const calendarSaga = function* eventSaga() {
+ yield takeEvery([
+ calendarActions.REFRESH,
+ action => action.type === types.NAVIGATE && action.scene === 'eventList',
+ ], calendar);
+};
+
+export default calendarSaga;
diff --git a/app/sagas/index.js b/app/sagas/index.js
index 0c8be154c0df5d8a4cc05c80c6e49b94734fd35a..a38297cfef2fc5a6317e96a52f41051e912d8acb 100644
--- a/app/sagas/index.js
+++ b/app/sagas/index.js
@@ -4,6 +4,7 @@ import loginSaga from './login';
import eventSaga from './event';
import profileSaga from './profile';
import welcomeSaga from './welcome';
+import calendarSaga from './calendar';
const sagas = function* sagas() {
yield all([
@@ -11,6 +12,7 @@ const sagas = function* sagas() {
fork(eventSaga),
fork(profileSaga),
fork(welcomeSaga),
+ fork(calendarSaga),
]);
};