add msgstack

Author: lisong

src/actions/actionTypes.js

@@ -82,3 +82,8 @@ export const POP_ADD_APP_INPUT = 'POP_ADD_APP_INPUT';
 export const REQUEST_ADD_PRODUCTS = 'REQUEST_ADD_PRODUCTS';
 export const RECEIVE_ADD_PRODUCTS = 'RECEIVE_ADD_PRODUCTS';
 /*========= end productsActions   ===========*/
+
+/*========= begin msgStackActions ===========*/
+export const MSG_STACK_SHOW_MSG = 'MSG_STACK_SHOW_MSG';
+export const MSG_STACK_CLOSE_MSG = 'MSG_STACK_CLOSE_MSG';
+/*========= end msgStackActions   ===========*/

src/actions/msgStackActions.js

@@ -0,0 +1,19 @@
+import {
+  MSG_STACK_SHOW_MSG,
+  MSG_STACK_CLOSE_MSG,
+} from './actionTypes';
+import _ from 'lodash';
+
+export function addShowMsg(text, type="info", showTime=10) {
+  return {
+    type: MSG_STACK_SHOW_MSG,
+    payload: {text,type,showTime},
+  }
+}
+
+export function closeMsg(id) {
+  return {
+    type: MSG_STACK_CLOSE_MSG,
+    payload: id,
+  }
+}

src/actions/productsActions.js

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import * as types from './actionTypes';
 import restApi from '../network/RestApi';
 import {checkResponseAuth} from './authActions';
