add mobx

.babelrc

 {
-    "presets": ["es2015", "stage-0", "react"],
+    "presets": ["es2015", "stage-1", "react"],
     "plugins": [
        ["transform-decorators-legacy"],
     ]

package.json

@@ -9,10 +9,11 @@
   },
   "dependencies": {
     "autobind-decorator": "^1.4.1",
-    "babel-preset-stage-0": "^6.24.1",
     "halogen": "^0.2.0",
     "html-webpack-plugin": "^2.28.0",
     "jquery": "^3.2.1",
+    "mobx": "^3.1.10",
+    "mobx-react": "^4.1.8",
     "path": "^0.12.7",
     "react": "^15.5.4",
     "react-addons-update": "^15.5.2",
@@ -30,6 +31,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-1": "^6.24.1",
     "css-loader": "^0.28.1",
     "eslint": "^3.19.0",
     "eslint-loader": "^1.7.1",

src/components/Header.js

 import React from 'react'
 import ModalRepoForm from './ModalRepoForm'
-import ReactAddonsUpdate from 'react-addons-update'
 import Loader from 'halogen/PulseLoader'
 import { Link } from 'react-router-dom'
+import { observer } from 'mobx-react'
 import autobind from 'autobind-decorator'
 
 @autobind
+@observer
 export default class Header extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      data: null, loading: true, error: null
-    };
-  }
-
   componentDidMount() {
-    this.props.promise.then(
-      value => this.setState({loading: false, data: value}),
-      error => this.setState({loading: false, error: error})
-    )
+    this.props.headerStore.loadHeaderData()
   }
 
   addRepo(repo) {
-    let data = ReactAddonsUpdate(this.state.data, { $push: [repo] })
-    this.setState({ data: data })
+    this.props.headerStore.addRepo(repo)
   }
 
   render() {
+    const { headerStore } = this.props;
+
     let result = null;
-    if (this.state.loading) {
+
+    if (headerStore.loading) {
       result = <Loader color="#286090" size="12px" margin="4px"/>;
     }
-    else if (this.state.error !== null) {
-      result = <span>Error: {this.state.error.message}</span>;
+    else if (headerStore.error !== null) {
+      result = <span>Error: {headerStore.error}</span>;
     }
     else {
-      const data = this.state.data.map((repo) => {
+      const data = headerStore.data.map((repo) => {
         const url = `/web/regional_design/${repo.id}?object=repo`
         return (
           <Link key={ repo.id } className='btn btn-default mr15' to={ url }>{ repo.name }</Link>
@@ -44,6 +37,7 @@ export default class Header extends React.Component {
 
       result = data;
     }
+
     return (
       <div className="text-left top-header">
         <ModalRepoForm handleNewRepo={ this.addRepo } />

src/containers/Spd.js

@@ -3,7 +3,9 @@ import ElementGroup from '../components/ElementGroup'
 import Header from '../components/Header'
 import AlertContainer from 'react-alert'
 import EventEmitter from '../libs/eventEmitter'
-import $ from 'jquery'
+
+import headerModel from '../stores/HeaderStore'
+const headerStore = new headerModel()
 
 export default class Spd extends React.Component {
   componentDidMount() {
@@ -39,7 +41,7 @@ export default class Spd extends React.Component {
       <div id="app">
         <AlertContainer ref={a => this.msg = a} {...this.alertOptions} />
         <div className="row">
-          <Header promise={$.getJSON('/regional_design/repos.json')} />
+          <Header headerStore={ headerStore } />
         </div>
         <div className="row">
           <div className="col-md-2 sidebar" id='sidebar'>

src/libs/move.js

@@ -17,7 +17,7 @@ function startMove(obj, json, endFn) {
           iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100
         }
       } else {
-        iCur = parseInt(getStyle(obj,attr)) || 0
+        iCur = parseInt(getStyle(obj, attr)) || 0
       }
 
       let iSpeed = (json[attr] - iCur)/8

src/stores/HeaderStore.js

+import { observable, useStrict, action, runInAction } from 'mobx'
+import $ from 'jquery'
+
+useStrict(true)
+
+export default class headerStore {
+  @observable data = []
+  @observable loading = true
+  @observable error = null
+
+  @action addRepo(repo) {
+    this.data.push(repo)
+  }
+
+  @action loadHeaderData() {
+    $.getJSON('/regional_design/repos.json').then(
+      value => {
+        runInAction("update state after fetching data", () => {
+          this.data = value
+          this.loading = false
+        })
+      },
+      error => {
+        runInAction("error", () => {
+          this.error = error.statusText
+          this.loading = false
+        })
+    })
+  }
+}

yarn.lock

@@ -785,6 +785,12 @@ babel-plugin-transform-regenerator@^6.24.1:
   dependencies:
     regenerator-transform "0.9.11"
 
+babel-plugin-transform-runtime@^6.23.0:
+  version "6.23.0"
+  resolved "http://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"
+  dependencies:
+    babel-runtime "^6.22.0"
+
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
   resolved "http://registry.npm.taobao.org/babel-plugin-transform-strict-mode/download/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
@@ -885,7 +891,7 @@ babel-register@^6.24.1:
     mkdirp "^0.5.1"
     source-map-support "^0.4.2"
 
-babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0:
+babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.2.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0:
   version "6.23.0"
   resolved "http://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
   dependencies:
@@ -3294,6 +3300,16 @@ mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
   dependencies:
     minimist "0.0.8"
 
+mobx-react@^4.1.8:
+  version "4.1.8"
+  resolved "http://registry.npm.taobao.org/mobx-react/download/mobx-react-4.1.8.tgz#5b636c01c599bbee248c05c5aab6c77a41ab07f9"
+  dependencies:
+    hoist-non-react-statics "^1.2.0"
+
+mobx@^3.1.10:
+  version "3.1.10"
+  resolved "http://registry.npm.taobao.org/mobx/download/mobx-3.1.10.tgz#61171f8b347e6c15e8a671100f6ef887fe52e80e"
+
 ms@0.7.1:
   version "0.7.1"
   resolved "http://registry.npm.taobao.org/ms/download/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"