Merge pull request #538 from LiskHQ/494-global-loading-bar

Migrate global loading bar to React - Closes #494

src/actions/loading.js

@@ -0,0 +1,19 @@
+import actionTypes from '../constants/actions';
+
+/**
+ * An action to dispatch loadingStarted
+ *
+ */
+export const loadingStarted = data => ({
+  data,
+  type: actionTypes.loadingStarted,
+});
+
+/**
+ * An action to dispatch loadingFinished
+ *
+ */
+export const loadingFinished = data => ({
+  data,
+  type: actionTypes.loadingFinished,
+});

src/actions/loding.test.js

@@ -0,0 +1,33 @@
+import { expect } from 'chai';
+import actionTypes from '../constants/actions';
+import {
+  loadingStarted,
+  loadingFinished,
+} from './loading';
+
+
+describe('actions: loading', () => {
+  describe('loadingStarted', () => {
+    it('should create an action to show loading bar', () => {
+      const data = 'test';
+
+      const expectedAction = {
+        data,
+        type: actionTypes.loadingStarted,
+      };
+      expect(loadingStarted(data)).to.be.deep.equal(expectedAction);
+    });
+  });
+
+  describe('loadingFinished', () => {
+    it('should create an action to hide loading bar', () => {
+      const data = 'test';
+
+      const expectedAction = {
+        data,
+        type: actionTypes.loadingFinished,
+      };
+      expect(loadingFinished(data)).to.be.deep.equal(expectedAction);
+    });
+  });
+});

src/components/app/index.js

@@ -11,7 +11,7 @@ import styles from './app.css';
 import Metronome from '../../utils/metronome';
 import Dialog from '../dialog';
 import Tabs from '../tabs';
-  // temporary, will be deleted with #347
+import LoadingBar from '../loadingBar';
 
 // start dispatching sync ticks
 const metronome = new Metronome();
@@ -33,6 +33,7 @@ const App = () => (
       <Route exact path="/" component={Login} />
     </main>
     <Dialog />
+    <LoadingBar />
   </section>
 );
 

src/components/loadingBar/index.js

@@ -0,0 +1,10 @@
+
+import { connect } from 'react-redux';
+import LoadingBar from './loadingBar';
+
+const mapStateToProps = state => ({
+  loading: state.loading,
+});
+
+export default connect(mapStateToProps)(LoadingBar);
+

src/components/loadingBar/index.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import LoadingBar from './';
+import store from '../../store';
+
+
+describe('LoadingBar Container', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(<Provider store={store}><LoadingBar /></Provider>);
+  });
+
+  it('should render Send', () => {
+    expect(wrapper.find('LoadingBar')).to.have.lengthOf(1);
+  });
+});

src/components/loadingBar/loadingBar.css

@@ -0,0 +1,7 @@
+.fixedAtTop {
+  position: fixed;
+  top: -11px;
+  right: 0;
+  width: 100vw;
+  z-index: 201;
+}

src/components/loadingBar/loadingBar.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import ProgressBar from 'react-toolbox/lib/progress_bar';
+import styles from './loadingBar.css';
+
+const LoadingBar = props => (
+  <div className={styles.fixedAtTop}>
+    {props.loading && props.loading.length ?
+      <ProgressBar type="linear" mode="indeterminate" /> :
+      null
+    }
+  </div>
+);
+
+export default LoadingBar;

src/components/loadingBar/loadingBar.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import LoadingBar from './loadingBar';
+
+
+describe('LoadingBar Container', () => {
+  it('should show ProgresBar if props.loading.length is not 0', () => {
+    const wrapper = mount(<LoadingBar loading={['test']} />);
+    expect(wrapper.find('ProgressBar')).to.have.lengthOf(1);
+  });
+
+  it('should not show ProgresBar if props.loading.length is 0', () => {
+    const wrapper = mount(<LoadingBar loading={[]} />);
+    expect(wrapper.find('ProgressBar')).to.have.lengthOf(0);
+  });
+});

src/constants/actions.js

@@ -8,6 +8,8 @@ const actionTypes = {
   dialogHidden: 'DIALOG_HIDDEN',
   forgedBlocksUpdated: 'FORGED_BLOCKS_UPDATED',
   forgingStatsUpdated: 'FORGING_STATS_UPDATED',
+  loadingStarted: 'LOADING_STARTED',
+  loadingFinished: 'LOADING_FINISHED',
 };
 
 export default actionTypes;

src/store/reducers/index.js

@@ -2,4 +2,5 @@ export { default as account } from './account';
 export { default as peers } from './peers';
 export { default as dialog } from './dialog';
 export { default as forging } from './forging';
+export { default as loading } from './loading';
 

src/store/reducers/loading.js

@@ -0,0 +1,19 @@
+import actionTypes from '../../constants/actions';
+
+/**
+ *
+ * @param {Array} state
+ * @param {Object} action
+ */
+const dialog = (state = [], action) => {
+  switch (action.type) {
+    case actionTypes.loadingStarted:
+      return [...state, action.data];
+    case actionTypes.loadingFinished:
+      return state.filter(item => item !== action.data);
+    default:
+      return state;
+  }
+};
+
+export default dialog;

src/store/reducers/loding.test.js

@@ -0,0 +1,34 @@
+import chai, { expect } from 'chai';
+import sinonChai from 'sinon-chai';
+import loading from './loading';
+import actionTypes from '../../constants/actions';
+
+
+chai.use(sinonChai);
+
+describe('Reducer: loading(state, action)', () => {
+  let state;
+
+  beforeEach(() => {
+    state = ['test1', 'test2'];
+  });
+
+  it('should return loading array with the new loading if action.type = actionTypes.loadingStarted', () => {
+    const action = {
+      type: actionTypes.loadingStarted,
+      data: 'test3',
+    };
+    const changedState = loading(state, action);
+    expect(changedState).to.deep.equal([...state, action.data]);
+  });
+
+  it('should return loading array without action.data if action.type = actionTypes.loadingFinished', () => {
+    const action = {
+      type: actionTypes.loadingFinished,
+      data: 'test1',
+    };
+    const changedState = loading(state, action);
+    expect(changedState).to.deep.equal(['test2']);
+  });
+});
+

src/utils/api/peers.js

@@ -1,12 +1,16 @@
+import { loadingStarted, loadingFinished } from '../../utils/loading';
+
 /* eslint-disable  */
 export const requestToActivePeer = (activePeer, path, urlParams) =>
   new Promise((resolve, reject) => {
+    loadingStarted(path);
     activePeer.sendRequest(path, urlParams, (data) => {
       if (data.success) {
         resolve(data);
       } else {
         reject(data);
       }
+      loadingFinished(path);
     });
   });
 /* eslint-enable */

src/utils/loading.js

@@ -0,0 +1,7 @@
+import { loadingStarted as loadingStartedAction, loadingFinished as loadingFinishedAction } from '../actions/loading';
+import store from '../store';
+
+
+export const loadingStarted = data => store.dispatch(loadingStartedAction(data));
+
+export const loadingFinished = data => store.dispatch(loadingFinishedAction(data));