From 1d27334ff764076f067c8f56cbe462fe2550dc11 Mon Sep 17 00:00:00 2001 From: Jason Date: Mon, 15 Aug 2016 23:09:45 +0800 Subject: [web] remove react-router --- web/src/js/app.jsx | 10 +---- web/src/js/components/MainView.jsx | 6 +-- web/src/js/components/ProxyApp.jsx | 83 ++++++++++++++++++++++++-------------- web/src/js/ducks/ui/flow.js | 2 +- 4 files changed, 58 insertions(+), 43 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx index 726b2ae1..f04baea0 100644 --- a/web/src/js/app.jsx +++ b/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( - - - - - - - + , document.getElementById("mitmproxy") ) diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx index f45f9eef..8be6f21c 100644 --- a/web/src/js/components/MainView.jsx +++ b/web/src/js/components/MainView.jsx @@ -29,8 +29,7 @@ class MainView extends Component { 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, diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index f8a6e262..5b0070c9 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -1,58 +1,76 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' +import { createHashHistory } 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('/') + + 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(location.query[Query.SEARCH]) + this.props.updateHighlight(location.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 = 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 (
- {React.cloneElement( - children, - { ref: 'view', location, query } - )} + {showEventLog && ( )} @@ -65,13 +83,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) diff --git a/web/src/js/ducks/ui/flow.js b/web/src/js/ducks/ui/flow.js index c9435676..0a31cc94 100644 --- a/web/src/js/ducks/ui/flow.js +++ b/web/src/js/ducks/ui/flow.js @@ -58,7 +58,7 @@ export default function reducer(state = defaultState, action) { case SET_TAB: return { ...state, - tab: action.tab, + tab: action.tab ? action.tab : 'request', displayLarge: false, } -- cgit v1.2.3 From 81b726bab1cc403977ef4aea060f88ab8a0a66fd Mon Sep 17 00:00:00 2001 From: Jason Date: Tue, 16 Aug 2016 00:27:57 +0800 Subject: [web] bug fix --- web/src/js/components/ProxyApp.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'web/src/js') diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 5b0070c9..d76816e5 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -1,6 +1,6 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' -import { createHashHistory } from 'history' +import { createHashHistory, useQueries } from 'history' import { init as appInit, destruct as appDestruct } from '../ducks/app' import { onKeyDown } from '../ducks/ui/keyboard' @@ -16,7 +16,8 @@ import Footer from './Footer' class ProxyAppMain extends Component { flushToStore(location) { - const components = location.pathname.split('/') + const components = location.pathname.split('/').filter(v => v) + const query = location.query || {} if (components.length > 2) { this.props.selectFlow(components[1]) @@ -26,8 +27,8 @@ class ProxyAppMain extends Component { this.props.selectTab(null) } - this.props.updateFilter(location.query[Query.SEARCH]) - this.props.updateHighlight(location.query[Query.HIGHLIGHT]) + this.props.updateFilter(query[Query.SEARCH]) + this.props.updateHighlight(query[Query.HIGHLIGHT]) } flushToHistory(props) { @@ -50,7 +51,7 @@ class ProxyAppMain extends Component { componentWillMount() { this.props.appInit() - this.history = createHashHistory() + this.history = useQueries(createHashHistory)() this.unlisten = this.history.listen(location => this.flushToStore(location)) window.addEventListener('keydown', this.props.onKeyDown); } -- cgit v1.2.3