chore: adding demo server with API file upload

demo/demo-base.js

@@ -2,20 +2,29 @@ import { html, render } from 'lit-html';
 import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';
 import '@advanced-rest-client/oauth-authorization/oauth1-authorization.js';
 import '@advanced-rest-client/oauth-authorization/oauth2-authorization.js';
+import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
 import '@polymer/paper-toast/paper-toast.js';
 import './helpers/loader-screen.js';
 import './helpers/upload-api-screen.js';
+import './helpers/api-file-selector.js';
+import './helpers/api-selector.js';
 const apiCache = new WeakMap();
 
 export class DemoBase {
   constructor() {
     this.allowUpload = true;
     this.initObservableProperties([
-      'hasUploader'
+      'hasUploader',
+      'hasApiFileSelector',
+      'apiSelectorOpened'
     ]);
 
     this._selectApi = this._selectApi.bind(this);
     this._processApiFileUpload = this._processApiFileUpload.bind(this);
+    this._apiHandidateHandler = this._apiHandidateHandler.bind(this);
+    this.openApiSelector = this.openApiSelector.bind(this);
+    this._apiSelectorOpenedHandler = this._apiSelectorOpenedHandler.bind(this);
+    this._uploadHandler = this._uploadHandler.bind(this);
   }
 
   get loading() {
@@ -46,7 +55,7 @@ export class DemoBase {
       return;
     }
     this._model = value;
-    this._setAmfModel(value);
+    this._setAmfModel(value, old);
   }
 
   /**
@@ -90,14 +99,15 @@ export class DemoBase {
   }
 
   selectFirstApi() {
-    const listbox = document.getElementById('apiList');
+    const listbox = document.querySelector('#apiList,api-selector');
     if (!listbox) {
       return;
     }
     listbox.selected = 0;
   }
 
   _selectApi(e) {
+    this.apiSelectorOpened = false;
     const node = e.target.selectedItem;
     if (!node) {
       return;
@@ -137,11 +147,13 @@ export class DemoBase {
     this.loading = false;
   }
 
-  _setAmfModel(model) {
+  _setAmfModel(model, old) {
     const apic = document.querySelector('api-console');
     apic.amf = model;
-    apic.selectedShape = 'summary';
-    apic.selectedShapeType = 'summary';
+    if (old) {
+      apic.selectedShape = 'summary';
+      apic.selectedShapeType = 'summary';
+    }
   }
 
   async _processApiFileUpload(e) {
@@ -171,7 +183,41 @@ export class DemoBase {
 
   _requestSelectApi(data) {
     const { key, candidates } = data;
-    console.log(key, candidates);
+    this.apiCandidates = candidates;
+    this.candidatesKey = key;
+    this.hasApiFileSelector = true;
+  }
+
+  _apiHandidateHandler(e) {
+    const file = e.detail;
+    const key = this.candidatesKey;
+    this.candidatesKey = undefined;
+    this.apiCandidates = undefined;
+    this.hasApiFileSelector = false;
+    this._processCandidates(file, key);
+  }
+
+  async _processCandidates(file, key) {
+    this.loading = true;
+    const body = JSON.stringify({
+      key,
+      file
+    });
+    try {
+      const response = await fetch('/api/parse/candidate', {
+        method: 'POST',
+        body
+      });
+      const data = await response.json();
+      if (response.status === 200) {
+        this.model = JSON.parse(data.data.api);
+      } else {
+        this.notifyError(data.message);
+      }
+    } catch (e) {
+      this.notifyError(e.message);
+    }
+    this.loading = false;
   }
 
   firstRendered() {}
@@ -198,10 +244,37 @@ export class DemoBase {
     </anypoint-dropdown-menu>`;
   }
 
+  apiSelectorTemplate() {
+    const items = this.apis;
+    if (!items) {
+      return '';
+    }
+    const result = items.map(([file, label]) => html`<anypoint-item data-src="${file}">${label}</anypoint-item>`);
+    return html`<api-selector
+      ?opened="${this.apiSelectorOpened}"
+      @opened-changed="${this._apiSelectorOpenedHandler}"
+      @select="${this._selectApi}"
+      @upload="${this._uploadHandler}">
+    ${result}
+    </api-selector>`;
+  }
+
+  _uploadHandler() {
+    this.openUploader();
+  }
+
   openUploader() {
     this.hasUploader = true;
   }
 
+  openApiSelector() {
+    this.apiSelectorOpened = true;
+  }
+
+  _apiSelectorOpenedHandler(e) {
+    this.apiSelectorOpened = e.detail.value;
+  }
+
   render() {
     if (this._rendering) {
       return;
@@ -223,6 +296,11 @@ export class DemoBase {
       content = html`Implement <code>_render()</code> function`;
     } else if (this.hasUploader) {
       content = html`<upload-api-screen @select="${this._processApiFileUpload}"></upload-api-screen>`;
+    } else if (this.hasApiFileSelector) {
+      const items = this.apiCandidates;
+      content = html`<api-file-selector @candidate-selected="${this._apiHandidateHandler}">
+      ${items.map((item) => html`<anypoint-item>${item}</anypoint-item>`)}
+      </api-file-selector>`;
     } else {
       content = this.demoTemplate();
     }

demo/demo-server/api/api-parser.js

@@ -82,13 +82,18 @@ export class ApiParser {
   }
 
   async readIncommingMessage(request) {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       let message;
       request.on('data', (chunk) => {
-        if (message) {
-          message = Buffer.concat(message, chunk);
-        } else {
-          message = chunk;
+        try {
+          if (message) {
+            message = Buffer.concat([message, chunk]);
+          } else {
+            message = chunk;
+          }
+        } catch (e) {
+          reject(e);
+          throw e;
         }
       });
 

demo/helpers/api-file-selector.js

@@ -0,0 +1,94 @@
+import { html, css, LitElement } from 'lit-element';
+import { AnypointMenuMixin } from '@anypoint-web-components/anypoint-menu-mixin/anypoint-menu-mixin.js';
+
+class ApiFileSelector extends AnypointMenuMixin(LitElement) {
+  static get styles() {
+    return css`:host {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: #fff;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    h1 {
+      font-size: 112px;
+      font-weight: 300;
+      letter-spacing: -.044em;
+      line-height: 120px;
+      box-sizing: border-box;
+      margin: 0;
+    }
+
+    section[role="main"] {
+      height: 60%;
+      margin-top: 40px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      transition: box-shadow 0.23s cubic-bezier(0.4, 0, 0.2, 1);
+      width: 80%;
+      border: 1px #e5e5e5 solid;
+    }
+
+    @media (max-width: 1200px) {
+      h1 {
+        font-size: 54px;
+        text-align: center;
+        margin: 0 24px;
+        line-height: 64px;
+      }
+    `;
+  }
+
+  static get properties() {
+    return {
+    };
+  }
+
+  constructor() {
+    super();
+    this._selectHandler = this._selectHandler.bind(this);
+  }
+
+  connectedCallback() {
+    /* istanbul ignore else  */
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    this.addEventListener('select', this._selectHandler);
+  }
+
+  disconnectedCallback() {
+    /* istanbul ignore else  */
+    if (super.disconnectedCallback) {
+      super.disconnectedCallback();
+    }
+    this.removeEventListener('select', this._selectHandler);
+  }
+
+  _selectHandler(e) {
+    const value = e.detail.item.textContent;
+    this.dispatchEvent(new CustomEvent('candidate-selected', {
+      detail: value
+    }));
+  }
+
+  render() {
+    return html`
+      <h1>Select API main file</h1>
+      <p class="intro">We have found multiple API files.</p>
+      <section role="main">
+        <p class="drop-welcome">Choose the main API file</p>
+        <slot></slot>
+      </section>
+    `;
+  }
+}
+window.customElements.define('api-file-selector', ApiFileSelector);

