2016-04-26 07:29:24 +00:00
|
|
|
import React, {Component, PropTypes} from 'react'
|
|
|
|
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs'
|
|
|
|
|
|
|
|
import KeyValueEditor from '../components/base/KeyValueEditor'
|
|
|
|
|
2016-04-28 06:22:50 +00:00
|
|
|
import ContentTypeDropdown from '../components/ContentTypeDropdown'
|
2016-04-26 07:29:24 +00:00
|
|
|
import RequestBodyEditor from '../components/RequestBodyEditor'
|
|
|
|
import RequestAuthEditor from '../components/RequestAuthEditor'
|
|
|
|
import RequestUrlBar from '../components/RequestUrlBar'
|
|
|
|
|
2016-04-28 06:22:50 +00:00
|
|
|
import {getContentTypeName} from '../lib/contentTypes'
|
|
|
|
|
2016-04-29 04:57:03 +00:00
|
|
|
const RequestPane = props => {
|
|
|
|
const {
|
|
|
|
request,
|
|
|
|
sendRequest,
|
|
|
|
updateRequestUrl,
|
|
|
|
updateRequestMethod,
|
|
|
|
updateRequestBody,
|
|
|
|
updateRequestParams,
|
|
|
|
updateRequestAuthentication,
|
|
|
|
updateRequestHeaders,
|
|
|
|
updateRequestContentType
|
|
|
|
} = props;
|
2016-04-26 07:29:24 +00:00
|
|
|
|
2016-04-29 04:57:03 +00:00
|
|
|
if (!request) {
|
2016-04-26 07:29:24 +00:00
|
|
|
return (
|
2016-05-01 19:56:30 +00:00
|
|
|
<section className="request-pane pane">
|
|
|
|
<header className="pane__header"></header>
|
|
|
|
<div className="pane__body"></div>
|
2016-04-29 04:57:03 +00:00
|
|
|
</section>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2016-05-01 19:56:30 +00:00
|
|
|
<section className="request-pane pane">
|
|
|
|
<header className="pane__header">
|
|
|
|
<RequestUrlBar
|
|
|
|
uniquenessKey={request._id}
|
|
|
|
sendRequest={() => sendRequest(request)}
|
|
|
|
onUrlChange={updateRequestUrl}
|
|
|
|
onMethodChange={updateRequestMethod}
|
|
|
|
url={request.url}
|
|
|
|
method={request.method}
|
|
|
|
/>
|
|
|
|
</header>
|
|
|
|
<Tabs className="pane__body">
|
|
|
|
<TabList>
|
|
|
|
<Tab>
|
|
|
|
<button>{getContentTypeName(request.contentType)}</button>
|
|
|
|
<ContentTypeDropdown
|
|
|
|
activeContentType={request.contentType}
|
|
|
|
updateRequestContentType={updateRequestContentType}
|
|
|
|
/>
|
|
|
|
</Tab>
|
|
|
|
<Tab>
|
|
|
|
<button>
|
|
|
|
Params {request.params.length ? `(${request.params.length})` : ''}
|
|
|
|
</button>
|
|
|
|
</Tab>
|
|
|
|
<Tab>
|
|
|
|
<button>
|
|
|
|
Headers {request.headers.length ? `(${request.headers.length})` : ''}
|
|
|
|
</button>
|
|
|
|
</Tab>
|
|
|
|
</TabList>
|
|
|
|
<TabPanel className="editor-wrapper">
|
|
|
|
<RequestBodyEditor
|
|
|
|
onChange={updateRequestBody}
|
|
|
|
requestId={request._id}
|
|
|
|
contentType={request.contentType}
|
|
|
|
body={request.body}
|
|
|
|
/>
|
|
|
|
</TabPanel>
|
|
|
|
<TabPanel className="scrollable">
|
|
|
|
<KeyValueEditor
|
|
|
|
className="pad"
|
|
|
|
namePlaceholder="name"
|
|
|
|
valuePlaceholder="value"
|
2016-04-29 04:57:03 +00:00
|
|
|
uniquenessKey={request._id}
|
2016-05-01 19:56:30 +00:00
|
|
|
pairs={request.params}
|
|
|
|
onChange={updateRequestParams}
|
2016-04-29 04:57:03 +00:00
|
|
|
/>
|
2016-05-01 19:56:30 +00:00
|
|
|
</TabPanel>
|
|
|
|
<TabPanel className="scrollable pad">
|
|
|
|
<label>Basic Authentication</label>
|
|
|
|
<RequestAuthEditor
|
|
|
|
request={request}
|
|
|
|
onChange={updateRequestAuthentication}
|
|
|
|
/>
|
|
|
|
<br/>
|
|
|
|
<br/>
|
|
|
|
<label>Other Headers</label>
|
|
|
|
<KeyValueEditor
|
|
|
|
namePlaceholder="My-Header"
|
|
|
|
valuePlaceholder="Value"
|
|
|
|
uniquenessKey={request._id}
|
|
|
|
pairs={request.headers}
|
|
|
|
onChange={updateRequestHeaders}
|
|
|
|
/>
|
|
|
|
</TabPanel>
|
|
|
|
</Tabs>
|
2016-04-29 04:57:03 +00:00
|
|
|
</section>
|
|
|
|
)
|
|
|
|
};
|
2016-04-26 07:29:24 +00:00
|
|
|
|
|
|
|
RequestPane.propTypes = {
|
|
|
|
// Functions
|
|
|
|
sendRequest: PropTypes.func.isRequired,
|
|
|
|
updateRequestUrl: PropTypes.func.isRequired,
|
|
|
|
updateRequestMethod: PropTypes.func.isRequired,
|
|
|
|
updateRequestBody: PropTypes.func.isRequired,
|
|
|
|
updateRequestParams: PropTypes.func.isRequired,
|
|
|
|
updateRequestAuthentication: PropTypes.func.isRequired,
|
|
|
|
updateRequestHeaders: PropTypes.func.isRequired,
|
2016-04-28 06:22:50 +00:00
|
|
|
updateRequestContentType: PropTypes.func.isRequired,
|
2016-04-26 07:29:24 +00:00
|
|
|
|
|
|
|
// Other
|
|
|
|
request: PropTypes.object
|
|
|
|
};
|
|
|
|
|
|
|
|
export default RequestPane;
|