implement pending mechanism

Author: AllenFang

src-react/actions/bootstrap.js

@@ -4,7 +4,7 @@ import { pending } from './common';
 
 export function bootstrap() {
   return dispatch => {
-    dispatch(pending());
+    dispatch(pending(4));
     dispatch(fetchUngitConfig());
     dispatch(fetchLatestVersion());
     dispatch(fetchGitVersion());

src-react/actions/common.js

@@ -1,9 +1,10 @@
 /* This export common using actionCreator */
 import * as types from 'constants/action-types';
 
-export function pending() {
+export function pending(count) {
   return {
-    type: types.PATH_PAGE_PENDING
+    type: types.PATH_PAGE_PENDING,
+    payload: count || 1
   };
 };
 

src-react/containers/path.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux'
 
+import AlerArea from 'components/alert-area';
 import * as bootstrapActionCreators from 'actions/bootstrap';
 import 'styles/styles.scss';
 
@@ -20,12 +21,19 @@ class Path extends Component {
   }
 
   render() {
+    const { path: { pending, errMessage }, app } = this.props;
     return (
       <div>
         <div className="app-top-margin"></div>
         <div className="app-wrapper">
-          <div className="container" data-bind="shown: shown" data-ta-container="app">
-          </div>
+          {
+            pending === 0 && errMessage.length === 0 ? (
+              <AlerArea config={ this.props.config }
+                gitVersionErrorVisible={ app.gitVersionErrorVisible }
+                showNewVersionAvailable={ app.showNewVersionAvailable }
+                showBugtrackingNagscreen={ app.showBugtrackingNagscreen } />
+            ) : null
+          }
         </div>
       </div>
     );

src-react/reducers/path.js

@@ -3,15 +3,15 @@ import * as types from 'constants/action-types';
 function path(state, action) {
   switch(action.type) {
     case types.PATH_PAGE_PENDING:
-      return { ...state, pending: true };
+      return { ...state, pending: state.pending + action.payload };
     case types.RECEIVE_UNGIT_CONFIG:
     case types.RECEIVE_USER_CONFIG:
     case types.RECEIVE_GIT_VERSION:
     case types.RECEIVE_LATEST_VERSION:
-      return { ...state, pending: false };
+      return { ...state, pending: state.pending - 1 };
     case types.PATH_PAGE_API_ERR:
       const { payload: errMessage } = action;
-      return { ...state, pending: false, errMessage: [ ...state.errMessage, errMessage ] };
+      return { ...state, pending: state.pending - 1, errMessage: [ ...state.errMessage, errMessage ] };
     default:
       return { ...state };
   }

src-react/store.js

@@ -10,7 +10,7 @@ const initialState = {
     latestVersion: null
   },
   path: {
-    pending: false,
+    pending: null,
     errMessage: []
   }
 };