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), ]); };