hooked with server

demo/playground/hmr-playground.tsx

@@ -32,7 +32,7 @@ const options: RedocRawOptions = { nativeScrollbars: false };
 async function init() {
   const spec = await loadAndBundleSpec(specUrl);
   store = new AppStore(spec, specUrl, options);
-
+  /*
   const ajv = new Ajv({ allErrors: true, unknownFormats: ['int32', 'UUID', 'int64'] });
   ajv.addSchema(spec, 'specs.json')
 
@@ -40,7 +40,7 @@ async function init() {
 
   window.ajv = ajv;
   window.ajvError = ajvError;
-
+  */
   renderRoot({ store });
 }
 

src/components/Console/ConsoleViewer.tsx

@@ -1,6 +1,5 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import qs = require('qs');
 import { OperationModel } from '../../services/models';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
@@ -8,16 +7,29 @@ import { SendButton } from '../../common-elements/buttons';
 import { ConsoleActionsRow } from '../../common-elements/panels';
 import { ConsoleEditor } from './ConsoleEditor';
 
+const qs = require('qs');
+
+
 export interface ConsoleViewerProps {
   operation: OperationModel;
 }
 
+export interface ConsoleViewerState {
+  result: any;
+}
+
 @observer
-export class ConsoleViewer extends React.Component<ConsoleViewerProps> {
+export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleViewerState> {
   private consoleEditor: ConsoleEditor;
   operation: OperationModel;
   visited = new Set();
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      result: null
+    };
+  }
   onClickSend = async () => {
     const ace = this.consoleEditor && this.consoleEditor.editor;
     //const value = ace && ace.editor &&
@@ -25,77 +37,89 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps> {
     const { operation } = this.props;
 
     //console.log('Schema: ' + JSON.stringify(schema, null, 2));
-    const value = ace && ace.editor.getValue();
+    let value = ace && ace.editor.getValue();
 
     const ref = schema && schema['_$ref'];
 
-    var valid = window && window.ajv.validate({ $ref: `specs.json${ref}` }, value);
+    //var valid = window && window.ajv.validate({ $ref: `specs.json${ref}` }, value);
-    console.log(JSON.stringify(window.ajv.errors));
+    //console.log(JSON.stringify(window.ajv.errors));
-    if (!valid) {
+    //if (!valid) {
-      console.warn('INVALID REQUEST!');
+    //  console.warn('INVALID REQUEST!');
-    }
+    //}
 
     const endpoint = {
       method: operation.httpVerb,
       path: operation.servers[0].url + operation.path
     }
-
     console.log('Value: ' + value);
-    const result = await this.invoke(endpoint, { 'Content-Type': 'application/*' }, JSON.parse(value));
+    if (value) {
+      value = JSON.parse(value);
+    }
+    const result = await this.invoke(endpoint, { 'Content-Type': 'application/*' }, value);
     console.log('Result: ' + JSON.stringify(result));
+    this.setState({
+      result
+    });
 
   };
 
   async invoke(endpoint, headers, body) {
 
-    const fetchArgs = {
+    try {
-      method: endpoint.method,
+      let url = endpoint.path;
-      headers,
+      if (endpoint.method.toLocaleLowerCase() === 'get') {
-      redirect: 'manual',
+        url = url + '?' + qs.stringify(body || '');
-      credentials: 'include'
+      }
-    }
 
-    let url = endpoint.path;
+      var myHeaders = new Headers();
-    if (endpoint.method.toLocaleLowerCase() === 'get') {
+      myHeaders.append('Content-Type', 'application/*');
-      url = url + '?' + qs.stringify(body);
-    } else {
-      fetchArgs['body'] = (body) ? JSON.stringify(body) : null;
-    }
 
-    const result = await fetch(url, fetchArgs);
+      const request = new Request(url, {
+        method: endpoint.method,
+        credentials: 'include',
+        redirect: 'manual',
+        headers: myHeaders,
+        body: (body) ? JSON.stringify(body) : null
+      });
 
-    const contentType = result.headers.get("content-type");
+      const result = await fetch(request);
-    if (contentType && contentType.indexOf("application/json") !== -1) {
+
-      // successful cross-domain connect/ability
+      const contentType = result.headers.get("content-type");
-      const resp = await result.json();
+      if (contentType && contentType.indexOf("application/json") !== -1) {
+        // successful cross-domain connect/ability
+        const resp = await result.json();
+
+        return { json: resp, statusCode: result.status, _fetchRes: result };
+      }
+      else if (result.status === 200 && contentType && contentType.indexOf("text/plain") !== -1) {
+        const resp = await result.text();
+        return { resp, _fetchRes: result };
+      }
+      else {
+        if (result && result.type && result.type === 'opaqueredirect') {
+          return {
+            json: {
+              endpoint,
+              error_code: "RECEIVED_LOGIN_REDIRECT",
+              details: "Your session expired. Please refresh the page.",
+              severity: "error"
+            }
+          }
+        }
 
-      return { json: resp, statusCode: result.status, _fetchRes: result };
-    }
-    else if (result.status === 200 && contentType && contentType.indexOf("text/plain") !== -1) {
-      const resp = await result.text();
-      return { resp, _fetchRes: result };
-    }
-    else {
-      if (result && result.type && result.type === 'opaqueredirect') {
         return {
           json: {
             endpoint,
-            error_code: "RECEIVED_LOGIN_REDIRECT",
+            error_code: "INVALID_SERVER_RESPONSE",
-            details: "Your session expired. Please refresh the page.",
+            details: "Either server not authenticated or error on server",
             severity: "error"
           }
-        }
+        };
       }
-
+    } catch (error) {
-      return {
+      console.error(error);
-        json: {
-          endpoint,
-          error_code: "INVALID_SERVER_RESPONSE",
-          details: "Either server not authenticated or error on server",
-          severity: "error"
-        }
-      };
     }
+
   }
 
 
@@ -105,7 +129,7 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps> {
     const hasBodySample = requestBodyContent && requestBodyContent.hasSample;
     const samples = operation.codeSamples;
     const mediaTypes = (requestBodyContent && requestBodyContent.mediaTypes) ? requestBodyContent.mediaTypes : [];
-
+    const { result } = this.state;
     return (
       <div>
         <h3> Console </h3>
@@ -120,6 +144,9 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps> {
         <ConsoleActionsRow>
           <SendButton onClick={this.onClickSend} >Send Request</SendButton>
         </ConsoleActionsRow>
+        {result &&
+          <SourceCodeWithCopy lang='json' source={JSON.stringify(result, null, 2)} />
+        }
       </div>
     );
   }

src/polyfills.ts

@@ -7,3 +7,5 @@ import 'core-js/fn/array/find';
 import 'core-js/es6/map';
 import 'core-js/es6/set';
 import 'core-js/es6/symbol';
+
+import 'whatwg-fetch';

src/utils/fetch.ts

@@ -0,0 +1,37 @@
+import { Promise } from "core-js";
+
+export class Fetch {
+
+
+  execute(): Promise<Array<any>> {
+    return fetch('https://api.github.com/orgs/lemoncode/members')
+      .then((response) => this.checkStatus(response))
+      .then((response) => this.parseJSON(response)
+        .then((response) => { return Promise.resolve(this._parse(response)) })
+        .catch((error) => this.throwError(error))
+      );
+  }
+
+  private checkStatus(response: Response): Promise<Response> {
+    if (response.status >= 200 && response.status < 300) {
+      return Promise.resolve(response);
+    } else {
+      let error = new Error(response.statusText);
+      throw error;
+    }
+  }
+
+  private parseJSON(response: Response): Promise<Response> {
+    return response.json();
+  }
+
+  private _parse(data) {
+    return data;
+  }
+
+  private throwError(error) {
+    document.write("<p>Ops! something wrong! We are so embarrased..</p>");
+    console.log(error);
+    return Promise.reject(error);
+  }
+}