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

Commit

Permalink
Refactor similar parts of Preview/Demo into HoC
Browse files Browse the repository at this point in the history
  • Loading branch information
Dom Harrington committed Sep 24, 2018
1 parent 7f248f5 commit b1dce52
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 129 deletions.
69 changes: 15 additions & 54 deletions example/preview/src/Preview.jsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,20 @@
const React = require('react');
const swagger2openapi = require('swagger2openapi');
const PropTypes = require('prop-types');
const extensions = require('../../../packages/oas-extensions/');

const createDocs = require('../../../packages/api-explorer/lib/create-docs');

const ApiExplorer = require('../../../packages/api-explorer/src');
const withSpecFetching = require('../../src/SpecFetcher');

require('../../../packages/api-explorer/api-explorer.css');

class Preview extends React.Component {
constructor(props) {
super(props);
this.state = { status: [], oas: {}, docs: [] };
this.fetchSwagger = this.fetchSwagger.bind(this);
this.convertSwagger = this.convertSwagger.bind(this);
this.updateStatus = this.updateStatus.bind(this);
}
componentDidMount() {
const searchParams = new URLSearchParams(window.location.search);
this.fetchSwagger(searchParams.get('url') || '../swagger-files/petstore.json');
}
updateStatus(status, next) {
this.setState(prev => ({ status: [...prev.status, status] }), next);
}
fetchSwagger(url) {
this.updateStatus('Fetching swagger file', () => {
fetch(url)
.then(res => res.json())
.then((json) => {
if (json.swagger) return this.convertSwagger(json);

return this.dereference(json);
});
});
}
dereference(oas) {
this.createDocs(oas);
this.setState({ oas });
this.updateStatus('Done!', () => {
setTimeout(() => {
this.setState({ status: [] });
}, 1000);
});
}
convertSwagger(swagger) {
this.updateStatus('Converting swagger file to OAS 3', () => {
swagger2openapi.convertObj(swagger, {})
.then(({ openapi }) => this.dereference(openapi));
});
}
createDocs(oas) {
this.setState({ docs: createDocs(oas, 'api-setting') });
this.props.fetchSwagger(searchParams.get('url') || '../swagger-files/petstore.json');
}
render() {
const { status, docs, oas, oauth } = this.props;

return (
<div>
<div id="hub-reference">
Expand All @@ -70,22 +31,17 @@ class Preview extends React.Component {
</div>
</div>

{ this.state.status.length ? <pre style={{ marginLeft: '20px' }}>{this.state.status.join('\n')}</pre> : null }
{ status.length ? <pre style={{ marginLeft: '20px' }}>{status.join('\n')}</pre> : null }
{
this.state.status.length === 0 && (
status.length === 0 && (
<ApiExplorer
// // To test the top level error boundary, uncomment this
// docs={[null, null]}
docs={this.state.docs}
docs={docs}
oasFiles={{
'api-setting': Object.assign(extensions.defaults, this.state.oas),
'api-setting': Object.assign(extensions.defaults, oas),
}}
flags={{ correctnewlines: false }}
// Uncomment this in for column layout
// appearance={{ referenceLayout: 'column' }}
appearance={{ referenceLayout: 'row' }}
suggestedEdits
oauth={this.props.oauth}
oauth={oauth}
variables={{
user: { keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }] },
defaults: [],
Expand All @@ -101,9 +57,14 @@ class Preview extends React.Component {

Preview.propTypes = {
oauth: PropTypes.bool,
oas: PropTypes.shape({}).isRequired,
docs: PropTypes.arrayOf(PropTypes.shape).isRequired,
status: PropTypes.arrayOf(PropTypes.string).isRequired,
fetchSwagger: PropTypes.func.isRequired,
};

Preview.defaultProps = {
oauth: false,
};
module.exports = Preview;

module.exports = withSpecFetching(Preview);
113 changes: 38 additions & 75 deletions example/src/Demo.jsx
Original file line number Diff line number Diff line change
@@ -1,96 +1,59 @@
const React = require('react');
const swagger2openapi = require('swagger2openapi');
const PropTypes = require('prop-types');
const extensions = require('../../packages/oas-extensions/');

const createDocs = require('../../packages/api-explorer/lib/create-docs');
const withSpecFetching = require('./SpecFetcher');

const ApiExplorer = require('../../packages/api-explorer/src');
const ApiList = require('./ApiList');

require('../../example/swagger-files/types.json');
require('../../packages/api-explorer/api-explorer.css');

class Demo extends React.Component {
constructor(props) {
super(props);
this.state = { status: [], oas: {}, docs: [] };
this.fetchSwagger = this.fetchSwagger.bind(this);
this.convertSwagger = this.convertSwagger.bind(this);
this.updateStatus = this.updateStatus.bind(this);
}
updateStatus(status, next) {
this.setState(prev => ({ status: [...prev.status, status] }), next);
}
fetchSwagger(url) {
this.updateStatus('Fetching swagger file', () => {
fetch(url)
.then(res => res.json())
.then((json) => {
if (json.swagger) return this.convertSwagger(json);

return this.dereference(json);
});
});
}
dereference(oas) {
this.createDocs(oas);
this.setState({ oas });
this.updateStatus('Done!', () => {
setTimeout(() => {
this.setState({ status: [] });
}, 1000);
});
}
convertSwagger(swagger) {
this.updateStatus('Converting swagger file to OAS 3', () => {
swagger2openapi.convertObj(swagger, {})
.then(({ openapi }) => this.dereference(openapi));
});
}
createDocs(oas) {
this.setState({ docs: createDocs(oas, 'api-setting') });
}
render() {
return (
<div>
<div className="api-list-header">
<ApiList fetchSwagger={this.fetchSwagger} />
<pre>{this.state.status.join('\n')}</pre>
</div>
{
this.state.status.length === 0 && (
<ApiExplorer
// // To test the top level error boundary, uncomment this
// docs={[null, null]}
docs={this.state.docs}
oasFiles={{
'api-setting': Object.assign(extensions.defaults, this.state.oas),
}}
flags={{ correctnewlines: false }}
// Uncomment this in for column layout
// appearance={{ referenceLayout: 'column' }}
appearance={{ referenceLayout: 'row' }}
suggestedEdits
oauth={this.props.oauth}
variables={{
user: { keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }] },
defaults: [],
}}
glossaryTerms={[{ term: 'apiKey', definition: 'This is a definition' }]}
/>
)
}
function Demo({ fetchSwagger, status, docs, oas, oauth }) {
return (
<div>
<div className="api-list-header">
<ApiList fetchSwagger={fetchSwagger} />
<pre>{status.join('\n')}</pre>
</div>
);
}
{
status.length === 0 && (
<ApiExplorer
// // To test the top level error boundary, uncomment this
// docs={[null, null]}
docs={docs}
oasFiles={{
'api-setting': Object.assign(extensions.defaults, oas),
}}
flags={{ correctnewlines: false }}
// Uncomment this in for column layout
// appearance={{ referenceLayout: 'column' }}
appearance={{ referenceLayout: 'row' }}
suggestedEdits
oauth={oauth}
variables={{
user: { keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }] },
defaults: [],
}}
glossaryTerms={[{ term: 'apiKey', definition: 'This is a definition' }]}
/>
)
}
</div>
);
}

Demo.propTypes = {
oauth: PropTypes.bool,
oas: PropTypes.shape({}).isRequired,
docs: PropTypes.arrayOf(PropTypes.shape).isRequired,
status: PropTypes.arrayOf(PropTypes.string).isRequired,
fetchSwagger: PropTypes.func.isRequired,
};

Demo.defaultProps = {
oauth: false,
};
module.exports = Demo;

module.exports = withSpecFetching(Demo);
53 changes: 53 additions & 0 deletions example/src/SpecFetcher.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
const React = require('react');
const swagger2openapi = require('swagger2openapi');

const createDocs = require('../../packages/api-explorer/lib/create-docs');

function withSpecFetching(Component) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = { status: [], oas: {}, docs: [] };
this.fetchSwagger = this.fetchSwagger.bind(this);
this.convertSwagger = this.convertSwagger.bind(this);
this.updateStatus = this.updateStatus.bind(this);
}
updateStatus(status, next) {
this.setState(prev => ({ status: [...prev.status, status] }), next);
}
fetchSwagger(url) {
this.updateStatus('Fetching swagger file', () => {
fetch(url)
.then(res => res.json())
.then((json) => {
if (json.swagger) return this.convertSwagger(json);

return this.dereference(json);
});
});
}
dereference(oas) {
this.createDocs(oas);
this.setState({ oas });
this.updateStatus('Done!', () => {
setTimeout(() => {
this.setState({ status: [] });
}, 1000);
});
}
convertSwagger(swagger) {
this.updateStatus('Converting swagger file to OAS 3', () => {
swagger2openapi.convertObj(swagger, {})
.then(({ openapi }) => this.dereference(openapi));
});
}
createDocs(oas) {
this.setState({ docs: createDocs(oas, 'api-setting') });
}
render() {
return <Component {...this.state} {...this.props} fetchSwagger={this.fetchSwagger} />;
}
};
}

module.exports = withSpecFetching;

0 comments on commit b1dce52

Please sign in to comment.