diff options
author | Jason <jason.daurus@gmail.com> | 2016-06-09 13:35:41 +0800 |
---|---|---|
committer | Jason <jason.daurus@gmail.com> | 2016-06-09 13:35:41 +0800 |
commit | 851bb4bf68c20f22c195a4397dacb8cdfdb65fba (patch) | |
tree | 7ad37c9abd3c7170b785e9dac57324bd79673583 /web/src/js/components/mainview.js | |
parent | 7707d096d254a8ce7e1079efeb7584d3cc04bf65 (diff) | |
download | mitmproxy-851bb4bf68c20f22c195a4397dacb8cdfdb65fba.tar.gz mitmproxy-851bb4bf68c20f22c195a4397dacb8cdfdb65fba.tar.bz2 mitmproxy-851bb4bf68c20f22c195a4397dacb8cdfdb65fba.zip |
[web] rewrite ProxyApp and MainView with es6
Diffstat (limited to 'web/src/js/components/mainview.js')
-rw-r--r-- | web/src/js/components/mainview.js | 184 |
1 files changed, 0 insertions, 184 deletions
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js deleted file mode 100644 index 5915c9fc..00000000 --- a/web/src/js/components/mainview.js +++ /dev/null @@ -1,184 +0,0 @@ -import React from "react"; - -import {FlowActions} from "../actions.js"; -import {Query} from "../actions.js"; -import {Key} from "../utils.js"; -import {Splitter} from "./common.js" -import FlowTable from "./flowtable.js"; -import FlowView from "./flowview/index.js"; -import {connect} from 'react-redux' -import {selectFlow, setFilter, setHighlight} from "../ducks/flows"; - - -var MainView = React.createClass({ - componentWillReceiveProps: function (nextProps) { - // Update redux store with route changes - if(nextProps.routeParams.flowId !== (nextProps.selectedFlow || {}).id) { - this.props.selectFlow(nextProps.routeParams.flowId) - } - if(nextProps.location.query[Query.SEARCH] !== nextProps.filter) { - this.props.setFilter(nextProps.location.query[Query.SEARCH], false) - } - if (nextProps.location.query[Query.HIGHLIGHT] !== nextProps.highlight) { - this.props.setHighlight(nextProps.location.query[Query.HIGHLIGHT], false) - } - }, - selectFlow: function (flow) { - // TODO: This belongs into redux - if (flow) { - let tab = this.props.routeParams.detailTab || "request"; - this.props.updateLocation(`/flows/${flow.id}/${tab}`); - } else { - this.props.updateLocation("/flows"); - } - }, - selectFlowRelative: function (shift) { - // TODO: This belongs into redux - let flows = this.props.flows, - index - if (!this.props.routeParams.flowId) { - if (shift < 0) { - index = flows.length - 1 - } else { - index = 0 - } - } else { - index = flows.indexOf(this.props.selectedFlow) - index = Math.min( - Math.max(0, index + shift), - flows.length - 1 - ) - } - this.selectFlow(flows[index]) - }, - onMainKeyDown: function (e) { - var flow = this.props.selectedFlow; - if (e.ctrlKey) { - return; - } - switch (e.keyCode) { - case Key.K: - case Key.UP: - this.selectFlowRelative(-1); - break; - case Key.J: - case Key.DOWN: - this.selectFlowRelative(+1); - break; - case Key.SPACE: - case Key.PAGE_DOWN: - this.selectFlowRelative(+10); - break; - case Key.PAGE_UP: - this.selectFlowRelative(-10); - break; - case Key.END: - this.selectFlowRelative(+1e10); - break; - case Key.HOME: - this.selectFlowRelative(-1e10); - break; - case Key.ESC: - this.selectFlow(null); - break; - case Key.H: - case Key.LEFT: - if (this.refs.flowDetails) { - this.refs.flowDetails.nextTab(-1); - } - break; - case Key.L: - case Key.TAB: - case Key.RIGHT: - if (this.refs.flowDetails) { - this.refs.flowDetails.nextTab(+1); - } - break; - case Key.C: - if (e.shiftKey) { - FlowActions.clear(); - } - break; - case Key.D: - if (flow) { - if (e.shiftKey) { - FlowActions.duplicate(flow); - } else { - FlowActions.delete(flow); - } - } - break; - case Key.A: - if (e.shiftKey) { - FlowActions.accept_all(); - } else if (flow && flow.intercepted) { - FlowActions.accept(flow); - } - break; - case Key.R: - if (!e.shiftKey && flow) { - FlowActions.replay(flow); - } - break; - case Key.V: - if (e.shiftKey && flow && flow.modified) { - FlowActions.revert(flow); - } - break; - case Key.E: - if (this.refs.flowDetails) { - this.refs.flowDetails.promptEdit(); - } - break; - case Key.SHIFT: - break; - default: - console.debug("keydown", e.keyCode); - return; - } - e.preventDefault(); - }, - render: function () { - - var details = null; - if (this.props.selectedFlow) { - details = [ - <Splitter key="splitter"/>, - <FlowView - key="flowDetails" - ref="flowDetails" - tab={this.props.routeParams.detailTab} - query={this.props.query} - updateLocation={this.props.updateLocation} - flow={this.props.selectedFlow}/> - ] - } - - return ( - <div className="main-view"> - <FlowTable ref="flowTable" - selectFlow={this.selectFlow} - selected={this.props.selectedFlow} /> - {details} - </div> - ); - } -}); - -const MainViewContainer = connect( - state => ({ - flows: state.flows.view, - filter: state.flows.filter, - highlight: state.flows.highlight, - selectedFlow: state.flows.all.byId[state.flows.selected[0]] - }), - dispatch => ({ - selectFlow: flowId => dispatch(selectFlow(flowId)), - setFilter: filter => dispatch(setFilter(filter)), - setHighlight: highlight => dispatch(setHighlight(highlight)) - }), - undefined, - {withRef: true} -)(MainView); - -export default MainViewContainer; |