Refactor calendar actions to use saga

app/actions/calendar.js

-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 };
 }

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 <LoadingScreen />;
-    } else if (this.props.eventList.length === 0) {
+    if (this.props.eventList.length === 0 && !this.props.loading) {
       return (
         <View>
           <Text>
@@ -157,7 +144,7 @@ class Calendar extends Component {
           keyExtractor={item => item.dayNumber}
           stickySectionHeadersEnabled
           onRefresh={this.handleRefresh}
-          refreshing={this.state.refreshing}
+          refreshing={this.props.loading}
         />
       </View>
     );
@@ -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);

app/reducers/calendar.js

-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 };
   }

app/sagas/calendar.js

+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;

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