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

Commit b1dce52

Browse files
author
Dom Harrington
committed
Refactor similar parts of Preview/Demo into HoC
1 parent 7f248f5 commit b1dce52

File tree

3 files changed

+106
-129
lines changed

3 files changed

+106
-129
lines changed

‎example/preview/src/Preview.jsx

Lines changed: 15 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,20 @@
11
const React = require('react');
2-
const swagger2openapi = require('swagger2openapi');
32
const PropTypes = require('prop-types');
43
const extensions = require('../../../packages/oas-extensions/');
54

6-
const createDocs = require('../../../packages/api-explorer/lib/create-docs');
7-
85
const ApiExplorer = require('../../../packages/api-explorer/src');
6+
const withSpecFetching = require('../../src/SpecFetcher');
97

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

1210
class Preview extends React.Component {
13-
constructor(props) {
14-
super(props);
15-
this.state = { status: [], oas: {}, docs: [] };
16-
this.fetchSwagger = this.fetchSwagger.bind(this);
17-
this.convertSwagger = this.convertSwagger.bind(this);
18-
this.updateStatus = this.updateStatus.bind(this);
19-
}
2011
componentDidMount() {
2112
const searchParams = new URLSearchParams(window.location.search);
22-
this.fetchSwagger(searchParams.get('url') || '../swagger-files/petstore.json');
23-
}
24-
updateStatus(status, next) {
25-
this.setState(prev => ({ status: [...prev.status, status] }), next);
26-
}
27-
fetchSwagger(url) {
28-
this.updateStatus('Fetching swagger file', () => {
29-
fetch(url)
30-
.then(res => res.json())
31-
.then((json) => {
32-
if (json.swagger) return this.convertSwagger(json);
33-
34-
return this.dereference(json);
35-
});
36-
});
37-
}
38-
dereference(oas) {
39-
this.createDocs(oas);
40-
this.setState({ oas });
41-
this.updateStatus('Done!', () => {
42-
setTimeout(() => {
43-
this.setState({ status: [] });
44-
}, 1000);
45-
});
46-
}
47-
convertSwagger(swagger) {
48-
this.updateStatus('Converting swagger file to OAS 3', () => {
49-
swagger2openapi.convertObj(swagger, {})
50-
.then(({ openapi }) => this.dereference(openapi));
51-
});
52-
}
53-
createDocs(oas) {
54-
this.setState({ docs: createDocs(oas, 'api-setting') });
13+
this.props.fetchSwagger(searchParams.get('url') || '../swagger-files/petstore.json');
5514
}
5615
render() {
16+
const { status, docs, oas, oauth } = this.props;
17+
5718
return (
5819
<div>
5920
<div id="hub-reference">
@@ -70,22 +31,17 @@ class Preview extends React.Component {
7031
</div>
7132
</div>
7233

73-
{ this.state.status.length ? <pre style={{ marginLeft: '20px' }}>{this.state.status.join('\n')}</pre> : null }
34+
{ status.length ? <pre style={{ marginLeft: '20px' }}>{status.join('\n')}</pre> : null }
7435
{
75-
this.state.status.length === 0 && (
36+
status.length === 0 && (
7637
<ApiExplorer
77-
// // To test the top level error boundary, uncomment this
78-
// docs={[null, null]}
79-
docs={this.state.docs}
38+
docs={docs}
8039
oasFiles={{
81-
'api-setting': Object.assign(extensions.defaults, this.state.oas),
40+
'api-setting': Object.assign(extensions.defaults, oas),
8241
}}
83-
flags={{ correctnewlines: false }}
84-
// Uncomment this in for column layout
85-
// appearance={{ referenceLayout: 'column' }}
8642
appearance={{ referenceLayout: 'row' }}
8743
suggestedEdits
88-
oauth={this.props.oauth}
44+
oauth={oauth}
8945
variables={{
9046
user: { keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }] },
9147
defaults: [],
@@ -101,9 +57,14 @@ class Preview extends React.Component {
10157

10258
Preview.propTypes = {
10359
oauth: PropTypes.bool,
60+
oas: PropTypes.shape({}).isRequired,
61+
docs: PropTypes.arrayOf(PropTypes.shape).isRequired,
62+
status: PropTypes.arrayOf(PropTypes.string).isRequired,
63+
fetchSwagger: PropTypes.func.isRequired,
10464
};
10565

10666
Preview.defaultProps = {
10767
oauth: false,
10868
};
109-
module.exports = Preview;
69+
70+
module.exports = withSpecFetching(Preview);

‎example/src/Demo.jsx

Lines changed: 38 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,59 @@
11
const React = require('react');
2-
const swagger2openapi = require('swagger2openapi');
32
const PropTypes = require('prop-types');
43
const extensions = require('../../packages/oas-extensions/');
54

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

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

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

14-
class Demo extends React.Component {
15-
constructor(props) {
16-
super(props);
17-
this.state = { status: [], oas: {}, docs: [] };
18-
this.fetchSwagger = this.fetchSwagger.bind(this);
19-
this.convertSwagger = this.convertSwagger.bind(this);
20-
this.updateStatus = this.updateStatus.bind(this);
21-
}
22-
updateStatus(status, next) {
23-
this.setState(prev => ({ status: [...prev.status, status] }), next);
24-
}
25-
fetchSwagger(url) {
26-
this.updateStatus('Fetching swagger file', () => {
27-
fetch(url)
28-
.then(res => res.json())
29-
.then((json) => {
30-
if (json.swagger) return this.convertSwagger(json);
31-
32-
return this.dereference(json);
33-
});
34-
});
35-
}
36-
dereference(oas) {
37-
this.createDocs(oas);
38-
this.setState({ oas });
39-
this.updateStatus('Done!', () => {
40-
setTimeout(() => {
41-
this.setState({ status: [] });
42-
}, 1000);
43-
});
44-
}
45-
convertSwagger(swagger) {
46-
this.updateStatus('Converting swagger file to OAS 3', () => {
47-
swagger2openapi.convertObj(swagger, {})
48-
.then(({ openapi }) => this.dereference(openapi));
49-
});
50-
}
51-
createDocs(oas) {
52-
this.setState({ docs: createDocs(oas, 'api-setting') });
53-
}
54-
render() {
55-
return (
56-
<div>
57-
<div className="api-list-header">
58-
<ApiList fetchSwagger={this.fetchSwagger} />
59-
<pre>{this.state.status.join('\n')}</pre>
60-
</div>
61-
{
62-
this.state.status.length === 0 && (
63-
<ApiExplorer
64-
// // To test the top level error boundary, uncomment this
65-
// docs={[null, null]}
66-
docs={this.state.docs}
67-
oasFiles={{
68-
'api-setting': Object.assign(extensions.defaults, this.state.oas),
69-
}}
70-
flags={{ correctnewlines: false }}
71-
// Uncomment this in for column layout
72-
// appearance={{ referenceLayout: 'column' }}
73-
appearance={{ referenceLayout: 'row' }}
74-
suggestedEdits
75-
oauth={this.props.oauth}
76-
variables={{
77-
user: { keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }] },
78-
defaults: [],
79-
}}
80-
glossaryTerms={[{ term: 'apiKey', definition: 'This is a definition' }]}
81-
/>
82-
)
83-
}
13+
function Demo({ fetchSwagger, status, docs, oas, oauth }) {
14+
return (
15+
<div>
16+
<div className="api-list-header">
17+
<ApiList fetchSwagger={fetchSwagger} />
18+
<pre>{status.join('\n')}</pre>
8419
</div>
85-
);
86-
}
20+
{
21+
status.length === 0 && (
22+
<ApiExplorer
23+
// // To test the top level error boundary, uncomment this
24+
// docs={[null, null]}
25+
docs={docs}
26+
oasFiles={{
27+
'api-setting': Object.assign(extensions.defaults, oas),
28+
}}
29+
flags={{ correctnewlines: false }}
30+
// Uncomment this in for column layout
31+
// appearance={{ referenceLayout: 'column' }}
32+
appearance={{ referenceLayout: 'row' }}
33+
suggestedEdits
34+
oauth={oauth}
35+
variables={{
36+
user: { keys: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }] },
37+
defaults: [],
38+
}}
39+
glossaryTerms={[{ term: 'apiKey', definition: 'This is a definition' }]}
40+
/>
41+
)
42+
}
43+
</div>
44+
);
8745
}
8846

8947
Demo.propTypes = {
9048
oauth: PropTypes.bool,
49+
oas: PropTypes.shape({}).isRequired,
50+
docs: PropTypes.arrayOf(PropTypes.shape).isRequired,
51+
status: PropTypes.arrayOf(PropTypes.string).isRequired,
52+
fetchSwagger: PropTypes.func.isRequired,
9153
};
9254

9355
Demo.defaultProps = {
9456
oauth: false,
9557
};
96-
module.exports = Demo;
58+
59+
module.exports = withSpecFetching(Demo);

‎example/src/SpecFetcher.jsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const React = require('react');
2+
const swagger2openapi = require('swagger2openapi');
3+
4+
const createDocs = require('../../packages/api-explorer/lib/create-docs');
5+
6+
function withSpecFetching(Component) {
7+
return class extends React.Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = { status: [], oas: {}, docs: [] };
11+
this.fetchSwagger = this.fetchSwagger.bind(this);
12+
this.convertSwagger = this.convertSwagger.bind(this);
13+
this.updateStatus = this.updateStatus.bind(this);
14+
}
15+
updateStatus(status, next) {
16+
this.setState(prev => ({ status: [...prev.status, status] }), next);
17+
}
18+
fetchSwagger(url) {
19+
this.updateStatus('Fetching swagger file', () => {
20+
fetch(url)
21+
.then(res => res.json())
22+
.then((json) => {
23+
if (json.swagger) return this.convertSwagger(json);
24+
25+
return this.dereference(json);
26+
});
27+
});
28+
}
29+
dereference(oas) {
30+
this.createDocs(oas);
31+
this.setState({ oas });
32+
this.updateStatus('Done!', () => {
33+
setTimeout(() => {
34+
this.setState({ status: [] });
35+
}, 1000);
36+
});
37+
}
38+
convertSwagger(swagger) {
39+
this.updateStatus('Converting swagger file to OAS 3', () => {
40+
swagger2openapi.convertObj(swagger, {})
41+
.then(({ openapi }) => this.dereference(openapi));
42+
});
43+
}
44+
createDocs(oas) {
45+
this.setState({ docs: createDocs(oas, 'api-setting') });
46+
}
47+
render() {
48+
return <Component {...this.state} {...this.props} fetchSwagger={this.fetchSwagger} />;
49+
}
50+
};
51+
}
52+
53+
module.exports = withSpecFetching;

0 commit comments

Comments
 (0)