Refactor welcome actions to use saga

app/actions/welcome.js

-import { apiUrl } from '../url';
-import * as types from './actionTypes';
+export const WELCOME = 'WELCOME_WELCOME';
+export const SUCCESS = 'WELCOME_SUCCESS';
+export const FAILURE = 'WELCOME_FAILURE';
 
-export function welcome(eventList) {
+export function welcome(amount, token) {
   return {
-    type: types.WELCOME,
-    eventList,
+    type: WELCOME,
+    payload: { amount, token },
   };
 }
 
-export function retrieveShortlist(token, amount) {
-  return (dispatch) => {
-    const data = {
-      method: 'GET',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        Authorization: `Token ${token}`,
-      },
-    };
-
-    return fetch(`${apiUrl}/events/?limit=${amount}&ordering=start`, data)
-      .then(
-        response => response.json(),
-      )
-      .then(
-        responseJson => dispatch(welcome(responseJson.results)),
-      )
-      .catch(
-        () => dispatch(welcome([])),
-      );
+export function success(eventList) {
+  return {
+    type: SUCCESS,
+    payload: { eventList },
   };
 }
+
+export function failure() {
+  return { type: FAILURE };
+}

app/components/Welcome.js

@@ -7,7 +7,7 @@ import 'moment/locale/nl';
 import EventDetailCard from './EventDetailCard';
 import LoadingScreen from './LoadingScreen';
 
-import { retrieveShortlist } from '../actions/welcome';
+import * as welcomeActions from '../actions/welcome';
 import { navigate } from '../actions/navigation';
 import styles from './style/welcome';
 
@@ -133,7 +133,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  retrieveShortlist: (token, amount) => dispatch(retrieveShortlist(token, amount)),
+  retrieveShortlist: (token, amount) => dispatch(welcomeActions.welcome(amount, token)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Welcome);

app/reducers/welcome.js

-import * as types from '../actions/actionTypes';
+import * as welcomeActions from '../actions/welcome';
 
 const initialState = {
   eventList: [],
@@ -7,9 +7,9 @@ const initialState = {
 
 export default function welcome(state = initialState, action = {}) {
   switch (action.type) {
-    case types.WELCOME:
+    case welcomeActions.SUCCESS:
       return {
-        eventList: action.eventList,
+        eventList: action.payload.eventList,
         hasLoaded: true,
       };
     default:

app/sagas/index.js

@@ -3,12 +3,14 @@ import { all, fork } from 'redux-saga/effects';
 import loginSaga from './login';
 import eventSaga from './event';
 import profileSaga from './profile';
+import welcomeSaga from './welcome';
 
 const sagas = function* sagas() {
   yield all([
     fork(loginSaga),
     fork(eventSaga),
     fork(profileSaga),
+    fork(welcomeSaga),
   ]);
 };
 

app/sagas/welcome.js

+import { call, put, takeEvery } from 'redux-saga/effects';
+
+import { apiRequest } from '../url';
+import * as welcomeActions from '../actions/welcome';
+
+const welcome = function* welcome(action) {
+  const { token, amount } = action.payload;
+
+  const data = {
+    method: 'GET',
+    headers: {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: `Token ${token}`,
+    },
+  };
+
+  const params = {
+    limit: amount,
+    ordering: 'start',
+  };
+
+  try {
+    const response = yield call(apiRequest, 'events', data, params);
+    yield put(welcomeActions.success(response));
+  } catch (error) {
+    yield put(welcomeActions.failure());
+  }
+};
+
+const welcomeSaga = function* eventSaga() {
+  yield takeEvery(welcomeActions.WELCOME, welcome);
+};
+
+export default welcomeSaga;