Refs #2210: add isFetching in state for loader toggling

Signed-off-by: Thomas Shawarma Haddad <thomas.haddad@af83.com>

6 files changed, 39 insertions, 5 deletions

diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
index 1ad2bb48f..f56956b31 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
@@ -27,10 +27,11 @@ const actions = {
     id : e.currentTarget.id,
     index
   }),
-  checkConfirmModal : (event, callback, stateChanged) => {
+  checkConfirmModal : (event, callback, stateChanged,dispatch) => {
     if(stateChanged === true){
       return actions.openConfirmModal(callback)
     }else{
+      dispatch(actions.fetchingApi())
       return callback
     }
   },
@@ -70,6 +71,9 @@ const actions = {
     type: 'UPDATE_TOTAL_COUNT',
     diff
   }),
+  fetchingApi: () =>({
+      type: 'FETCH_API'
+  }),
   resetValidation: (target) => {
     $(target).parent().removeClass('has-error').children('.help-block').remove()
   },
@@ -95,6 +99,7 @@ const actions = {
     }
   },
   submitJourneyPattern : (dispatch, state, next) => {
+    dispatch(actions.fetchingApi())
     let urlJSON = window.location.pathname + ".json"
     let req = new Request(urlJSON, {
       credentials: 'same-origin',
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
index 43c3af219..4d58680cd 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
@@ -15,7 +15,7 @@ let Navigate = ({ dispatch, journeyPatterns, pagination, status }) => {
         <button
           onClick={e => {
             e.preventDefault()
-            dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged))
+            dispatch(actions.checkConfirmModal(e, actions.goToPreviousPage(dispatch, pagination), pagination.stateChanged, dispatch))
           }}
           type="submit"
           data-toggle=''
@@ -26,7 +26,7 @@ let Navigate = ({ dispatch, journeyPatterns, pagination, status }) => {
         <button
           onClick={e => {
             e.preventDefault()
-            dispatch(actions.checkConfirmModal(e, actions.goToNextPage(dispatch, pagination), pagination.stateChanged))
+            dispatch(actions.checkConfirmModal(e, actions.goToNextPage(dispatch, pagination), pagination.stateChanged, dispatch))
           }}
           type="submit"
           data-toggle=''
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js
index b78a4f49d..d66425a3a 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js
@@ -12,9 +12,11 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = (dispatch) => {
   return {
     onModalAccept: (next, state) =>{
+      dispatch(actions.fetchingApi())
       actions.submitJourneyPattern(dispatch, state, next)
     },
     onModalCancel: (next) =>{
+      dispatch(actions.fetchingApi())
       dispatch(next)
     },
     onModalClose: () =>{
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js
index 8378c855b..973fab0f9 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js
+++ b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js
@@ -4,8 +4,10 @@ const status = (state = {}, action) => {
   switch (action.type) {
     case 'UNAVAILABLE_SERVER':
       return Object.assign({}, state, {fetchSuccess: false})
+    case 'FETCH_API':
+      return Object.assign({}, state, {isFetching: true})
     case 'RECEIVE_JOURNEY_PATTERNS':
-      return Object.assign({}, state, {fetchSuccess: true})
+      return Object.assign({}, state, {fetchSuccess: true, isFetching: false})
     default:
       return state
   }
diff --git a/spec/javascripts/journey_patterns/actions_spec.js b/spec/javascripts/journey_patterns/actions_spec.js
index ef0470d2d..07f83ca1b 100644
--- a/spec/javascripts/journey_patterns/actions_spec.js
+++ b/spec/javascripts/journey_patterns/actions_spec.js
@@ -144,3 +144,11 @@ describe('when submitting new journeyPatterns', () => {
     expect(actions.updateTotalCount(diff)).toEqual(expectedAction)
   })
 })
+describe('when fetching api', () => {
+  it('should create an action to fetch api', () => {
+    const expectedAction = {
+      type: 'FETCH_API',
+    }
+    expect(actions.fetchingApi()).toEqual(expectedAction)
+  })
+})
diff --git a/spec/javascripts/journey_patterns/reducers/status_spec.js b/spec/javascripts/journey_patterns/reducers/status_spec.js
index 4eeb5c442..91cbbb0b8 100644
--- a/spec/javascripts/journey_patterns/reducers/status_spec.js
+++ b/spec/javascripts/journey_patterns/reducers/status_spec.js
@@ -2,6 +2,14 @@ var statusReducer = require('es6_browserified/journey_patterns/reducers/status')
 
 let state = {}
 
+let pagination = {
+  page : 2,
+  totalCount : 25,
+  stateChanged: false,
+  perPage: 12
+}
+const dispatch = function(){}
+
 describe('status reducer', () => {
   beforeEach(() => {
     state = {
@@ -29,6 +37,15 @@ describe('status reducer', () => {
       statusReducer(state, {
         type: 'RECEIVE_JOURNEY_PATTERNS'
       })
-    ).toEqual(Object.assign({}, state, {fetchSuccess: true}))
+    ).toEqual(Object.assign({}, state, {fetchSuccess: true, isFetching: false}))
   })
+
+  it('should handle FETCH_API', () => {
+    expect(
+      statusReducer(state, {
+        type: 'FETCH_API'
+      })
+    ).toEqual(Object.assign({}, state, {isFetching: true}))
+  })
+
 })