diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js index 21ca454fe..b257b82cf 100644 --- a/web/src/js/components/common.js +++ b/web/src/js/components/common.js @@ -2,32 +2,6 @@ import React from "react" import ReactDOM from "react-dom" import _ from "lodash" -export var Router = { - 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); - } -}; - export var Splitter = React.createClass({ getDefaultProps: function () { return { @@ -143,4 +117,4 @@ export const ToggleComponent = (props) => ToggleComponent.propTypes = { name: React.PropTypes.string.isRequired, onToggleChanged: React.PropTypes.func.isRequired -} \ No newline at end of file +} diff --git a/web/src/js/components/eventlog.js b/web/src/js/components/eventlog.js index d1b23ace9..6e4f90968 100644 --- a/web/src/js/components/eventlog.js +++ b/web/src/js/components/eventlog.js @@ -1,7 +1,6 @@ import React from "react" import ReactDOM from "react-dom" import shallowEqual from "shallowequal" -import {Router} from "./common.js" import {Query} from "../actions.js" import AutoScroll from "./helpers/AutoScroll"; import {calcVScroll} from "./helpers/VirtualScroll" @@ -144,7 +143,6 @@ function ToggleFilter ({ name, active, toggleLevel }) { const AutoScrollEventLog = AutoScroll(EventLogContents); var EventLog = React.createClass({ - mixins: [Router], getInitialState() { return { filter: { @@ -157,7 +155,7 @@ var EventLog = React.createClass({ close() { var d = {}; d[Query.SHOW_EVENTLOG] = undefined; - this.updateLocation(undefined, d); + this.props.updateLocation(undefined, d); }, toggleLevel(level) { var filter = _.extend({}, this.state.filter); diff --git a/web/src/js/components/flowview/index.js b/web/src/js/components/flowview/index.js index 47531f58f..6f4f73953 100644 --- a/web/src/js/components/flowview/index.js +++ b/web/src/js/components/flowview/index.js @@ -1,6 +1,5 @@ import React from "react"; -import {Router, StickyHeadMixin} from "../common.js" import Nav from "./nav.js"; import {Request, Response, Error} from "./messages.js"; import Details from "./details.js"; @@ -15,7 +14,6 @@ var allTabs = { }; var FlowView = React.createClass({ - mixins: [StickyHeadMixin, Router], getInitialState: function () { return { prompt: false @@ -39,7 +37,7 @@ var FlowView = React.createClass({ this.selectTab(tabs[nextIndex]); }, selectTab: function (panel) { - this.updateLocation(`/flows/${this.props.flow.id}/${panel}`); + this.props.updateLocation(`/flows/${this.props.flow.id}/${panel}`); }, promptEdit: function () { var options; @@ -114,4 +112,4 @@ var FlowView = React.createClass({ } }); -export default FlowView; \ No newline at end of file +export default FlowView; diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js index 226cb61f7..555babbbb 100644 --- a/web/src/js/components/header.js +++ b/web/src/js/components/header.js @@ -4,7 +4,7 @@ import $ from "jquery"; import Filt from "../filt/filt.js"; import {Key} from "../utils.js"; -import {Router, ToggleComponent} from "./common.js"; +import {ToggleComponent} from "./common.js"; import {SettingsActions, FlowActions} from "../actions.js"; import {Query} from "../actions.js"; @@ -161,7 +161,6 @@ var FilterInput = React.createClass({ }); export var MainMenu = React.createClass({ - mixins: [Router], propTypes: { settings: React.PropTypes.object.isRequired, }, @@ -172,19 +171,19 @@ export var MainMenu = React.createClass({ onSearchChange: function (val) { var d = {}; d[Query.SEARCH] = val; - this.updateLocation(undefined, d); + this.props.updateLocation(undefined, d); }, onHighlightChange: function (val) { var d = {}; d[Query.HIGHLIGHT] = val; - this.updateLocation(undefined, d); + this.props.updateLocation(undefined, d); }, onInterceptChange: function (val) { SettingsActions.update({intercept: val}); }, render: function () { - var search = this.getQuery()[Query.SEARCH] || ""; - var highlight = this.getQuery()[Query.HIGHLIGHT] || ""; + var search = this.props.query[Query.SEARCH] || ""; + var highlight = this.props.query[Query.HIGHLIGHT] || ""; var intercept = this.props.settings.intercept || ""; return ( @@ -224,20 +223,19 @@ var ViewMenu = React.createClass({ title: "View", route: "flows" }, - mixins: [Router], toggleEventLog: function () { var d = {}; - if (this.getQuery()[Query.SHOW_EVENTLOG]) { + if (this.props.query[Query.SHOW_EVENTLOG]) { d[Query.SHOW_EVENTLOG] = undefined; } else { d[Query.SHOW_EVENTLOG] = "t"; // any non-false value will do it, keep it short } - this.updateLocation(undefined, d); + this.props.updateLocation(undefined, d); console.log('toggleevent'); }, render: function () { - var showEventLog = this.getQuery()[Query.SHOW_EVENTLOG]; + var showEventLog = this.props.query[Query.SHOW_EVENTLOG]; return (
- +
); diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js index 87c0c4bdc..964e82db4 100644 --- a/web/src/js/components/mainview.js +++ b/web/src/js/components/mainview.js @@ -5,12 +5,11 @@ import {Query} from "../actions.js"; import {Key} from "../utils.js"; import {StoreView} from "../store/view.js"; import Filt from "../filt/filt.js"; -import { Router, Splitter} from "./common.js" +import {Splitter} from "./common.js" import FlowTable from "./flowtable.js"; import FlowView from "./flowview/index.js"; var MainView = React.createClass({ - mixins: [Router], contextTypes: { flowStore: React.PropTypes.object.isRequired, }, @@ -41,9 +40,9 @@ var MainView = React.createClass({ }, getViewFilt: function () { try { - var filtStr = this.getQuery()[Query.SEARCH]; + var filtStr = this.props.query[Query.SEARCH]; var filt = filtStr ? Filt.parse(filtStr) : () => true; - var highlightStr = this.getQuery()[Query.HIGHLIGHT]; + var highlightStr = this.props.query[Query.HIGHLIGHT]; var highlight = highlightStr ? Filt.parse(highlightStr) : () => false; } catch (e) { console.error("Error when processing filter: " + e); @@ -94,10 +93,10 @@ var MainView = React.createClass({ selectFlow: function (flow) { if (flow) { var tab = this.props.routeParams.detailTab || "request"; - this.updateLocation(`/flows/${flow.id}/${tab}`); + this.props.updateLocation(`/flows/${flow.id}/${tab}`); this.refs.flowTable.scrollIntoView(flow); } else { - this.updateLocation("/flows"); + this.props.updateLocation("/flows"); } }, selectFlowRelative: function (shift) { @@ -225,6 +224,8 @@ var MainView = React.createClass({ key="flowDetails" ref="flowDetails" tab={this.props.routeParams.detailTab} + query={this.props.query} + updateLocation={this.props.updateLocation} flow={selected}/> ]; } else { diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js index d17a15223..822349961 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 = [ , - + ]; } else { eventlog = null; } - var children = React.cloneElement( - this.props.children, - { ref: "view", location: this.props.location } - ); return (
-
- {children} +
+ {React.cloneElement( + this.props.children, + { ref: "view", location: this.props.location , updateLocation: this.updateLocation, query } + )} {eventlog}
@@ -125,12 +147,12 @@ var ProxyAppMain = React.createClass({ import { Route, Router as ReactRouter, hashHistory, Redirect} from "react-router"; export var app = ( - - - - - - - - -); \ No newline at end of file + + + + + + + + +);