poc: mobx test

public/app/containers/ServerStats.tsx

@@ -1,27 +1,42 @@
 import React from "react";
+import { observer } from "mobx-react";
 import PageHeader from "app/core/components/PageHeader/PageHeader";
 import { NavModel, NavModelSrv } from "app/core/nav_model_srv";
+import { store } from "app/store/store";
 
 export interface IState {
   navModel: NavModel;
+  search: any;
 }
 
-export default class ServerStats extends React.Component<any, IState> {
+@observer
+export default class ServerStats extends React.Component<any, any> {
   constructor(props) {
     super(props);
 
     const navModelSrv = new NavModelSrv();
 
     this.state = {
-      navModel: navModelSrv.getNav("cfg", "admin", "server-stats", 1)
+      navModel: navModelSrv.getNav("cfg", "admin", "server-stats", 1),
+      search: store.search
     };
   }
 
+  onClick = () => {
+    this.state.search.search();
+  };
+
   render() {
+    console.log("render");
     return (
-      <PageHeader model={this.state.navModel}>
-        <h2>ServerStats</h2>
-      </PageHeader>
+      <div>
+        <PageHeader model={this.state.navModel} />
+
+        <div className="page-container">
+          name:
+          <h2 onClick={this.onClick}>{this.state.search.name}</h2>
+        </div>
+      </div>
     );
   }
 }

public/app/store/store.ts

@@ -1,16 +1,20 @@
 import { types } from "mobx-state-tree";
 
-const Search = types.model({
-  name: "",
-  done: false
-});
+const Search = types
+  .model({
+    name: "asdas",
+    done: false
+  })
+  .actions(self => ({
+    search() {
+      self.name = "changed";
+    }
+  }));
 
 const RootStore = types.model({
-  search: types.map(Search)
+  search: types.optional(Search, {})
 });
 
-const store = RootStore.create({
-  search: {}
-});
+const store = RootStore.create({});
 
 export { store };

tsconfig.json

@@ -13,7 +13,7 @@
       "sourceMap": true,
       "noEmitOnError": false,
       "emitDecoratorMetadata": false,
-      "experimentalDecorators": false,
+      "experimentalDecorators": true,
       "noImplicitReturns": true,
       "noImplicitThis": false,
       "noImplicitUseStrict":false,

yarn.lock

@@ -4399,6 +4399,10 @@ hoek@4.x.x:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
 
+hoist-non-react-statics@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -6303,6 +6307,20 @@ mkdirp@0.5.1, mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdi
   dependencies:
     minimist "0.0.8"
 
+mobx-react@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-4.3.5.tgz#76853f2f2ef4a6f960c374bcd9f01e875929c04c"
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
+mobx-state-tree@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/mobx-state-tree/-/mobx-state-tree-1.3.1.tgz#9e1ba9b8b6ea183f1a4a2ae1f67bfa8f2bcae4fe"
+
+mobx@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-3.4.1.tgz#37abe5ee882d401828d9f26c6c1a2f47614bbbef"
+
 mocha@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/mocha/-/mocha-4.0.1.tgz#0aee5a95cf69a4618820f5e51fa31717117daf1b"