From b1dce526a9c1c68c5d636f62f24e268f38bf4f99 Mon Sep 17 00:00:00 2001
From: Dom Harrington <dom@harrington-mail.com>
Date: Mon, 24 Sep 2018 10:50:28 -0700
Subject: [PATCH] Refactor similar parts of Preview/Demo into HoC

---
 example/preview/src/Preview.jsx |  69 +++++--------------
 example/src/Demo.jsx            | 113 +++++++++++---------------------
 example/src/SpecFetcher.jsx     |  53 +++++++++++++++
 3 files changed, 106 insertions(+), 129 deletions(-)
 create mode 100644 example/src/SpecFetcher.jsx

diff --git a/example/preview/src/Preview.jsx b/example/preview/src/Preview.jsx
index 74ff2318e..273f0b437 100644
--- a/example/preview/src/Preview.jsx
+++ b/example/preview/src/Preview.jsx
@@ -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">
@@ -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: [],
@@ -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);
diff --git a/example/src/Demo.jsx b/example/src/Demo.jsx
index 9d46cbf7c..d6da4250e 100644
--- a/example/src/Demo.jsx
+++ b/example/src/Demo.jsx
@@ -1,9 +1,8 @@
 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');
@@ -11,86 +10,50 @@ 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);
diff --git a/example/src/SpecFetcher.jsx b/example/src/SpecFetcher.jsx
new file mode 100644
index 000000000..4d1c90782
--- /dev/null
+++ b/example/src/SpecFetcher.jsx
@@ -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;