From d01e49c6d5e474700956a9b7f1171a4229bfa750 Mon Sep 17 00:00:00 2001 From: Jason Date: Sun, 19 Jun 2016 02:53:15 +0800 Subject: [web] replace SetttingsActions.update with settings.updateSettings --- web/src/js/actions.js | 23 +---------------- web/src/js/components/Footer.jsx | 9 ++++++- web/src/js/components/Header.jsx | 9 ++----- web/src/js/components/Header/MainMenu.jsx | 39 ++++++++++++++--------------- web/src/js/components/Header/OptionMenu.jsx | 33 ++++++++++++++++-------- web/src/js/components/ProxyApp.jsx | 7 +++--- web/src/js/ducks/settings.js | 20 +++++++-------- 7 files changed, 65 insertions(+), 75 deletions(-) (limited to 'web/src') diff --git a/web/src/js/actions.js b/web/src/js/actions.js index 588245ae..bb1d0dd6 100644 --- a/web/src/js/actions.js +++ b/web/src/js/actions.js @@ -39,27 +39,6 @@ export var ConnectionActions = { } }; -export var SettingsActions = { - update: function (settings) { - - $.ajax({ - type: "PUT", - url: "/settings", - contentType: 'application/json', - data: JSON.stringify(settings) - }); - - /* - //Facebook Flux: We do an optimistic update on the client already. - AppDispatcher.dispatchViewAction({ - type: ActionTypes.SETTINGS_STORE, - cmd: StoreCmds.UPDATE, - data: settings - }); - */ - } -}; - export var FlowActions = { accept: function (flow) { $.post("/flows/" + flow.id + "/accept"); @@ -119,4 +98,4 @@ export var Query = { SEARCH: "s", HIGHLIGHT: "h", SHOW_EVENTLOG: "e" -}; \ No newline at end of file +}; diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx index 1f6de2d7..82d6d8a1 100644 --- a/web/src/js/components/Footer.jsx +++ b/web/src/js/components/Footer.jsx @@ -1,11 +1,12 @@ import React from 'react' +import { connect } from 'react-redux' import { formatSize } from '../utils.js' Footer.propTypes = { settings: React.PropTypes.object.isRequired, } -export default function Footer({ settings }) { +function Footer({ settings }) { return ( ) } + +export default connect( + state => ({ + settings: state.settings.settings, + }) +)(Footer) diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index 93ca5154..ab25eb41 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -12,10 +12,6 @@ import {setActiveMenu} from '../ducks/ui.js' class Header extends Component { static entries = [MainMenu, ViewMenu, OptionMenu] - static propTypes = { - settings: PropTypes.object.isRequired, - } - handleClick(active, e) { e.preventDefault() this.props.setActiveMenu(active.title) @@ -24,7 +20,7 @@ class Header extends Component { } render() { - const { settings, updateLocation, query, selectedFlow, activeMenu} = this.props + const { updateLocation, query, selectedFlow, activeMenu} = this.props let entries = [...Header.entries] if(selectedFlow) @@ -47,10 +43,9 @@ class Header extends Component {
+ />
) diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx index 7b0b542c..a466a980 100644 --- a/web/src/js/components/Header/MainMenu.jsx +++ b/web/src/js/components/Header/MainMenu.jsx @@ -1,8 +1,8 @@ import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' import FilterInput from './FilterInput' import { Query } from '../../actions.js' -import {setInterceptPattern} from "../../ducks/settings" -import { connect } from 'react-redux' +import { updateSettings } from '../../ducks/settings' class MainMenu extends Component { @@ -10,14 +10,16 @@ class MainMenu extends Component { static route = 'flows' static propTypes = { - settings: React.PropTypes.object.isRequired, + query: PropTypes.object.isRequired, + settings: PropTypes.object.isRequired, + updateLocation: PropTypes.func.isRequired, + onSettingsChange: PropTypes.func.isRequired, } constructor(props, context) { super(props, context) this.onSearchChange = this.onSearchChange.bind(this) this.onHighlightChange = this.onHighlightChange.bind(this) - this.onInterceptChange = this.onInterceptChange.bind(this) } onSearchChange(val) { @@ -28,16 +30,8 @@ class MainMenu extends Component { this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val }) } - onInterceptChange(val) { - this.props.setInterceptPattern(val); - } - render() { - const { query, settings } = this.props - - const search = query[Query.SEARCH] || '' - const highlight = query[Query.HIGHLIGHT] || '' - const intercept = settings.intercept || '' + const { query, settings, onSettingsChange } = this.props return (
@@ -47,7 +41,7 @@ class MainMenu extends Component { placeholder="Search" type="search" color="black" - value={search} + value={query[Query.SEARCH] || ''} onChange={this.onSearchChange} /> onSettingsChange({ intercept })} />
@@ -73,6 +67,11 @@ class MainMenu extends Component { } } -export default connect(undefined, { - setInterceptPattern -})(MainMenu); +export default connect( + state => ({ + settings: state.settings.settings, + }), + { + onSettingsChange: updateSettings, + } +)(MainMenu); diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index 44f309fd..f871ec92 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -1,61 +1,72 @@ import React, { PropTypes } from 'react' +import { connect } from 'react-redux' import ToggleButton from '../common/ToggleButton' import ToggleInputButton from '../common/ToggleInputButton' -import { SettingsActions } from '../../actions.js' +import { updateSettings } from '../../ducks/settings' OptionMenu.title = 'Options' OptionMenu.propTypes = { settings: PropTypes.object.isRequired, + onSettingsChange: PropTypes.func.isRequired, } -export default function OptionMenu({ settings }) { +function OptionMenu({ settings, onSettingsChange }) { // @todo use settings.map return (
SettingsActions.update({ showhost: !settings.showhost })} + onToggle={() => onSettingsChange({ showhost: !settings.showhost })} /> SettingsActions.update({ no_upstream_cert: !settings.no_upstream_cert })} + onToggle={() => onSettingsChange({ no_upstream_cert: !settings.no_upstream_cert })} /> SettingsActions.update({ rawtcp: !settings.rawtcp })} + onToggle={() => onSettingsChange({ rawtcp: !settings.rawtcp })} /> SettingsActions.update({ http2: !settings.http2 })} + onToggle={() => onSettingsChange({ http2: !settings.http2 })} /> SettingsActions.update({ anticache: !settings.anticache })} + onToggle={() => onSettingsChange({ anticache: !settings.anticache })} /> SettingsActions.update({ anticomp: !settings.anticomp })} + onToggle={() => onSettingsChange({ anticomp: !settings.anticomp })} /> SettingsActions.update({ stickyauth: !settings.stickyauth ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stickyauth: !settings.stickyauth ? txt : null })} /> SettingsActions.update({ stickycookie: !settings.stickycookie ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stickycookie: !settings.stickycookie ? txt : null })} /> SettingsActions.update({ stream: !settings.stream ? txt : null })} + onToggleChanged={txt => onSettingsChange({ stream: !settings.stream ? txt : null })} />
) } + +export default connect( + state => ({ + settings: state.settings.settings, + }), + { + onSettingsChange: updateSettings, + } +)(OptionMenu) diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx index 39cadff5..5d795b57 100644 --- a/web/src/js/components/ProxyApp.jsx +++ b/web/src/js/components/ProxyApp.jsx @@ -111,11 +111,11 @@ class ProxyAppMain extends Component { } render() { - const { showEventLog, location, children, settings } = this.props + const { showEventLog, location, children } = this.props const query = this.getQuery() return (
-
+
{React.cloneElement( children, { ref: 'view', location, query, updateLocation: this.updateLocation } @@ -123,7 +123,7 @@ class ProxyAppMain extends Component { {showEventLog && ( )} -
) } @@ -132,6 +132,5 @@ class ProxyAppMain extends Component { export default connect( state => ({ showEventLog: state.eventLog.visible, - settings: state.settings.settings, }) )(ProxyAppMain) diff --git a/web/src/js/ducks/settings.js b/web/src/js/ducks/settings.js index 73c62120..3e6c8366 100644 --- a/web/src/js/ducks/settings.js +++ b/web/src/js/ducks/settings.js @@ -1,8 +1,8 @@ -import {fetchApi} from "../utils"; +import {fetchApi} from '../utils'; -export const REQUEST_SETTINGS = "REQUEST_SETTINGS" -export const RECEIVE_SETTINGS = "RECEIVE_SETTINGS" -export const UPDATE_SETTINGS = "UPDATE_SETTINGS" +export const REQUEST_SETTINGS = 'REQUEST_SETTINGS' +export const RECEIVE_SETTINGS = 'RECEIVE_SETTINGS' +export const UPDATE_SETTINGS = 'UPDATE_SETTINGS' const defaultState = { settings: {}, @@ -49,20 +49,20 @@ export default function reducer(state = defaultState, action) { export function updateSettings(event) { /* This action creator takes all WebSocket events */ - if (event.cmd === "update") { + if (event.cmd === 'update') { return { type: UPDATE_SETTINGS, settings: event.data } } - console.error("unknown settings update", event) + console.error('unknown settings update', event) } export function fetchSettings() { return dispatch => { dispatch({type: REQUEST_SETTINGS}) - return fetchApi("/settings") + return fetchApi('/settings') .then(response => response.json()) .then(json => dispatch({type: RECEIVE_SETTINGS, settings: json.data}) @@ -71,7 +71,7 @@ export function fetchSettings() { } } -export function setInterceptPattern(intercept) { - return dispatch => - fetchApi.put("/settings", {intercept}) +export function updateSettings(settings) { + fetchApi.put('/settings', settings) + return { type: SET_INTERCEPT } } -- cgit v1.2.3