[web] minor fixes and cleanup

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)

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 (
-            <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>
-        )
-    }
+    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,

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)

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 (
-            <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)

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/>

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)
     }