From 61453aa8479498c83f439d83fff60e9a9b17ab01 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Tue, 24 May 2016 23:08:21 +0800
Subject: [web] eliminate Router mixin

---
 web/src/js/components/proxyapp.js | 58 +++++++++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 18 deletions(-)

(limited to 'web/src/js/components/proxyapp.js')

diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index d17a1522..82234996 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import _ from "lodash";
 
-import {Router, Splitter} from "./common.js"
+import {Splitter} from "./common.js"
 import MainView from "./mainview.js";
 import Footer from "./footer.js";
 import {Header, MainMenu} from "./header.js";
@@ -21,13 +21,35 @@ var Reports = React.createClass({
 
 
 var ProxyAppMain = React.createClass({
-    mixins: [Router],
     childContextTypes: {
         flowStore: React.PropTypes.object.isRequired,
         eventStore: React.PropTypes.object.isRequired,
         returnFocus: React.PropTypes.func.isRequired,
         location: React.PropTypes.object.isRequired,
     },
+    contextTypes: {
+        location: React.PropTypes.object,
+        router: React.PropTypes.object.isRequired
+    },
+    updateLocation: function (pathname, queryUpdate) {
+        if (pathname === undefined) {
+            pathname = this.context.location.pathname;
+        }
+        var query = this.context.location.query;
+        if (queryUpdate !== undefined) {
+            for (var i in queryUpdate) {
+                if (queryUpdate.hasOwnProperty(i)) {
+                    query[i] = queryUpdate[i] || undefined; //falsey values shall be removed.
+                }
+            }
+        }
+        this.context.router.replace({pathname, query});
+    },
+    getQuery: function () {
+        // For whatever reason, react-router always returns the same object, which makes comparing
+        // the current props with nextProps impossible. As a workaround, we just clone the query object.
+        return _.clone(this.context.location.query);
+    },
     componentDidMount: function () {
         this.focus();
         this.settingsStore.addListener("recalculate", this.onSettingsChange);
@@ -97,23 +119,23 @@ var ProxyAppMain = React.createClass({
         e.preventDefault();
     },
     render: function () {
+        var query = this.getQuery();
         var eventlog;
         if (this.props.location.query[Query.SHOW_EVENTLOG]) {
             eventlog = [
                 <Splitter key="splitter" axis="y"/>,
-                <EventLog key="eventlog"/>
+                <EventLog key="eventlog" updateLocation={this.updateLocation}/>
             ];
         } else {
             eventlog = null;
         }
-        var children = React.cloneElement(
-            this.props.children,
-            { ref: "view", location: this.props.location }
-        );
         return (
             <div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
-                <Header ref="header" settings={this.state.settings}/>
-                {children}
+                <Header ref="header" settings={this.state.settings} updateLocation={this.updateLocation} query={query} />
+                {React.cloneElement(
+                    this.props.children,
+                    { ref: "view", location: this.props.location , updateLocation: this.updateLocation, query }
+                )}
                 {eventlog}
                 <Footer settings={this.state.settings}/>
             </div>
@@ -125,12 +147,12 @@ var ProxyAppMain = React.createClass({
 import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router";
 
 export var app = (
-<ReactRouter history={hashHistory}>
-    <Redirect from="/" to="/flows" />
-    <Route path="/" component={ProxyAppMain}>
-        <Route path="flows" component={MainView}/>
-        <Route path="flows/:flowId/:detailTab" component={MainView}/>
-        <Route path="reports" component={Reports}/>
-    </Route>
-</ReactRouter>
-);
\ No newline at end of file
+    <ReactRouter history={hashHistory}>
+        <Redirect from="/" to="/flows" />
+        <Route path="/" component={ProxyAppMain}>
+            <Route path="flows" component={MainView}/>
+            <Route path="flows/:flowId/:detailTab" component={MainView}/>
+            <Route path="reports" component={Reports}/>
+        </Route>
+    </ReactRouter>
+);
-- 
cgit v1.2.3


From 6bf74955b9026fb840163aae44c429a3a746464b Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Tue, 24 May 2016 23:16:30 +0800
Subject: [web] use props.location instead of context.location

---
 web/src/js/components/proxyapp.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'web/src/js/components/proxyapp.js')

diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index 82234996..f47c5bb4 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -28,14 +28,13 @@ var ProxyAppMain = React.createClass({
         location: React.PropTypes.object.isRequired,
     },
     contextTypes: {
-        location: React.PropTypes.object,
         router: React.PropTypes.object.isRequired
     },
     updateLocation: function (pathname, queryUpdate) {
         if (pathname === undefined) {
-            pathname = this.context.location.pathname;
+            pathname = this.props.location.pathname;
         }
-        var query = this.context.location.query;
+        var query = this.props.location.query;
         if (queryUpdate !== undefined) {
             for (var i in queryUpdate) {
                 if (queryUpdate.hasOwnProperty(i)) {
@@ -48,7 +47,7 @@ var ProxyAppMain = React.createClass({
     getQuery: function () {
         // For whatever reason, react-router always returns the same object, which makes comparing
         // the current props with nextProps impossible. As a workaround, we just clone the query object.
-        return _.clone(this.context.location.query);
+        return _.clone(this.props.location.query);
     },
     componentDidMount: function () {
         this.focus();
-- 
cgit v1.2.3