+import {addShowMsg} from './msgStackActions';
 
 export function requestProducts() {
   return {
@@ -62,6 +63,11 @@ export function addProducts(appName) {
     return restApi.addProducts(appName)
     .then(data => {
       checkResponseAuth(dispatch, data);
+      if (_.get(data, 'status') !== "OK") {
+        dispatch(addShowMsg("创建应用: "+_.get(data,'errorMessage'), "danger"));
+      } else {
+        dispatch(addShowMsg("创建 "+_.get(data,'results.app.name')+" 应用成功", "success"));
+      }
       dispatch(receiveAddProducts(data));
       dispatch(getProducts());
     });

src/components/MsgStack/MsgStack.js

@@ -0,0 +1,75 @@
+import React, {Component, PropTypes} from 'react';
+import _ from 'lodash';
+import {Alert, Fade} from 'react-bootstrap';
+
+class MsgStack extends Component {
+  static propTypes = {
+    items: PropTypes.array,
+    close: PropTypes.func,
+  };
+
+  static defaultProps = {
+    items: [],
+    close: ()=>{}
+  };
+
+  intervalId = null;
+
+  checkItemsInterval() {
+    const self = this;
+    if (this.props.items && this.props.items.length > 0 ) {
+      if (this.intervalId) {
+        return;
+      }
+      this.intervalId = setInterval(function () {
+        var time = parseInt((new Date()).getTime() /1000)
+        _.map(self.props.items, function(item){
+          console.log(item);
+          if((parseInt(_.get(item, 'time')) + parseInt(_.get(item, 'showTime'))) < time) {
+            self.props.close(_.get(item, 'id'));
+          }
+        })
+      }, 1000);
+    } else {
+      if (this.intervalId) {
+        clearInterval(this.intervalId);
+      }
+    }
+  }
+
+  constructor() {
+    super();
+    this.checkItemsInterval = this.checkItemsInterval.bind(this);
+  }
+
+  componentDidMount() {
+    setTimeout(this.checkItemsInterval, 200);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.checkItemsInterval();
+  }
+
+  render() {
+    const self = this;
+    return (
+      <div>
+        {
+          _.map(self.props.items, function (item) {
+            var bsStyle = "info";
+            if (_.indexOf(["info", "warning", "danger", "success"],item.type)!== -1){
+              bsStyle = item.type;
+            }
+            return  (
+              <Alert key={item.id} bsStyle={bsStyle} onDismiss={()=>{self.props.close(item.id)}}>
+                {item.text}
+              </Alert>
+            )
+          })
+        }
+      </div>
+    );
+  }
+}
+
+export default MsgStack;

src/components/MsgStack/package.json

@@ -0,0 +1,7 @@
+
+{
+  "name": "MsgStack",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./MsgStack.js"
+}

src/containers/LayoutContainer.js

@@ -6,6 +6,7 @@ import _ from 'lodash';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
 import Layout from '../components/Layout';
+import MsgStackContainer from './MsgStackContainer';
 
 class LayoutContainer extends Component {
   render() {
@@ -17,6 +18,7 @@ class LayoutContainer extends Component {
           />
         {this.props.children}
         <Footer/>
+        <MsgStackContainer/>
       </Layout>
     );
   }

src/containers/MsgStackContainer.js

@@ -0,0 +1,36 @@
+import React, {Component} from 'react';
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import _ from 'lodash';
+import MsgStack from '../components/MsgStack';
+import * as msgStackActions from '../actions/msgStackActions';
+
+class MsgStackContainer extends Component {
+  render() {
+    const {msgStack, actions } = this.props;
+    return (
+      <div style={{position: 'fixed',top:60,right:20, width:'30%' }}>
+        <MsgStack
+        items={_.get(msgStack, 'rs', [])}
+        close={(id)=>{actions.closeMsg(id)}}
+        />
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state, ownProps) {
+  return {'msgStack': _.get(state, 'msgStack', {})};
+}
+
+function mapDispatchToProps(dispatch, ownProps) {
+  return {
+    actions: bindActionCreators(Object.assign({}, msgStackActions), dispatch)
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MsgStackContainer)

src/network/RestApi.js

@@ -42,10 +42,15 @@ class RestApi {
   }
 
   addProducts(appName) {
-    return this.post('/apps', {name:appName}, false)
+    return this.post('/apps', {name:appName})
     .then(data=>{
       if (data.httpCode == 200) {
-        return {status:"OK", httpCode: data.httpCode, results: this.jsonDecode(data.text)};
+        var rs = this.jsonDecode(data);
+        if (_.get(rs, 'status') != "ERROR") {
+          return {status:"OK", httpCode: data.httpCode, results: rs};
+        } else {
+          return rs;
+        }
       } else {
         return {status:"ERROR", httpCode: data.httpCode, errorCode: 0, errorMessage: data.text};
       }
@@ -161,7 +166,7 @@ class RestApi {
     });
   }
 
-  delete(uri, params={}, jsonDecode = true) {
+  delete(uri, params={}) {
     return fetch(this.baseURI + uri, {
       method: 'DELETE',
       headers: this.headers,

src/reducers/index.js

@@ -6,6 +6,7 @@ import {register} from './registers';
 import {auth, accessKeys} from './auth';
 import {routes} from './routes';
 import {products, addProducts} from './products';
+import {msgStack} from './msgStack';
 
 const appReducer = combineReducers({
   users,
@@ -17,6 +18,7 @@ const appReducer = combineReducers({
   routes,
   products,
   addProducts,
+  msgStack,
 });
 
 const rootReducer = (state, action) => {

src/reducers/msgStack.js

@@ -0,0 +1,38 @@
+import {
+  MSG_STACK_SHOW_MSG,
+  MSG_STACK_CLOSE_MSG,
+} from '../actions/actionTypes';
+import _ from 'lodash';
+import restApi from '../network/RestApi';
+import uuid from 'uuid';
+
+export function msgStack(state = {rs:[]}, action) {
+  let payload = action.payload;
+  switch (action.type) {
+    case MSG_STACK_SHOW_MSG:
+      var id = uuid.v4();
+      var data = Object.assign({}, state);
+      var msg = {
+        id,
+        type: _.get(payload, 'type'),
+        text: _.get(payload, 'text'),
+        showTime: parseInt(_.get(payload, 'showTime')),
+        time: parseInt((new Date()).getTime()/1000)
+      };
+      var rs = _.get(data, 'rs', []);
+      rs.splice(0, 0, msg);
+      _.set(data, 'rs', rs);
+      return data;
+
+    case MSG_STACK_CLOSE_MSG:
+      var id = payload;
+      var data = Object.assign({}, state);
+      _.remove(_.get(data, 'rs', []), (item)=>{
+        return _.get(item, 'id') === id;
+      });
+      return data;
+
+    default:
+      return state
+  }
+}