Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Move response metadata into a separate component
Browse files Browse the repository at this point in the history
  • Loading branch information
Dom Harrington committed Nov 2, 2017
1 parent 1d7d91e commit 67b9a03
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 54 deletions.
56 changes: 2 additions & 54 deletions packages/api-explorer-ui/src/CodeSampleResponse.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const { getLangName } = require('./lib/generate-code-snippet');
const syntaxHighlighter = require('../../readme-syntax-highlighter');
const codemirror = require('../../readme-syntax-highlighter/codemirror');
const IconStatus = require('./IconStatus');
const ResponseMetadata = require('./ResponseMetadata');

const Oas = require('./lib/Oas');

Expand Down Expand Up @@ -147,60 +148,7 @@ class CodeSampleResponse extends React.Component {
)}
</div>

<div
className="hub-reference-results-meta tabber-body-metadata tabber-body"
style={{ display: this.state.selectedTab === 'metadata' ? 'block' : 'none' }}
>
<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>Method</label>
}
<div>{result.method.toString()}</div>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>URL</label>
}
<div>{result.url}</div>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>Request Headers</label>
}
<pre>{result.requestHeaders.join('\n')}</pre>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>Request Data</label>
}
<pre>{JSON.stringify(result.responseBody)}</pre>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label> Status</label>
}
<span className="httpstatus">
<IconStatus result={result} />
</span>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>Response Headers</label>
}
<pre>{result.responseHeaders.join('\n')}</pre>
</div>
</div>
{ this.state.selectedTab === 'metadata' && <ResponseMetadata result={result} /> }
</span>
)}
</div>
Expand Down
67 changes: 67 additions & 0 deletions packages/api-explorer-ui/src/ResponseMetadata.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
const React = require('react');
const IconStatus = require('./IconStatus');
const PropTypes = require('prop-types');

function ResponseMetadata({ result }) {
return (
<div className="hub-reference-results-meta tabber-body-metadata tabber-body"
style={{ display: 'block' }}
>
<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>Method</label>
}
<div>{result.method.toString()}</div>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>URL</label>
}
<div>{result.url}</div>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>Request Headers</label>
}
<pre>{result.requestHeaders.join('\n')}</pre>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>Request Data</label>
}
<pre>{JSON.stringify(result.responseBody)}</pre>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label> Status</label>
}
<span className="httpstatus">
<IconStatus result={result} />
</span>
</div>

<div className="meta">
{
// eslint-disable-next-line jsx-a11y/label-has-for
<label>Response Headers</label>
}
<pre>{result.responseHeaders.join('\n')}</pre>
</div>
</div>
);
}

module.exports = ResponseMetadata;

ResponseMetadata.propTypes = {
result: PropTypes.shape({}).isRequired,
};

0 comments on commit 67b9a03

Please sign in to comment.