From 42895f4fec0f914d2ca3696c6962830140610e6e Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 25 Oct 2017 15:25:41 +0200 Subject: [PATCH] [web] minor fixes and cleanup --- web/src/js/components/FlowTable.jsx | 20 ++++- web/src/js/components/FlowView.jsx | 98 ++++++--------------- web/src/js/components/FlowView/Messages.jsx | 46 ---------- web/src/js/components/MainView.jsx | 55 +++--------- web/src/js/components/ProxyApp.jsx | 2 +- web/src/js/utils.js | 7 +- 6 files changed, 59 insertions(+), 169 deletions(-) diff --git a/web/src/js/components/FlowTable.jsx b/web/src/js/components/FlowTable.jsx index 24c1f3a1e..e3e3d5050 100644 --- a/web/src/js/components/FlowTable.jsx +++ b/web/src/js/components/FlowTable.jsx @@ -1,17 +1,20 @@ import React from 'react' import PropTypes from 'prop-types' import ReactDOM from 'react-dom' +import { connect } from 'react-redux' import shallowEqual from 'shallowequal' import AutoScroll from './helpers/AutoScroll' import { calcVScroll } from './helpers/VirtualScroll' import FlowTableHead from './FlowTable/FlowTableHead' import FlowRow from './FlowTable/FlowRow' import Filt from "../filt/filt" +import * as flowsActions from '../ducks/flows' + class FlowTable extends React.Component { static propTypes = { - onSelect: PropTypes.func.isRequired, + selectFlow: PropTypes.func.isRequired, flows: PropTypes.array.isRequired, rowHeight: PropTypes.number, highlight: PropTypes.string, @@ -107,7 +110,7 @@ class FlowTable extends React.Component { flow={flow} selected={flow === selected} highlighted={isHighlighted(flow)} - onSelect={this.props.onSelect} + onSelect={this.props.selectFlow} /> ))} @@ -118,4 +121,15 @@ class FlowTable extends React.Component { } } -export default AutoScroll(FlowTable) +FlowTable = AutoScroll(FlowTable) + +export default connect( + state => ({ + flows: state.flows.view, + highlight: state.flows.highlight, + selected: state.flows.byId[state.flows.selected[0]], + }), + { + selectFlow: flowsActions.select, + } +)(FlowTable) diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx index fbdbb0496..25e7bb9fc 100644 --- a/web/src/js/components/FlowView.jsx +++ b/web/src/js/components/FlowView.jsx @@ -3,93 +3,47 @@ import { connect } from 'react-redux' import _ from 'lodash' import Nav from './FlowView/Nav' -import { Request, Response, ErrorView as Error } from './FlowView/Messages' +import { ErrorView as Error, Request, Response } from './FlowView/Messages' import Details from './FlowView/Details' import { selectTab } from '../ducks/ui/flow' -class FlowView extends Component { +export const allTabs = { Request, Response, Error, Details } - static allTabs = { Request, Response, Error, Details } +function FlowView({ flow, tabName, selectTab }) { - constructor(props, context) { - super(props, context) - this.onPromptFinish = this.onPromptFinish.bind(this) - } + // only display available tab names + const tabs = ['request', 'response', 'error'].filter(k => flow[k]) + tabs.push("details") - onPromptFinish(edit) { - this.props.setPrompt(false) - if (edit && this.tabComponent) { - this.tabComponent.edit(edit) + if (tabs.indexOf(tabName) < 0) { + if (tabName === 'response' && flow.error) { + tabName = 'error' + } else if (tabName === 'error' && flow.response) { + tabName = 'response' + } else { + tabName = tabs[0] } } - getPromptOptions() { - switch (this.props.tab) { + const Tab = allTabs[_.capitalize(tabName)] - case 'request': - return [ - 'method', - 'url', - { text: 'http version', key: 'v' }, - 'header' - ] - break - - case 'response': - return [ - { text: 'http version', key: 'v' }, - 'code', - 'message', - 'header' - ] - break - - case 'details': - return - - default: - throw 'Unknown tab for edit: ' + this.props.tab - } - } - - render() { - let { flow, tab: active, updateFlow } = this.props - const tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']) - - if (tabs.indexOf(active) < 0) { - if (active === 'response' && flow.error) { - active = 'error' - } else if (active === 'error' && flow.response) { - active = 'response' - } else { - active = tabs[0] - } - } - - const Tab = FlowView.allTabs[_.capitalize(active)] - - return ( -
-
- ) - } + return ( +
+
+ ) } export default connect( state => ({ - promptOpen: state.ui.promptOpen, - tab: state.ui.flow.tab + flow: state.flows.byId[state.flows.selected[0]], + tabName: state.ui.flow.tab, }), { selectTab, diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx index b69dfb69d..c1af36c53 100644 --- a/web/src/js/components/FlowView/Messages.jsx +++ b/web/src/js/components/FlowView/Messages.jsx @@ -120,30 +120,6 @@ export class Request extends Component { ) } - - - edit(k) { - throw "unimplemented" - /* - switch (k) { - case 'm': - this.refs.requestLine.refs.method.focus() - break - case 'u': - this.refs.requestLine.refs.url.focus() - break - case 'v': - this.refs.requestLine.refs.httpVersion.focus() - break - case 'h': - this.refs.headers.edit() - break - default: - throw new Error(`Unimplemented: ${k}`) - } - */ - } - } Request = Message(Request) @@ -189,28 +165,6 @@ export class Response extends Component { ) } - - edit(k) { - throw "unimplemented" - /* - switch (k) { - case 'c': - this.refs.responseLine.refs.status_code.focus() - break - case 'm': - this.refs.responseLine.refs.msg.focus() - break - case 'v': - this.refs.responseLine.refs.httpVersion.focus() - break - case 'h': - this.refs.headers.edit() - break - default: - throw new Error(`'Unimplemented: ${k}`) - } - */ - } } Response = Message(Response) diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index e2bedc88c..03bfce7fd 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -1,54 +1,27 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import Splitter from './common/Splitter' import FlowTable from './FlowTable' import FlowView from './FlowView' -import * as flowsActions from '../ducks/flows' -class MainView extends Component { +MainView.propTypes = { + hasSelection: PropTypes.bool.isRequired, +} - static propTypes = { - highlight: PropTypes.string, - sort: PropTypes.object, - } - - render() { - const { flows, selectedFlow, highlight } = this.props - return ( -
- - {selectedFlow && [ - , - this.props.updateFlow(selectedFlow, data)} - flow={selectedFlow} - /> - ]} -
- ) - } +function MainView({ hasSelection }) { + return ( +
+ + {hasSelection && } + {hasSelection && } +
+ ) } export default connect( state => ({ - flows: state.flows.view, - filter: state.flows.filter, - highlight: state.flows.highlight, - selectedFlow: state.flows.byId[state.flows.selected[0]], - tab: state.ui.flow.tab, + hasSelection: !!state.flows.byId[state.flows.selected[0]] }), - { - selectFlow: flowsActions.select, - updateFlow: flowsActions.update, - } + {} )(MainView) diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 8c3970bc2..15384e020 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -20,7 +20,7 @@ class ProxyAppMain extends Component { } render() { - const { showEventLog, location, filter, highlight } = this.props + const { showEventLog } = this.props return (
diff --git a/web/src/js/utils.js b/web/src/js/utils.js index 7c1719aea..80f0c42a4 100644 --- a/web/src/js/utils.js +++ b/web/src/js/utils.js @@ -1,6 +1,5 @@ import _ from 'lodash' import React from 'react' -import shallowEqual from 'shallowequal' window._ = _; window.React = React; @@ -126,13 +125,9 @@ export function getDiff(obj1, obj2) { return result } -export const pure = renderFn => class extends React.Component { +export const pure = renderFn => class extends React.PureComponent { static displayName = renderFn.name - shouldComponentUpdate(nextProps) { - return !shallowEqual(this.props, nextProps) - } - render() { return renderFn(this.props) }