🐛 Fix store observer bug

Author: Bartozzz

.eslintrc.json

@@ -70,8 +70,6 @@
         } ],
 
         "block-scoped-var"                  : [ "error" ],
-
-        "padded-blocks"                     : [ "error", "never" ],
-        "object-shorthand"                  : [ "error", "consistent" ]
+        "padded-blocks"                     : [ "error", "never" ]
     }
 }

src/scripts/bootstrap.js

@@ -1,5 +1,6 @@
 import React        from "react";
 import { render }   from "react-dom";
+import { Provider } from "mobx-react";
 import App          from "./components/App.react";
 
 import "./shortcuts/FileShortcuts";
@@ -14,4 +15,13 @@ import "codemirror/addon/dialog/dialog";
 import "codemirror/keymap/sublime";
 import "markdown-it-asciimath/ASCIIMathTeXImg";
 
-render( <App />, document.getElementById( "app" ) );
+const stores = {
+    alertsStore : require( "./stores/AlertStore" ),
+    editorStore : require( "./stores/EditorStore" )
+};
+
+render( (
+    <Provider {...stores}>
+        <App />
+    </Provider>
+), document.getElementById( "app" ) );

src/scripts/components/AppHeader.react.js

@@ -1,25 +1,26 @@
 import ThemeIcon            from "../../images/icons/menu/theme.svg";
 import PreviewIcon          from "../../images/icons/menu/preview.svg";
 import React, { Component } from "react";
-import { observer }         from "mobx-react";
+import { inject, observer } from "mobx-react";
 import PropTypes            from "prop-types";
 import className            from "classnames";
 import ReactSVG             from "react-svg";
 import Controls             from "./controls/Controls.react";
-import EditorStore          from "../stores/EditorStore";
 
+@inject( [ "editorStore" ] )
 @observer
 class AppHeader extends Component {
     static propTypes = {
+        editorStore      : PropTypes.object,
         toggleTheme      : PropTypes.func.isRequired,
         togglePreview    : PropTypes.func.isRequired,
         isThemeToggled   : PropTypes.bool.isRequired,
         isPreviewToggled : PropTypes.bool.isRequired
     }
 
     revealFolder = () => {
-        if ( EditorStore.path !== "" ) {
-            require( "opn" )( EditorStore.directory );
+        if ( this.props.editorStore.path ) {
+            require( "opn" )( this.props.editorStore.directory );
         }
     }
 
@@ -33,15 +34,15 @@ class AppHeader extends Component {
         } );
 
         const titleClasses = className( "app-header-title", {
-            "is-clickable" : EditorStore.path !== ""
+            "is-clickable" : this.props.editorStore.path
         } );
 
         return (
             <div className="app-header qilin-panel">
                 <Controls />
 
                 <div className={titleClasses} onClick={this.revealFolder}>
-                    {EditorStore.filename}
+                    {this.props.editorStore.filename}
                 </div>
 
                 <div className="app-header-buttons">

src/scripts/components/editor/EditorEditable.react.js

@@ -1,10 +1,15 @@
 import React, { Component } from "react";
-import { observer }         from "mobx-react";
+import { inject, observer } from "mobx-react";
 import CodeMirrorComponent  from "react-codemirror";
-import EditorStore          from "../../stores/EditorStore";
+import PropTypes            from "prop-types";
 
+@inject( [ "editorStore" ] )
 @observer
 class EditorEditable extends Component {
+    static propTypes = {
+        editorStore : PropTypes.object
+    }
+
     state = {
         options : {
             mode                : "gfm",
@@ -30,15 +35,15 @@ class EditorEditable extends Component {
     }
 
     editorDidChange = value => {
-        EditorStore.changeContent( value );
+        this.props.editorStore.changeContent( value );
     }
 
     render() {
         return (
             <div className="editor-editable qilin-panel">
                 <CodeMirrorComponent
                     options={this.state.options}
-                    value={EditorStore.content || ""}
+                    value={this.props.editorStore.content}
                     onChange={this.editorDidChange}
                 />
             </div>

src/scripts/components/editor/EditorPreview.react.js

@@ -1,10 +1,15 @@
 import React, { Component } from "react";
-import { observer }         from "mobx-react";
+import { inject, observer } from "mobx-react";
+import PropTypes            from "prop-types";
 import Markdown             from "markdown-it";
-import EditorStore          from "../../stores/EditorStore";
 
+@inject( [ "editorStore" ] )
 @observer
 class EditorPreview extends Component {
+    static propTypes = {
+        editorStore : PropTypes.object
+    }
+
     componentWillMount() {
         this.markdown = new Markdown( {
             html       : true,
@@ -27,7 +32,7 @@ class EditorPreview extends Component {
         return (
             <div
                 className="editor-preview qilin-panel typo"
-                dangerouslySetInnerHTML={{ __html : this.markdown.render( EditorStore.content || "") }}
+                dangerouslySetInnerHTML={{ __html : this.markdown.render( this.props.editorStore.content ) }}
             />
         );
     }

src/scripts/stores/AlertStore.js

@@ -1,9 +1,7 @@
-import { observable, action, computed } from "mobx";
+import { observable } from "mobx";
 
-class AlertStore {
-    @observable info = [];
-    @observable failure = [];
-    @observable success = [];
-}
-
-export default new AlertStore();
+export default {
+    @observable info    : [],
+    @observable failure : [],
+    @observable success : []
+};

src/scripts/stores/EditorStore.js

@@ -1,25 +1,23 @@
 import path                             from "path";
 import { observable, action, computed } from "mobx";
 
-class EditorStore {
-    @observable path    = "";
-    @observable content = "";
+export default {
+    @observable path    : "",
+    @observable content : "",
 
     @action changePath( path ) {
         this.path = path;
-    }
+    },
 
     @action changeContent( content ) {
         this.content = content;
-    }
+    },
 
     @computed get filename() {
         return this.path ? path.basename( this.path ) : "Untitled";
-    }
+    },
 
     @computed get directory() {
         return path.dirname( this.path );
     }
-}
-
-export default new EditorStore();
+};