working with backend apis , content type was not set right, also added max height to response panel as some responses can be lengthy

package.json

@@ -63,6 +63,7 @@
     "@types/mark.js": "^8.11.1",
     "@types/marked": "^0.3.0",
     "@types/prismjs": "^1.6.4",
+    "@types/promise": "^7.1.30",
     "@types/prop-types": "^15.5.2",
     "@types/qs": "^6.5.1",
     "@types/react": "^16.0.41",
@@ -71,6 +72,7 @@
     "@types/react-tabs": "^1.0.2",
     "@types/webpack": "^4.1.2",
     "@types/webpack-env": "^1.13.0",
+    "@types/whatwg-fetch": "^0.0.33",
     "@types/yargs": "^11.0.0",
     "ajv": "^6.4.0",
     "ajv-errors": "^1.0.0",
@@ -151,12 +153,10 @@
     "@types/chai": "4.0.8",
     "@types/tapable": "1.0.0"
   },
-  "bundlesize": [
-    {
-      "path": "./bundles/redoc.standalone.js",
-      "maxSize": "300 kB"
-    }
-  ],
+  "bundlesize": [{
+    "path": "./bundles/redoc.standalone.js",
+    "maxSize": "300 kB"
+  }],
   "jest": {
     "transform": {
       "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"

src/components/Console/ConsoleViewer.tsx

@@ -55,7 +55,8 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
     if (value) {
       value = JSON.parse(value);
     }
-    const result = await this.invoke(endpoint, { 'Content-Type': 'application/*' }, value);
+
+    const result = await this.invoke(endpoint, value);
     console.log('Result: ' + JSON.stringify(result));
     this.setState({
       result
@@ -63,8 +64,8 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
 
   };
 
-  async invoke(endpoint, headers, body) {
-
+  async invoke(endpoint, body) {
+    const headers = { 'Content-Type': 'application/json' };
     try {
       let url = endpoint.path;
       if (endpoint.method.toLocaleLowerCase() === 'get') {
@@ -72,7 +73,7 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
       }
 
       var myHeaders = new Headers();
-      myHeaders.append('Content-Type', 'application/*');
+      myHeaders.append('Content-Type', 'application/json');
 
       const request = new Request(url, {
         method: endpoint.method,

src/components/SourceCode/SourceCode.tsx

@@ -4,13 +4,13 @@ import { highlight } from '../../utils';
 
 import { SampleControls, SampleControlsWrap } from '../../common-elements';
 import { CopyButtonWrapper } from '../../common-elements/CopyButtonWrapper';
-
+//${props => props.theme.responsePanel};
 const StyledPre = styled.pre`
   font-family: ${props => props.theme.code.fontFamily};
   font-size: ${props => props.theme.code.fontSize};
   overflow-x: auto;
   margin: 0;
-
+  max-height: ${props => props.theme.styledPre.maxHeight};
   word-break: break-all;
   word-wrap: break-word;
   white-space: pre-wrap;

src/theme.ts

@@ -65,6 +65,9 @@ const defaultTheme: ThemeInterface = {
     backgroundColor: '#263238',
     width: '40%',
   },
+  styledPre: {
+    maxHeight: '500px'
+  },
 };
 
 export default defaultTheme;
@@ -168,6 +171,9 @@ export interface ResolvedThemeInterface {
     backgroundColor: string;
     width: string;
   };
+  styledPre: {
+    maxHeight: string;
+  }
 }
 
 export type primitive = string | number | boolean | undefined | null;

src/utils/fetch.ts

@@ -1,37 +1 @@
-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);
-  }
-}
+parseparseFetchFetch