diff options
Diffstat (limited to 'web/src/js')
-rw-r--r-- | web/src/js/components/FlowTable.jsx | 20 | ||||
-rw-r--r-- | web/src/js/components/FlowView.jsx | 100 | ||||
-rw-r--r-- | web/src/js/components/FlowView/Messages.jsx | 46 | ||||
-rw-r--r-- | web/src/js/components/MainView.jsx | 55 | ||||
-rw-r--r-- | web/src/js/components/ProxyApp.jsx | 2 | ||||
-rw-r--r-- | web/src/js/utils.js | 7 |
6 files changed, 60 insertions, 170 deletions
diff --git a/web/src/js/components/FlowTable.jsx b/web/src/js/components/FlowTable.jsx index 24c1f3a1..e3e3d505 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} /> ))} <tr style={{ height: vScroll.paddingBottom }}></tr> @@ -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 fbdbb049..25e7bb9f 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) { - - 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 ( - <div className="flow-detail"> - <Nav - flow={flow} - tabs={tabs} - active={active} - onSelectTab={this.props.selectTab} - /> - <Tab ref={ tab => this.tabComponent = tab } flow={flow} updateFlow={updateFlow} /> - {this.props.promptOpen && ( - <div>fixme</div> - )} - </div> - ) - } + const Tab = allTabs[_.capitalize(tabName)] + + return ( + <div className="flow-detail"> + <Nav + tabs={tabs} + active={tabName} + onSelectTab={selectTab} + /> + <Tab flow={flow}/> + </div> + ) } 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 b69dfb69..c1af36c5 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 { </section> ) } - - - 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 { </section> ) } - - 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 e2bedc88..03bfce7f 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 { - - static propTypes = { - highlight: PropTypes.string, - sort: PropTypes.object, - } +MainView.propTypes = { + hasSelection: PropTypes.bool.isRequired, +} - render() { - const { flows, selectedFlow, highlight } = this.props - return ( - <div className="main-view"> - <FlowTable - ref="flowTable" - flows={flows} - selected={selectedFlow} - highlight={highlight} - onSelect={this.props.selectFlow} - /> - {selectedFlow && [ - <Splitter key="splitter"/>, - <FlowView - key="flowDetails" - ref="flowDetails" - tab={this.props.tab} - updateFlow={data => this.props.updateFlow(selectedFlow, data)} - flow={selectedFlow} - /> - ]} - </div> - ) - } +function MainView({ hasSelection }) { + return ( + <div className="main-view"> + <FlowTable/> + {hasSelection && <Splitter key="splitter"/>} + {hasSelection && <FlowView key="flowDetails"/>} + </div> + ) } 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 8c3970bc..15384e02 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 ( <div id="container" tabIndex="0"> <Header/> diff --git a/web/src/js/utils.js b/web/src/js/utils.js index 7c1719ae..80f0c42a 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) } |