Merge pull request #637 from LiskHQ/619-loading-bar-issues

Fix global loading bar issues - Closes #619

src/components/loadingBar/loadingBar.css

@@ -5,3 +5,7 @@
   width: 100vw;
   z-index: 201;
 }
+
+.linear {
+  background: rgb(60, 185, 253);
+}

src/components/loadingBar/loadingBar.js

@@ -5,7 +5,7 @@ import styles from './loadingBar.css';
 const LoadingBar = props => (
   <div className={styles.fixedAtTop}>
     {props.loading && props.loading.length ?
-      <ProgressBar type="linear" mode="indeterminate" /> :
+      <ProgressBar type="linear" mode="indeterminate" theme={styles}/> :
       null
     }
   </div>

src/store/middlewares/index.js

@@ -1,13 +1,15 @@
 import metronomeMiddleware from './metronome';
 import accountMiddleware from './account';
 import loginMiddleware from './login';
+import loadingBarMiddleware from './loadingBar';
 import offlineMiddleware from './offline';
 import notificationMiddleware from './notification';
 
 export default [
   loginMiddleware,
   metronomeMiddleware,
   accountMiddleware,
+  loadingBarMiddleware,
   offlineMiddleware,
   notificationMiddleware,
 ];

src/store/middlewares/loadingBar.js

@@ -0,0 +1,20 @@
+import actionsType from '../../constants/actions';
+
+const ignoredLoadingActionKeys = ['loader/status'];
+
+const loadingBarMiddleware = () => next => (action) => {
+  switch (action.type) {
+    case actionsType.loadingStarted:
+    case actionsType.loadingFinished:
+      if (ignoredLoadingActionKeys.indexOf(action.data) === -1) {
+        next(action);
+      }
+      break;
+    default:
+      next(action);
+      break;
+  }
+};
+
+export default loadingBarMiddleware;
+

src/store/middlewares/loadingBar.test.js

@@ -0,0 +1,67 @@
+import { expect } from 'chai';
+import { spy, stub } from 'sinon';
+import middleware from './loadingBar';
+import actionType from '../../constants/actions';
+
+
+describe('LoadingBar middleware', () => {
+  let store;
+  let next;
+  const ignoredLoadingActionKeys = ['loader/status'];
+
+  beforeEach(() => {
+    store = stub();
+    store.dispatch = spy();
+    next = spy();
+  });
+
+  it('should pass the action to next middleware on some random action', () => {
+    const randomAction = {
+      type: 'TEST_ACTION',
+    };
+
+    middleware(store)(next)(randomAction);
+    expect(next).to.have.been.calledWith(randomAction);
+  });
+
+  it(`should not call next on ${actionType.loadingStarted} action if action.data == '${ignoredLoadingActionKeys[0]}'`, () => {
+    const action = {
+      type: actionType.loadingStarted,
+      data: ignoredLoadingActionKeys[0],
+    };
+
+    middleware(store)(next)(action);
+    expect(next).not.to.have.been.calledWith(action);
+  });
+
+  it(`should not call next on ${actionType.loadingFinished} action if action.data == '${ignoredLoadingActionKeys[0]}'`, () => {
+    const action = {
+      type: actionType.loadingFinished,
+      data: ignoredLoadingActionKeys[0],
+    };
+
+    middleware(store)(next)(action);
+    expect(next).not.to.have.been.calledWith(action);
+  });
+
+  it(`should call next on ${actionType.loadingStarted} action if action.data != '${ignoredLoadingActionKeys[0]}'`, () => {
+    const action = {
+      type: actionType.loadingStarted,
+      data: 'something/else',
+    };
+
+    middleware(store)(next)(action);
+    expect(next).to.have.been.calledWith(action);
+  });
+
+  it(`should call next on ${actionType.loadingFinished} action if action.data != '${ignoredLoadingActionKeys[0]}'`, () => {
+    const action = {
+      type: actionType.loadingFinished,
+      data: 'something/else',
+    };
+
+    middleware(store)(next)(action);
+    expect(next).to.have.been.calledWith(action);
+  });
+});
+