diff --git a/demo/playground/hmr-playground.tsx b/demo/playground/hmr-playground.tsx index 45510186..e0f8ddf0 100644 --- a/demo/playground/hmr-playground.tsx +++ b/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 }); } diff --git a/src/components/Console/ConsoleViewer.tsx b/src/components/Console/ConsoleViewer.tsx index f09b1d0f..afba7dc0 100644 --- a/src/components/Console/ConsoleViewer.tsx +++ b/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 { +export class ConsoleViewer extends React.Component { 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 { 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); - console.log(JSON.stringify(window.ajv.errors)); - if (!valid) { - console.warn('INVALID REQUEST!'); - } + //var valid = window && window.ajv.validate({ $ref: `specs.json${ref}` }, value); + //console.log(JSON.stringify(window.ajv.errors)); + //if (!valid) { + // 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 = { - method: endpoint.method, - headers, - redirect: 'manual', - credentials: 'include' - } + try { + let url = endpoint.path; + if (endpoint.method.toLocaleLowerCase() === 'get') { + url = url + '?' + qs.stringify(body || ''); + } - let url = endpoint.path; - if (endpoint.method.toLocaleLowerCase() === 'get') { - url = url + '?' + qs.stringify(body); - } else { - fetchArgs['body'] = (body) ? JSON.stringify(body) : null; - } + var myHeaders = new Headers(); + myHeaders.append('Content-Type', 'application/*'); - 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"); - if (contentType && contentType.indexOf("application/json") !== -1) { - // successful cross-domain connect/ability - const resp = await result.json(); + const result = await fetch(request); + + const contentType = result.headers.get("content-type"); + 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", - details: "Your session expired. Please refresh the page.", + error_code: "INVALID_SERVER_RESPONSE", + details: "Either server not authenticated or error on server", severity: "error" } - } + }; } - - return { - json: { - endpoint, - error_code: "INVALID_SERVER_RESPONSE", - details: "Either server not authenticated or error on server", - severity: "error" - } - }; + } catch (error) { + console.error(error); } + } @@ -105,7 +129,7 @@ export class ConsoleViewer extends React.Component { const hasBodySample = requestBodyContent && requestBodyContent.hasSample; const samples = operation.codeSamples; const mediaTypes = (requestBodyContent && requestBodyContent.mediaTypes) ? requestBodyContent.mediaTypes : []; - + const { result } = this.state; return (

Console

@@ -120,6 +144,9 @@ export class ConsoleViewer extends React.Component { Send Request + {result && + + }
); } diff --git a/src/polyfills.ts b/src/polyfills.ts index b2432991..d854a460 100644 --- a/src/polyfills.ts +++ b/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'; diff --git a/src/utils/fetch.ts b/src/utils/fetch.ts index e69de29b..590f8e44 100644 --- a/src/utils/fetch.ts +++ b/src/utils/fetch.ts @@ -0,0 +1,37 @@ +import { Promise } from "core-js"; + +export class Fetch { + + + execute(): Promise> { + 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 { + 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 { + return response.json(); + } + + private _parse(data) { + return data; + } + + private throwError(error) { + document.write("

Ops! something wrong! We are so embarrased..

"); + console.log(error); + return Promise.reject(error); + } +} \ No newline at end of file