diff options
Diffstat (limited to 'web/src/js/components/FlowView')
| -rw-r--r-- | web/src/js/components/FlowView/Messages.jsx | 44 | ||||
| -rw-r--r-- | web/src/js/components/FlowView/Nav.jsx | 31 |
2 files changed, 39 insertions, 36 deletions
diff --git a/web/src/js/components/FlowView/Messages.jsx b/web/src/js/components/FlowView/Messages.jsx index ba6a5f2b..5321edd6 100644 --- a/web/src/js/components/FlowView/Messages.jsx +++ b/web/src/js/components/FlowView/Messages.jsx @@ -1,7 +1,6 @@ -import React, { Component } from 'react' +import React, { Component, PropTypes } from 'react' import _ from 'lodash' -import { FlowActions } from '../../actions.js' import { RequestUtils, isValidHttpVersion, parseUrl, parseHttpVersion } from '../../flow/utils.js' import { Key, formatTimeStamp } from '../../utils.js' import ContentView from '../ContentView' @@ -11,21 +10,21 @@ import Headers from './Headers' class RequestLine extends Component { render() { - const { flow } = this.props + const { flow, onUpdate } = this.props return ( <div className="first-line request-line"> <ValueEditor ref="method" content={flow.request.method} - onDone={method => FlowActions.update(flow, { request: { method } })} + onDone={method => onUpdate({ request: { method } })} inline /> <ValueEditor ref="url" content={RequestUtils.pretty_url(flow.request)} - onDone={url => FlowActions.update(flow, { request: Object.assign({ path: '' }, parseUrl(url)) })} + onDone={url => onUpdate({ request: Object.assign({ path: '' }, parseUrl(url)) })} isValid={url => !!parseUrl(url).host} inline /> @@ -33,7 +32,7 @@ class RequestLine extends Component { <ValueEditor ref="httpVersion" content={flow.request.http_version} - onDone={ver => FlowActions.update(flow, { request: { http_version: parseHttpVersion(ver) } })} + onDone={ver => onUpdate({ request: { http_version: parseHttpVersion(ver) } })} isValid={isValidHttpVersion} inline /> @@ -45,14 +44,14 @@ class RequestLine extends Component { class ResponseLine extends Component { render() { - const { flow } = this.props + const { flow, onUpdate } = this.props return ( <div className="first-line response-line"> <ValueEditor ref="httpVersion" content={flow.response.http_version} - onDone={nextVer => FlowActions.update(flow, { response: { http_version: parseHttpVersion(nextVer) } })} + onDone={nextVer => onUpdate({ response: { http_version: parseHttpVersion(nextVer) } })} isValid={isValidHttpVersion} inline /> @@ -60,7 +59,7 @@ class ResponseLine extends Component { <ValueEditor ref="code" content={flow.response.status_code + ''} - onDone={code => FlowActions.update(flow, { response: { code: parseInt(code) } })} + onDone={code => onUpdate({ response: { code: parseInt(code) } })} isValid={code => /^\d+$/.test(code)} inline /> @@ -68,7 +67,7 @@ class ResponseLine extends Component { <ValueEditor ref="msg" content={flow.response.reason} - onDone={msg => FlowActions.update(flow, { response: { msg } })} + onDone={msg => onUpdate({ response: { msg } })} inline /> </div> @@ -79,15 +78,15 @@ class ResponseLine extends Component { export class Request extends Component { render() { - const { flow } = this.props + const { flow, onUpdate } = this.props return ( <section className="request"> - <RequestLine ref="requestLine" flow={flow}/> + <RequestLine ref="requestLine" flow={flow} onUpdate={onUpdate} /> <Headers ref="headers" message={flow.request} - onChange={headers => FlowActions.update(flow, { request: { headers } })} + onChange={headers => onUpdate({ request: { headers } })} /> <hr/> <ContentView flow={flow} message={flow.request}/> @@ -118,15 +117,15 @@ export class Request extends Component { export class Response extends Component { render() { - const { flow } = this.props + const { flow, onUpdate } = this.props return ( <section className="response"> - <ResponseLine ref="responseLine" flow={flow}/> + <ResponseLine ref="responseLine" flow={flow} onUpdate={onUpdate} /> <Headers ref="headers" message={flow.response} - onChange={headers => FlowActions.update(flow, { response: { headers } })} + onChange={headers => onUpdate({ response: { headers } })} /> <hr/> <ContentView flow={flow} message={flow.response}/> @@ -153,16 +152,3 @@ export class Response extends Component { } } } - -export function Error({ flow }) { - return ( - <section> - <div className="alert alert-warning"> - {flow.error.msg} - <div> - <small>{formatTimeStamp(flow.error.timestamp)}</small> - </div> - </div> - </section> - ) -} diff --git a/web/src/js/components/FlowView/Nav.jsx b/web/src/js/components/FlowView/Nav.jsx index 386c3a6c..b9e15d92 100644 --- a/web/src/js/components/FlowView/Nav.jsx +++ b/web/src/js/components/FlowView/Nav.jsx @@ -1,6 +1,7 @@ import React, { PropTypes } from 'react' +import { connect } from 'react-redux' import classnames from 'classnames' -import { FlowActions } from '../../actions.js' +import * as flowsActions from '../../ducks/flows' NavAction.propTypes = { icon: PropTypes.string.isRequired, @@ -27,9 +28,14 @@ Nav.propTypes = { active: PropTypes.string.isRequired, tabs: PropTypes.array.isRequired, onSelectTab: PropTypes.func.isRequired, + onRemove: PropTypes.func.isRequired, + onDuplicate: PropTypes.func.isRequired, + onReplay: PropTypes.func.isRequired, + onAccept: PropTypes.func.isRequired, + onRevert: PropTypes.func.isRequired, } -export default function Nav({ flow, active, tabs, onSelectTab }) { +function Nav({ flow, active, tabs, onSelectTab, onRemove, onDuplicate, onReplay, onAccept, onRevert }) { return ( <nav className="nav-tabs nav-tabs-sm"> {tabs.map(tab => ( @@ -43,15 +49,26 @@ export default function Nav({ flow, active, tabs, onSelectTab }) { {_.capitalize(tab)} </a> ))} - <NavAction title="[d]elete flow" icon="fa-trash" onClick={() => FlowActions.delete(flow)} /> - <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={() => FlowActions.duplicate(flow)} /> - <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={() => FlowActions.replay(flow)} /> + <NavAction title="[d]elete flow" icon="fa-trash" onClick={() => onRemove(flow)} /> + <NavAction title="[D]uplicate flow" icon="fa-copy" onClick={() => onDuplicate(flow)} /> + <NavAction disabled title="[r]eplay flow" icon="fa-repeat" onClick={() => onReplay(flow)} /> {flow.intercepted && ( - <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={() => FlowActions.accept(flow)} /> + <NavAction title="[a]ccept intercepted flow" icon="fa-play" onClick={() => onAccept(flow)} /> )} {flow.modified && ( - <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={() => FlowActions.revert(flow)} /> + <NavAction title="revert changes to flow [V]" icon="fa-history" onClick={() => onRevert(flow)} /> )} </nav> ) } + +export default connect( + null, + { + onRemove: flowsActions.remove, + onDuplicate: flowsActions.duplicate, + onReplay: flowsActions.replay, + onAccept: flowsActions.accept, + onRevert: flowsActions.revert, + } +)(Nav) |