Commit c22cc3d8 authored by Wietse Kuipers's avatar Wietse Kuipers
Browse files

Merge branch 'calendar-saga-refactor' into 'master'

Refactor calendar actions to use saga

See merge request !64
parents 96d528eb 9ffb5d66
import * as types from './actionTypes'; export const REFRESH = 'CALENDAR_REFRESH';
import { apiUrl } from '../url'; export const SUCCESS = 'CALENDAR_SUCCESS';
export const FAILURE = 'CALENDAR_FAILURE';
export function calendarRetrieved(eventList) { export function refresh() {
return { return {
type: types.CALENDARRETREIVED, type: REFRESH,
eventList,
}; };
} }
export function calendarNotRetrieved() { export function success(eventList) {
return { return {
type: types.CALENDARERROR, type: SUCCESS,
payload: { eventList },
}; };
} }
export function retrieveCalendar(token) { export function failure() {
return (dispatch) => { return { type: FAILURE };
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()));
};
} }
...@@ -5,9 +5,8 @@ import { connect } from 'react-redux'; ...@@ -5,9 +5,8 @@ import { connect } from 'react-redux';
import Moment from 'moment'; import Moment from 'moment';
import 'moment/locale/nl'; import 'moment/locale/nl';
import * as actions from '../actions/calendar'; import * as calendarActions from '../actions/calendar';
import EventCard from './EventCard'; import EventCard from './EventCard';
import LoadingScreen from './LoadingScreen';
import styles from './style/calendar'; import styles from './style/calendar';
...@@ -115,28 +114,16 @@ const renderItem = (item) => { ...@@ -115,28 +114,16 @@ const renderItem = (item) => {
}; };
class Calendar extends Component { class Calendar extends Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
};
}
componentDidMount() { componentDidMount() {
Moment.locale('nl'); Moment.locale('nl');
} }
handleRefresh = () => { handleRefresh = () => {
this.setState({ refreshing: true }); this.props.refresh();
this.props.retrieveCalendar(this.props.token)
.then(() => this.setState({ refreshing: false }));
}; };
render() { render() {
if (!this.props.calendarFetched) { if (this.props.eventList.length === 0 && !this.props.loading) {
this.props.retrieveCalendar(this.props.token);
return <LoadingScreen />;
} else if (this.props.eventList.length === 0) {
return ( return (
<View> <View>
<Text> <Text>
...@@ -157,7 +144,7 @@ class Calendar extends Component { ...@@ -157,7 +144,7 @@ class Calendar extends Component {
keyExtractor={item => item.dayNumber} keyExtractor={item => item.dayNumber}
stickySectionHeadersEnabled stickySectionHeadersEnabled
onRefresh={this.handleRefresh} onRefresh={this.handleRefresh}
refreshing={this.state.refreshing} refreshing={this.props.loading}
/> />
</View> </View>
); );
...@@ -176,18 +163,17 @@ Calendar.propTypes = { ...@@ -176,18 +163,17 @@ Calendar.propTypes = {
registered: PropTypes.bool, registered: PropTypes.bool,
pizza: PropTypes.bool, pizza: PropTypes.bool,
})).isRequired, })).isRequired,
calendarFetched: PropTypes.bool.isRequired, loading: PropTypes.bool.isRequired,
retrieveCalendar: PropTypes.func.isRequired, refresh: PropTypes.func.isRequired,
token: PropTypes.string.isRequired,
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
...state.calendar, eventList: state.calendar.eventList,
token: state.session.token, loading: state.calendar.loading,
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
retrieveCalendar: token => dispatch(actions.retrieveCalendar(token)), refresh: () => dispatch(calendarActions.refresh()),
}); });
export default connect(mapStateToProps, mapDispatchToProps)(Calendar); export default connect(mapStateToProps, mapDispatchToProps)(Calendar);
import * as types from '../actions/actionTypes'; import * as calendarActions from '../actions/calendar';
const initialState = { const initialState = {
eventList: [], eventList: [],
calendarFetched: false, loading: true,
}; };
export default function calendar(state = initialState, action = {}) { export default function calendar(state = initialState, action = {}) {
switch (action.type) { switch (action.type) {
case types.CALENDARRETREIVED: case calendarActions.SUCCESS:
return { ...state, eventList: action.eventList, calendarFetched: true }; return {
case types.CALENDARERROR: eventList: action.payload.eventList,
return { ...state, calendarFetched: true }; loading: false,
};
case calendarActions.FAILURE:
return { ...state, loading: false };
case calendarActions.REFRESH:
return { ...state, loading: true };
default: default:
return { ...state }; return { ...state };
} }
......
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;
...@@ -4,6 +4,7 @@ import loginSaga from './login'; ...@@ -4,6 +4,7 @@ import loginSaga from './login';
import eventSaga from './event'; import eventSaga from './event';
import profileSaga from './profile'; import profileSaga from './profile';
import welcomeSaga from './welcome'; import welcomeSaga from './welcome';
import calendarSaga from './calendar';
const sagas = function* sagas() { const sagas = function* sagas() {
yield all([ yield all([
...@@ -11,6 +12,7 @@ const sagas = function* sagas() { ...@@ -11,6 +12,7 @@ const sagas = function* sagas() {
fork(eventSaga), fork(eventSaga),
fork(profileSaga), fork(profileSaga),
fork(welcomeSaga), fork(welcomeSaga),
fork(calendarSaga),
]); ]);
}; };
......
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