Merge pull request #9 from GoThinkster/gh-5

New approach for handling race condition in #5

Author: vkarpov15

bin/main.js

@@ -9,14 +9,18 @@ const store = require('../store');
 class ProfileFavorites extends Profile {
   componentWillMount() {
     store.dispatch({
-      type: 'PROFILE_PAGE_LOADED',
+      type: 'PROFILE_FAVORITES_PAGE_LOADED',
       payload: Promise.all([
         agent.Profile.get(this.props.params.username),
         agent.Articles.favoritedBy(this.props.params.username)
       ])
     });
   }
 
+  componentWillUnmount() {
+    store.dispatch({ type: 'PROFILE_FAVORITES_PAGE_UNLOADED' });
+  }
+
   renderTabs() {
     return (
       <ul className="nav nav-pills outline-active">

src/components/ProfileFavorites.js

@@ -41,7 +41,8 @@ class App extends React.Component {
     store.dispatch({
       type: 'APP_LOAD',
       token: token,
-      payload: token ? agent.Auth.current() : null
+      payload: token ? agent.Auth.current() : null,
+      skipTracking: true
     });
   }
 

src/index.js

@@ -4,23 +4,41 @@ const agent = require('./agent');
 
 exports.promiseMiddleware = store => next => action => {
   if (isPromise(action.payload)) {
-    store.dispatch({ type: 'ASYNC_START', subtype: action.type });
+    let cancelled = false;
+    if (!action.skipTracking) {
+      store.dispatch({
+        type: 'ASYNC_START',
+        subtype: action.type,
+        promise: action.payload,
+        cancel: () => { cancelled = true; }
+      });
+    }
     action.payload.then(
       res => {
+        if (cancelled) {
+          return;
+        }
         console.log('RESULT', res);
         action.payload = res;
+        if (!action.skipTracking) {
+          store.dispatch({ type: 'ASYNC_END', promise: action.payload });
+        }
         store.dispatch(action);
       },
       error => {
+        if (cancelled) {
+          return;
+        }
         console.log('ERROR', error);
         action.error = true;
         action.payload = error.response.body;
+        if (!action.skipTracking) {
+          store.dispatch({ type: 'ASYNC_END', promise: action.payload });
+        }
         store.dispatch(action);
       }
     );
 
-    store.dispatch({ type: 'LOADING' });
-
     return;
   }
 

src/middleware.js

@@ -5,11 +5,13 @@ const auth = require('./reducers/auth');
 const editor = require('./reducers/editor');
 const home = require('./reducers/home');
 const profile = require('./reducers/profile');
+const profileFavorites = require('./reducers/profileFavorites');
 const settings = require('./reducers/settings');
 
 const defaultState = {
   appName: 'Conduit',
-  token: null
+  token: null,
+  viewChangeCounter: 0
 };
 
 module.exports = (state = defaultState, action) => {
@@ -18,6 +20,7 @@ module.exports = (state = defaultState, action) => {
   state = editor(state, action);
   state = home(state, action);
   state = profile(state, action);
+  state = profileFavorites(state, action);
   state = settings(state, action);
   switch (action.type) {
     case 'APP_LOAD':
@@ -46,11 +49,15 @@ module.exports = (state = defaultState, action) => {
       state = Object.assign({}, state, { redirectTo: '/' });
       break;
     case 'ARTICLE_PAGE_UNLOADED':
-      state = Object.assign({}, state);
-      delete state.article;
-      delete state.comments;
-      delete state.commentErrors;
-      break;
+      if (state.outstandingActions) {
+        state.outstandingActions.forEach(promise => promise.cancel());
+      }
+      return Object.assign({}, state, {
+        article: null,
+        comments: null,
+        commentErrors: null,
+        outstandingActions: null
+      });
     case 'ADD_TAG':
       state = Object.assign({}, state);
       state.tagList.push(state.tagInput);
@@ -77,6 +84,18 @@ module.exports = (state = defaultState, action) => {
       const filter = comment => comment.id !== action.commentId;
       state.comments = _.filter(state.comments, filter);
       break;
+    case 'ASYNC_START':
+      const promise = Object.assign(action.promise, { cancel: action.cancel })
+      return Object.assign({}, state, {
+        outstandingActions: (state.outstandingActions || []).concat([promise])
+      });
+    case 'ASYNC_END':
+      if (state.outstandingActions) {
+        const filter = p => p !== action.promise;
+        return Object.assign({}, state, {
+          outstandingActions: state.outstandingActions.filter(filter)
+        });
+      }
   }
 
   return state;

src/reducer.js

@@ -16,12 +16,17 @@ module.exports = (state, action) => {
       break;
     case 'LOGIN_PAGE_UNLOADED':
     case 'REGISTER_PAGE_UNLOADED':
-      state = Object.assign({}, state);
-      const props = ['errors', 'username', 'email', 'password', 'inProgress']
-      for (const key of props) {
-        delete state[key];
+      if (state.outstandingActions) {
+        state.outstandingActions.forEach(promise => promise.cancel());
       }
-      break;
+      return Object.assign({}, state, {
+        errors: null,
+        username: null,
+        email: null,
+        password: null,
+        inProgress: null,
+        outstandingActions: null
+      });
     case 'ASYNC_START':
       if (action.subtype === 'LOGIN' || action.subtype === 'REGISTER') {
         state = Object.assign({}, state);

src/reducers/auth.js

@@ -23,21 +23,20 @@ module.exports = (state, action) => {
       }
       break;
     case 'EDITOR_PAGE_UNLOADED':
-      state = Object.assign({}, state);
-      const keys = [
-        'title',
-        'description',
-        'body',
-        'tagInput',
-        'tagList',
-        'errors',
-        'articleSlug',
-        'inProgress'
-      ];
-      for (const key of keys) {
-        delete state[key];
+      if (state.outstandingActions) {
+        state.outstandingActions.forEach(promise => promise.cancel());
       }
-      break;
+      return Object.assign({}, state, {
+        title: null,
+        description: null,
+        body: null,
+        tagInput: null,
+        tagList: null,
+        errors: null,
+        articleSlug: null,
+        inProgress: null,
+        outstandingActions: null
+      });
     case 'ARTICLE_SUBMITTED':
       state = Object.assign({}, state);
       state.inProgress = null;

src/reducers/editor.js

@@ -12,13 +12,17 @@ module.exports = (state, action) => {
       });
       break;
     case 'HOME_PAGE_UNLOADED':
-      state = Object.assign({}, state);
-      delete state.articles;
-      delete state.tags;
-      delete state.tab;
-      delete state.articlesCount;
-      delete state.currentPage;
-      break;
+      if (state.outstandingActions) {
+        state.outstandingActions.forEach(promise => promise.cancel());
+      }
+      return Object.assign({}, state, {
+        articles: null,
+        tags: null,
+        tab: null,
+        articlesCount: null,
+        currentPage: null,
+        outstandingActions: null
+      });
     case 'CHANGE_TAB':
       state = Object.assign({}, state, {
         articles: action.payload.articles,

src/reducers/home.js

@@ -11,12 +11,16 @@ module.exports = (state = defaultState, action) => {
       });
       break;
     case 'PROFILE_PAGE_UNLOADED':
-      state = Object.assign({}, state);
-      delete state.profile;
-      delete state.articles;
-      delete state.articlesCount;
-      delete state.currentPage;
-      break;
+      if (state.outstandingActions) {
+        state.outstandingActions.forEach(promise => promise.cancel());
+      }
+      return Object.assign({}, state, {
+        profile: null,
+        articles: null,
+        articlesCount: null,
+        currentPage: null,
+        outstandingActions: null
+      });
     case 'FOLLOW_USER':
     case 'UNFOLLOW_USER':
       state = Object.assign({}, state, {

src/reducers/profile.js

@@ -0,0 +1,15 @@
+'use strict';
+
+module.exports = (state = defaultState, action) => {
+  switch (action.type) {
+    case 'PROFILE_FAVORITES_PAGE_UNLOADED':
+      if (state.outstandingActions) {
+        state.outstandingActions.forEach(promise => promise.cancel());
+      }
+      return Object.assign({}, state, {
+        outstandingActions: null
+      });
+  }
+
+  return state;
+};

src/reducers/profileFavorites.js

@@ -13,11 +13,14 @@ module.exports = (state, action) => {
       }
       break;
     case 'SETTINGS_PAGE_UNLOADED':
-      state = Object.assign({}, state);
-      for (const key of ['errors', 'inProgress']) {
-        delete state[key];
+      if (state.outstandingActions) {
+        state.outstandingActions.forEach(promise => promise.cancel());
       }
-      break;
+      return Object.assign({}, state, {
+        errors: null,
+        inProgress: null,
+        outstandingActions: null
+      });
     case 'ASYNC_START':
       if (action.subtype === 'SETTINGS_SAVED') {
         state = Object.assign({}, state, { inProgress: true });