From 851bb4bf68c20f22c195a4397dacb8cdfdb65fba Mon Sep 17 00:00:00 2001 From: Jason Date: Thu, 9 Jun 2016 13:35:41 +0800 Subject: [web] rewrite ProxyApp and MainView with es6 --- web/src/js/components/MainView.js | 191 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 web/src/js/components/MainView.js (limited to 'web/src/js/components/MainView.js') diff --git a/web/src/js/components/MainView.js b/web/src/js/components/MainView.js new file mode 100644 index 00000000..19ff5e4d --- /dev/null +++ b/web/src/js/components/MainView.js @@ -0,0 +1,191 @@ +import React, { Component } 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" + +class MainView extends Component { + + /** + * @todo move to actions + * @todo replace with mapStateToProps + */ + componentWillReceiveProps(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) + } + } + + /** + * @todo move to actions + */ + selectFlow(flow) { + if (flow) { + this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || "request"}`) + } else { + this.props.updateLocation("/flows") + } + } + + /** + * @todo move to actions + */ + selectFlowRelative(shift) { + const { flows, routeParams, selectedFlow } = this.props + let index = 0 + if (!routeParams.flowId) { + if (shift < 0) { + index = flows.length - 1 + } + } else { + index = Math.min( + Math.max(0, flows.indexOf(selectedFlow) + shift), + flows.length - 1 + ) + } + this.selectFlow(flows[index]) + } + + /** + * @todo move to actions + */ + onMainKeyDown(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() { + const { selectedFlow } = this.props + return ( +
+ + {selectedFlow && [ + , + + ]} +
+ ) + } +} + +export default 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) -- cgit v1.2.3 From 8e538c76303fa45a78ac04cfd830c128767f38d9 Mon Sep 17 00:00:00 2001 From: Jason Date: Thu, 9 Jun 2016 14:20:14 +0800 Subject: [web] fix updateLocation --- web/src/js/components/MainView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web/src/js/components/MainView.js') diff --git a/web/src/js/components/MainView.js b/web/src/js/components/MainView.js index 19ff5e4d..6172ce77 100644 --- a/web/src/js/components/MainView.js +++ b/web/src/js/components/MainView.js @@ -155,7 +155,7 @@ class MainView extends Component {
this.selectFlow(flow)} selected={selectedFlow} /> {selectedFlow && [ -- cgit v1.2.3