Handle navigation and redirect from sagas

Author: soupette

login-react/react-login-front-end-app/app/containers/AuthPage/actions.js

@@ -8,7 +8,6 @@ import {
   ON_CHANGE,
   SET_FORM,
   SUBMIT,
-  SUBMIT_SUCCEEDED,
 } from './constants';
 
 /**
@@ -87,9 +86,3 @@ export function submit() {
     type: SUBMIT,
   };
 }
-
-export function submitSucceeded() {
-  return {
-    type: SUBMIT_SUCCEEDED,
-  };
-}

login-react/react-login-front-end-app/app/containers/AuthPage/constants.js

@@ -7,4 +7,3 @@
 export const ON_CHANGE = 'app/AuthPage/ON_CHANGE';
 export const SET_FORM = 'app/AuthPage/SET_FORM';
 export const SUBMIT = 'app/AuthPage/SUBMIT';
-export const SUBMIT_SUCCEEDED = 'app/AuthPage/SUBMIT_SUCCEEDED';

login-react/react-login-front-end-app/app/containers/AuthPage/index.js

@@ -37,19 +37,6 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
     if (nextProps.match.params.authType !== this.props.match.params.authType) {
       this.setForm(nextProps);
     }
-
-    // Redirect the user to HomePage after login
-    if (nextProps.submitSuccess) {
-      switch (this.props.match.params.authType) {
-        case 'login':
-        case 'reset-password':
-        case 'register':
-          this.props.history.push('/');
-          break;
-        default:
-          // Do nothing
-      }
-    }
   }
 
   /**

login-react/react-login-front-end-app/app/containers/AuthPage/reducer.js

@@ -8,13 +8,11 @@ import { fromJS, Map } from 'immutable';
 import {
   ON_CHANGE,
   SET_FORM,
-  SUBMIT_SUCCEEDED,
 } from './constants';
 
 const initialState = fromJS({
   formType: 'login',
   modifiedData: Map({}),
-  submitSuccess: false,
 });
 
 function authPageReducer(state = initialState, action) {
@@ -26,9 +24,6 @@ function authPageReducer(state = initialState, action) {
         .set('formType', action.formType)
         .set('submitSuccess', false)
         .set('modifiedData', Map(action.data));
-    case SUBMIT_SUCCEEDED:
-      return state
-        .update('submitSuccess', (v) => !v);
     default:
       return state;
   }

login-react/react-login-front-end-app/app/containers/AuthPage/saga.js

@@ -1,12 +1,13 @@
+import { LOCATION_CHANGE } from 'react-router-redux';
+import { all, call, fork, takeLatest, select, take, cancel } from 'redux-saga/effects';
 import { set } from 'lodash';
-import { call, fork, takeLatest, put, select } from 'redux-saga/effects';
+import { history } from 'app';
 
 // Utils
 import auth from 'utils/auth';
 import request from 'utils/request';
 
 import { makeSelectFormType, makeSelectModifiedData } from './selectors';
-import { submitSucceeded } from './actions';
 import { SUBMIT } from './constants';
 
 export function* submitForm() {
@@ -37,15 +38,27 @@ export function* submitForm() {
 
     if (response.jwt) {
       // Set the user's credentials
-      yield call(auth.setToken, response.jwt, body.rememberMe);
-      yield call(auth.setUserInfo, response.user, body.rememberMe);
+      yield all([
+        call(auth.setToken, response.jwt, body.rememberMe),
+        call(auth.setUserInfo, response.user, body.rememberMe),
+      ]);
+      yield call(forwardTo, '/');
     }
-    yield put(submitSucceeded());
   } catch(error) {
     console.log(error.response.payload.message);
   }
 }
 
 export default function* defaultSaga() {
-  yield fork(takeLatest, SUBMIT, submitForm);
+  const submitWatcher = yield fork(takeLatest, SUBMIT, submitForm);
+  yield take(LOCATION_CHANGE);
+  yield cancel(submitWatcher);
+}
+
+/**
+ * Helper to handle navigation from sagas.
+ * @param  {Sting} location The path to navigate
+ */
+function forwardTo(location) {
+  history.push(location);
 }

login-react/react-login-front-end-app/app/containers/ConnectPage/index.js

@@ -25,7 +25,6 @@ export class ConnectPage extends React.Component { // eslint-disable-line react/
     this.props.logUser(match.params.provider, location.search);
   }
   render() {
-    console.log(this.props);
     return (
       <div>
         Retrieving your token and checking validity
@@ -35,7 +34,7 @@ export class ConnectPage extends React.Component { // eslint-disable-line react/
 }
 
 ConnectPage.propTypes = {
-  // dispatch: PropTypes.func.isRequired,
+  logUser: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = createStructuredSelector({

login-react/react-login-front-end-app/app/containers/ConnectPage/saga.js

@@ -1,8 +1,19 @@
-import { take, call, put, select, takeLatest, fork, cancel } from 'redux-saga/effects';
+import {
+  all,
+  call,
+  cancel,
+  fork,
+  take,
+  takeLatest,
+} from 'redux-saga/effects';
 import { LOCATION_CHANGE } from 'react-router-redux';
 import { history } from 'app';
+
+// Utils
 import auth from 'utils/auth';
 import request from 'utils/request';
+
+// Constants
 import { LOG_USER } from './constants';
 
 export function* login(action) {
@@ -12,8 +23,10 @@ export function* login(action) {
 
     if (response.jwt) {
       // Set the user's credentials
-      yield call(auth.setToken, response.jwt, true);
-      yield call(auth.setUserInfo, response.user, true);
+      yield all([
+        call(auth.setToken, response.jwt, true),
+        call(auth.setUserInfo, response.user, true),
+      ]);
       yield call(forwardTo, '/');
     }
 
@@ -26,9 +39,13 @@ export function* login(action) {
 export default function* defaultSaga() {
   const loginWatcher = yield fork(takeLatest, LOG_USER, login);
   yield take(LOCATION_CHANGE);
-  yield cancel(loginWatcher)
+  yield cancel(loginWatcher);
 }
 
-function forwardTo (location) {
+/**
+ * Helper to handle navigation from sagas.
+ * @param  {Sting} location The path to navigate
+ */
+function forwardTo(location) {
   history.push(location)
 }