demo/helpers/api-selector.js

@@ -0,0 +1,102 @@
+import { html, css, LitElement } from 'lit-element';
+import { AnypointMenuMixin } from '@anypoint-web-components/anypoint-menu-mixin/anypoint-menu-mixin.js';
+import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
+import '@anypoint-web-components/anypoint-button/anypoint-button.js';
+import '@polymer/iron-icon/iron-icon.js';
+
+class ApiSelector extends AnypointMenuMixin(LitElement) {
+  static get styles() {
+    return css`:host {
+      width: 340px;
+      display: block;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-color: #fff;
+      transform: translateX(100%);
+      transform-origin: top right;
+      transition: transform 0.3s cubic-bezier(0.74, 0.03, 0.3, 0.97);
+      position: fixed;
+      box-shadow: var(--anypoiont-dropdown-shaddow);
+    }
+
+    :host([opened]) {
+      transform: translateX(0);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      margin: 0 12px;
+    }
+
+    .title {
+      flex: 1;
+      font-size: 1.1rem;
+      font-weight: 500;
+    }
+
+    .upload {
+      width: 100%;
+    }
+    `;
+  }
+
+  static get properties() {
+    return {
+      opened: { type: Boolean, reflect: true }
+    };
+  }
+
+  get opened() {
+    return this._opened;
+  }
+
+  set opened(value) {
+    const old = this._opened;
+    if (old === value) {
+      return;
+    }
+    this._opened = value;
+    this.requestUpdate('opened', value);
+    this.dispatchEvent(new CustomEvent('opened-changed', {
+      detail: {
+        value
+      }
+    }));
+  }
+
+  close() {
+    this.opened = false;
+  }
+
+  opeen() {
+    this.opened = true;
+  }
+
+  _uploadHandler() {
+    this.dispatchEvent(new CustomEvent('upload'));
+    this.opened = false;
+  }
+
+  render() {
+    return html`
+      <div class="header">
+        <div class="title">Select API</div>
+        <anypoint-icon-button
+          aria-label="Activate to close the API menu"
+          @click="${this.close}">
+          <iron-icon icon="arc:close"></iron-icon>
+        </anypoint-icon-button>
+      </div>
+      <anypoint-button @click="${this._uploadHandler}" class="upload">
+        <iron-icon icon="arc:add-circle-outline"></iron-icon>
+        Upload an API
+      </anypoint-button>
+      <section>
+        <slot></slot>
+      </section>
+    `;
+  }
+}
+window.customElements.define('api-selector', ApiSelector);