Added mobx

.babelrc

@@ -1,5 +1,6 @@
 {
   "presets": ["react", "es2015", "stage-0"],
+  "plugins": ["transform-decorators-legacy"],
   "env": {
     "development": {
       "presets": ["react-hmre"]

package.json

@@ -26,6 +26,7 @@
     "babel-core": "^6.4.5",
     "babel-eslint": "^4.1.8",
     "babel-loader": "^6.2.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-polyfill": "^6.7.4",
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
@@ -69,6 +70,9 @@
     "lodash": "^4.13.1",
     "lodash.orderby": "^4.4.0",
     "marked": "^0.3.5",
+    "mobx": "^2.2.2",
+    "mobx-react": "^3.3.0",
+    "mobx-react-devtools": "^4.2.0",
     "moment": "^2.13.0",
     "node-dev": "^3.1.0",
     "node-sass": "^3.4.2",
@@ -110,10 +114,11 @@
     "webpack": "^1.12.12"
   },
   "devDependencies": {
+    "babel-regenerator-runtime": "^6.5.0",
+    "fsevents": "^1.0.11",
     "koa-webpack-dev-middleware": "^1.2.0",
     "koa-webpack-hot-middleware": "^1.0.3",
     "node-dev": "^3.1.0",
-    "nodemon": "^1.9.1",
-    "fsevents": "^1.0.11"
+    "nodemon": "^1.9.1"
   }
 }

src/index.js

@@ -10,6 +10,8 @@ import { persistStore, autoRehydrate } from 'redux-persist';
 import thunkMiddleware from 'redux-thunk';
 import createLogger from 'redux-logger';
 import History from 'utils/History';
+import { useStrict } from 'mobx';
+import DevTools from 'mobx-react-devtools';
 
 import auth from 'utils/auth';
 
@@ -31,6 +33,9 @@ import DocumentScene from 'scenes/DocumentScene';
 import DocumentEdit from 'scenes/DocumentEdit';
 import SlackAuth from 'scenes/SlackAuth';
 
+// MobX
+useStrict(true);
+
 // Redux
 let store;
 const routerMiddlewareWithHistory = routerMiddleware(History);
@@ -61,16 +66,18 @@ persistStore(store, {
         <Route path="/" component={ Application }>
           <IndexRoute component={Home} />
 
-          <Route path="/dashboard" component={ Dashboard } onEnter={ requireAuth } />
-          <Route path="/atlas/:id" component={ Atlas } onEnter={ requireAuth } />
-          <Route path="/atlas/:id/new" component={ Editor } onEnter={ requireAuth } />
-          <Route path="/documents/:id" component={ DocumentScene } onEnter={ requireAuth } />
-          <Route path="/documents/:id/edit" component={ DocumentEdit } onEnter={ requireAuth } />
+            <Route path="/dashboard" component={ Dashboard } onEnter={ requireAuth } />
+            <Route path="/atlas/:id" component={ Atlas } onEnter={ requireAuth } />
+            <Route path="/atlas/:id/new" component={ Editor } onEnter={ requireAuth } />
+            <Route path="/documents/:id" component={ DocumentScene } onEnter={ requireAuth } />
+            <Route path="/documents/:id/edit" component={ DocumentEdit } onEnter={ requireAuth } />
 
-          <Route path="/auth/slack" component={SlackAuth} />
-        </Route>
-      </Router>
-    </Provider>
+            <Route path="/auth/slack" component={SlackAuth} />
+          </Route>
+        </Router>
+      </Provider>
+      { __DEV__ ? <DevTools position={{ bottom: 0, right: 0 }} /> : null }
+    </div>
   ), document.getElementById('root'));
 });
 

webpack.config.dev.js

@@ -8,6 +8,7 @@ const developmentWebpackConfig = Object.assign(commonWebpackConfig, {
   cache: true,
   devtool: 'eval',
   entry: [
+    'babel-regenerator-runtime',
     'webpack-hot-middleware/client',
     './src/index',
   ],