web: implement settings store, modularize store

3 files changed, 48 insertions, 26 deletions

diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 3bd188ea..7ef369f8 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -25,22 +25,29 @@ var LogMessage = React.createClass({
 
 var EventLogContents = React.createClass({
     mixins: [AutoScrollMixin, VirtualScrollMixin],
-    getInitialState: function(){
-        var store = new EventLogStore();
-        var view = new StoreView(store, function(entry){
-            return this.props.filter[entry.level];
-        }.bind(this));
-        view.addListener("add recalculate", this.onEventLogChange);
+    getInitialState: function () {
         return {
-            store: store,
-            view: view,
             log: []
         };
     },
+    componentWillMount: function () {
+        this.openView(this.props.eventStore);
+    },
     componentWillUnmount: function () {
-        this.state.view.removeListener("add recalculate", this.onEventLogChange);
+        this.closeView();
+    },
+    openView: function (store) {
+        var view = new StoreView(store, function (entry) {
+            return this.props.filter[entry.level];
+        }.bind(this));
+        this.setState({
+            view: view
+        });
+
+        view.addListener("add recalculate", this.onEventLogChange);
+    },
+    closeView: function () {
         this.state.view.close();
-        this.state.store.close();
     },
     onEventLogChange: function () {
         this.setState({
@@ -48,9 +55,13 @@ var EventLogContents = React.createClass({
         });
     },
     componentWillReceiveProps: function (nextProps) {
-        if(nextProps.filter !== this.props.filter){
+        if (nextProps.filter !== this.props.filter) {
             this.props.filter = nextProps.filter; // Dirty: Make sure that view filter sees the update.
-            this.state.view.recalculate(this.state.store._list);
+            this.state.view.recalculate(this.props.eventStore.list);
+        }
+        if (nextProps.eventStore !== this.props.eventStore) {
+            this.closeView();
+            this.openView(nextProps.eventStore);
         }
     },
     getDefaultProps: function () {
@@ -60,7 +71,7 @@ var EventLogContents = React.createClass({
             placeholderTagName: "div"
         };
     },
-    renderRow: function(elem){
+    renderRow: function (elem) {
         return <LogMessage key={elem.id} entry={elem}/>;
     },
     render: function () {
@@ -130,7 +141,7 @@ var EventLog = React.createClass({
                     </div>
 
                 </div>
-                <EventLogContents filter={this.state.filter}/>
+                <EventLogContents filter={this.state.filter} eventStore={this.props.eventStore}/>
             </div>
         );
     }
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index 570962e0..17a024ee 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -56,7 +56,7 @@ var MainView = React.createClass({
         }
     },
     selectFlowRelative: function (shift) {
-        var flows = this.state.view.flows;
+        var flows = this.state.view.list;
         var index;
         if (!this.getParams().flowId) {
             if (shift > 0) {
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
index e2b32e55..20162ad1 100644
--- a/web/src/js/components/proxyapp.jsx.js
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -8,27 +8,38 @@ var Reports = React.createClass({
 
 var ProxyAppMain = React.createClass({
     getInitialState: function () {
+        var eventStore = new EventLogStore();
+        var flowStore = new FlowStore();
+        var settings = new SettingsStore();
+
+        // Default Settings before fetch
+        _.extend(settings.dict,{
+            showEventLog: true
+        });
         return {
-            settings: SettingsStore.getAll(),
-            flowStore: new FlowStore()
+            settings: settings,
+            flowStore: flowStore,
+            eventStore: eventStore
         };
     },
     componentDidMount: function () {
-        SettingsStore.addListener("change", this.onSettingsChange);
+        this.state.settings.addListener("recalculate", this.onSettingsChange);
     },
     componentWillUnmount: function () {
-        SettingsStore.removeListener("change", this.onSettingsChange);
+        this.state.settings.removeListener("recalculate", this.onSettingsChange);
     },
-    onSettingsChange: function () {
-        this.setState({settings: SettingsStore.getAll()});
+    onSettingsChange: function(){
+        this.setState({
+            settings: this.state.settings
+        });
     },
     render: function () {
 
         var eventlog;
-        if (this.state.settings.showEventLog) {
+        if (this.state.settings.dict.showEventLog) {
             eventlog = [
                 <Splitter key="splitter" axis="y"/>,
-                <EventLog key="eventlog"/>
+                <EventLog key="eventlog" eventStore={this.state.eventStore}/>
             ];
         } else {
             eventlog = null;
@@ -36,10 +47,10 @@ var ProxyAppMain = React.createClass({
 
         return (
             <div id="container">
-                <Header settings={this.state.settings}/>
-                <RouteHandler settings={this.state.settings} flowStore={this.state.flowStore}/>
+                <Header settings={this.state.settings.dict}/>
+                <RouteHandler settings={this.state.settings.dict} flowStore={this.state.flowStore}/>
                 {eventlog}
-                <Footer settings={this.state.settings}/>
+                <Footer settings={this.state.settings.dict}/>
             </div>
         );
     }