Merge pull request #1483 from gzzhanghao/history

[web] Use history object instead of react-router

web/package.json

@@ -7,7 +7,7 @@
     "start": "gulp"
   },
   "jest": {
-    "testRegex": "__tests__/.*\\Spec.js$",
+    "testRegex": "__tests__/.*Spec.js$",
     "testPathDirs": [
       "<rootDir>/src/js"
     ],
@@ -19,16 +19,16 @@
     "bootstrap": "^3.3.6",
     "classnames": "^2.2.5",
     "flux": "^2.1.1",
+    "history": "^3.0.0",
     "lodash": "^4.11.2",
     "react": "^15.1.0",
+    "react-codemirror": "^0.2.6",
     "react-dom": "^15.1.0",
     "react-redux": "^4.4.5",
-    "react-router": "^2.4.0",
     "redux": "^3.5.2",
     "redux-logger": "^2.6.1",
     "redux-thunk": "^2.1.0",
-    "shallowequal": "^0.2.2",
-    "react-codemirror": "^0.2.6"
+    "shallowequal": "^0.2.2"
   },
   "devDependencies": {
     "babel-core": "^6.7.7",

web/src/js/app.jsx

@@ -3,10 +3,8 @@ import { render } from 'react-dom'
 import { applyMiddleware, createStore } from 'redux'
 import { Provider } from 'react-redux'
 import thunk from 'redux-thunk'
-import { Route, Router as ReactRouter, hashHistory, Redirect } from 'react-router'
 
 import ProxyApp from './components/ProxyApp'
-import MainView from './components/MainView'
 import rootReducer from './ducks/index'
 import { add as addLog } from './ducks/eventLog'
 
@@ -32,13 +30,7 @@ window.addEventListener('error', msg => {
 document.addEventListener('DOMContentLoaded', () => {
     render(
         <Provider store={store}>
-            <ReactRouter history={hashHistory}>
-                <Redirect from="/" to="/flows" />
-                <Route path="/" component={ProxyApp}>
-                    <Route path="flows" component={MainView}/>
-                    <Route path="flows/:flowId/:detailTab" component={MainView}/>
-                </Route>
-            </ReactRouter>
+            <ProxyApp />
         </Provider>,
         document.getElementById("mitmproxy")
     )

web/src/js/components/MainView.jsx

@@ -29,8 +29,7 @@ class MainView extends Component {
                     <FlowView
                         key="flowDetails"
                         ref="flowDetails"
-                        tab={this.props.routeParams.detailTab}
-                        query={this.props.query}
+                        tab={this.props.tab}
                         updateFlow={data => this.props.updateFlow(selectedFlow, data)}
                         flow={selectedFlow}
                     />
@@ -45,7 +44,8 @@ export default connect(
         flows: state.flowView.data,
         filter: state.flowView.filter,
         highlight: state.flowView.highlight,
-        selectedFlow: state.flows.byId[state.flows.selected[0]]
+        selectedFlow: state.flows.byId[state.flows.selected[0]],
+        tab: state.ui.flow.tab,
     }),
     {
         selectFlow: flowsActions.select,

web/src/js/components/ProxyApp.jsx

@@ -1,58 +1,77 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
+import { createHashHistory, useQueries } from 'history'
 
 import { init as appInit, destruct as appDestruct } from '../ducks/app'
 import { onKeyDown } from '../ducks/ui/keyboard'
+import { updateFilter, updateHighlight } from '../ducks/flowView'
+import { selectTab } from '../ducks/ui/flow'
+import { select as selectFlow } from '../ducks/flows'
+import { Query } from '../actions'
+import MainView from './MainView'
 import Header from './Header'
 import EventLog from './EventLog'
 import Footer from './Footer'
 
 class ProxyAppMain extends Component {
 
-    static contextTypes = {
-        router: PropTypes.object.isRequired,
+    flushToStore(location) {
+        const components = location.pathname.split('/').filter(v => v)
+        const query = location.query || {}
+
+        if (components.length > 2) {
+            this.props.selectFlow(components[1])
+            this.props.selectTab(components[2])
+        } else {
+            this.props.selectFlow(null)
+            this.props.selectTab(null)
+        }
+
+        this.props.updateFilter(query[Query.SEARCH])
+        this.props.updateHighlight(query[Query.HIGHLIGHT])
+    }
+
+    flushToHistory(props) {
+        const query = { ...query }
+
+        if (props.filter) {
+            query[Query.SEARCH] = props.filter
+        }
+
+        if (props.highlight) {
+            query[Query.HIGHLIGHT] = props.highlight
+        }
+
+        if (props.selectedFlowId) {
+            this.history.push({ pathname: `/flows/${props.selectedFlowId}/${props.tab}`, query })
+        } else {
+            this.history.push({ pathname: '/flows', query })
+        }
     }
 
     componentWillMount() {
-        this.props.appInit(this.context.router)
+        this.props.appInit()
+        this.history = useQueries(createHashHistory)()
+        this.unlisten = this.history.listen(location => this.flushToStore(location))
         window.addEventListener('keydown', this.props.onKeyDown);
     }
 
     componentWillUnmount() {
-        this.props.appDestruct(this.context.router)
+        this.props.appDestruct()
+        this.unlisten()
         window.removeEventListener('keydown', this.props.onKeyDown);
     }
 
     componentWillReceiveProps(nextProps) {
-        /*
-        FIXME: improve react-router -> redux integration.
-        if (nextProps.location.query[Query.SEARCH] !== nextProps.filter) {
-            this.props.updateFilter(nextProps.location.query[Query.SEARCH], false)
-        }
-        if (nextProps.location.query[Query.HIGHLIGHT] !== nextProps.highlight) {
-            this.props.updateHighlight(nextProps.location.query[Query.HIGHLIGHT], false)
-        }
-        */
-        if (nextProps.query === this.props.query && nextProps.selectedFlowId === this.props.selectedFlowId && nextProps.panel === this.props.panel) {
-            return
-        }
-        if (nextProps.selectedFlowId) {
-            this.context.router.replace({ pathname: `/flows/${nextProps.selectedFlowId}/${nextProps.panel}`, query: nextProps.query })
-        } else {
-            this.context.router.replace({ pathname: '/flows', query: nextProps.query })
-        }
-
+        this.flushToHistory(nextProps)
     }
 
     render() {
-        const { showEventLog, location, children, query } = this.props
+        const { showEventLog, location, filter, highlight } = this.props
         return (
             <div id="container" tabIndex="0">
                 <Header/>
-                {React.cloneElement(
-                    children,
-                    { ref: 'view', location, query }
-                )}
+                <MainView />
                 {showEventLog && (
                     <EventLog key="eventlog"/>
                 )}
@@ -65,13 +84,18 @@ class ProxyAppMain extends Component {
 export default connect(
     state => ({
         showEventLog: state.eventLog.visible,
-        query: state.flowView.filter,
-        panel: state.ui.flow.tab,
+        filter: state.flowView.filter,
+        highlight: state.flowView.highlight,
+        tab: state.ui.flow.tab,
         selectedFlowId: state.flows.selected[0]
     }),
     {
         appInit,
         appDestruct,
-        onKeyDown
+        onKeyDown,
+        updateFilter,
+        updateHighlight,
+        selectTab,
+        selectFlow
     }
 )(ProxyAppMain)

web/src/js/ducks/ui/flow.js

@@ -85,7 +85,7 @@ export default function reducer(state = defaultState, action) {
         case SET_TAB:
             return {
                 ...state,
-                tab: action.tab,
+                tab: action.tab ? action.tab : 'request',
                 displayLarge: false,
                 showFullContent: false
             }