Change authInfo to use redux-thunk

src/ducks/Auth.duck.js

@@ -1,8 +1,4 @@
-/* eslint-disable no-constant-condition */
-/**
- * Authentication duck.
- */
-import { call, put, take, cancel, fork, takeLatest } from 'redux-saga/effects';
+import { call, put, take, cancel, fork } from 'redux-saga/effects';
 
 const authenticated = authInfo => authInfo.grantType === 'refresh_token';
 
@@ -38,7 +34,8 @@ export default function reducer(state = initialState, action = {}) {
     case AUTH_INFO_SUCCESS:
       return { ...state, authInfoLoaded: true, isAuthenticated: authenticated(payload) };
     case AUTH_INFO_ERROR:
-      return { ...state, authInfoError: payload };
+      console.error(payload); // eslint-disable-line
+      return { ...state, authInfoLoaded: true, authInfoError: payload };
 
     case LOGIN_REQUEST:
       return { ...state, loginError: null, logoutError: null };
@@ -60,7 +57,7 @@ export default function reducer(state = initialState, action = {}) {
 
 // ================ Action creators ================ //
 
-export const authInfo = () => ({ type: AUTH_INFO_REQUEST });
+export const authInfoRequest = () => ({ type: AUTH_INFO_REQUEST });
 export const authInfoSuccess = info => ({ type: AUTH_INFO_SUCCESS, payload: info });
 export const authInfoError = error => ({ type: AUTH_INFO_ERROR, payload: error, error: true });
 
@@ -77,15 +74,6 @@ export const logoutError = error => ({ type: LOGOUT_ERROR, payload: error, error
 
 // ================ Worker sagas ================ //
 
-export function* callAuthInfo(sdk) {
-  try {
-    const info = yield call(sdk.authInfo);
-    yield put(authInfoSuccess(info));
-  } catch (e) {
-    yield put(authInfoError(e));
-  }
-}
-
 export function* callLogin(action, sdk) {
   const { payload } = action;
   const { username, password } = payload;
@@ -111,10 +99,6 @@ export function* callLogout(action, sdk) {
 
 // ================ Watcher sagas ================ //
 
-export function* watchAuthInfo(sdk) {
-  yield takeLatest(AUTH_INFO_REQUEST, callAuthInfo, sdk);
-}
-
 export function* watchAuth(sdk) {
   let task;
 
@@ -136,3 +120,14 @@ export function* watchAuth(sdk) {
     }
   }
 }
+
+// ================ Thunks ================ //
+
+export const authInfo = () =>
+  (dispatch, getState, sdk) => {
+    dispatch(authInfoRequest());
+    return sdk
+      .authInfo()
+      .then(info => dispatch(authInfoSuccess(info)))
+      .catch(e => dispatch(authInfoError(e)));
+  };

src/index.js

@@ -33,21 +33,19 @@ import routeConfiguration from './routesConfiguration';
 
 import './index.css';
 
-const renderWithAuthInfo = store => {
-  ReactDOM.render(<ClientApp store={store} />, document.getElementById('root'));
-};
-
-// Wait for the store to have the Auth.authInfoLoaded flag, render the
-// application when the auth information is present.
-const renderWhenAuthInfoLoaded = store => {
-  const unsubscribe = store.subscribe(() => {
-    const authInfoLoaded = store.getState().Auth.authInfoLoaded;
-    if (authInfoLoaded) {
-      unsubscribe();
-      renderWithAuthInfo(store);
-    }
-  });
-  store.dispatch(authInfo());
+const render = store => {
+  // If the server already loaded the auth information, render the app
+  // immediately. Otherwise wait for the flag to be loaded and render
+  // when auth information is present.
+  const authInfoLoaded = store.getState().Auth.authInfoLoaded;
+  const info = authInfoLoaded ? Promise.resolve({}) : store.dispatch(authInfo());
+  info
+    .then(() => {
+      ReactDOM.render(<ClientApp store={store} />, document.getElementById('root'));
+    })
+    .catch(e => {
+      console.error(e); // eslint-disable-line
+    });
 };
 
 const setupStripe = () => {
@@ -67,19 +65,8 @@ if (typeof window !== 'undefined') {
   const store = configureStore(sdk, initialState);
 
   store.runSaga(createRootSaga(sdk));
-
   setupStripe();
-
-  const authInfoLoaded = store.getState().Auth.authInfoLoaded;
-
-  // If the server already loaded the auth information, render the app
-  // immediately. Otherwise wait for the flag to be loaded and render
-  // when auth information is present.
-  if (authInfoLoaded) {
-    renderWithAuthInfo(store);
-  } else {
-    renderWhenAuthInfoLoaded(store);
-  }
+  render(store);
 
   // Expose stuff for the browser REPL
   const actions = bindActionCreators(

src/sagas.js

@@ -1,9 +1,9 @@
-import { watchAuthInfo, watchAuth } from './ducks/Auth.duck';
+import { watchAuth } from './ducks/Auth.duck';
 import { watchSdk } from './ducks/sdk.duck';
 
 const createRootSaga = sdk =>
   function* rootSaga() {
-    yield [watchAuthInfo(sdk), watchAuth(sdk), watchSdk(sdk)];
+    yield [watchAuth(sdk), watchSdk(sdk)];
   };
 
 export default createRootSaga;