fix: integrate request and response viewer

integrate request and response viewer and clean the code

src/components/Console/ConsoleViewer.tsx

@@ -100,7 +100,6 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
     }
 
     if (url.split(queryParamPrefix).length > 1) {
-      console.error('** we have missing query params ** ', url);
       throw Error(`** we have missing query params ** ${url}`);
     }
 
@@ -127,37 +126,19 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps, ConsoleVi
         body: (body) ? JSON.stringify(body) : undefined,
       });
 
-      const result = await fetch(request);
+      const response = await fetch(request);
+      const content = await response.json();
+      const { ok, status, statusText, redirected } = response;
+      return {
+        content,
+        ok,
+        status,
+        statusText,
+        redirected,
+        headers: response.headers,
+        url: response.url,
+      };
 
-      const contentType = result.headers.get('content-type');
-      if (contentType && contentType.indexOf('application/json') !== -1) {
-        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: {
-            endpoint,
-            error_code: 'INVALID_SERVER_RESPONSE',
-            details: 'Either server not authenticated or error on server',
-            severity: 'error',
-          },
-        };
-      }
     } catch (error) {
       console.error(error);
     }

src/components/ConsoleResponse/Response.tsx

@@ -25,22 +25,27 @@ export class ConsoleResponse extends React.PureComponent<ConsoleResponseProps, C
   };
 
   render() {
+    const { response: { headers, type, status, statusText, content } } = this.props;
+    const collapse = this.state.collapse;
     return(
       <>
         <RightPanelHeader> status: </RightPanelHeader>
-        <StatusWrapper className={'status-' + this.props.response.type}> {this.props.response.status} {this.props.response.statusText}</StatusWrapper>
+        <StatusWrapper className={'status-' + type}> {status} {statusText}</StatusWrapper>
         <RightPanelHeader> Response Payload </RightPanelHeader>
         <JsonWrapper>
-          <JsonViewer data={this.props.response.content!} />
+          <JsonViewer data={content!} />
         </JsonWrapper>
         <RightPanelHeader> Response Headers</RightPanelHeader>
         <HeaderWrapper>
-          <SourceCodeWrapper className={'collapse-' + this.state.collapse}>
+          <SourceCodeWrapper className={'collapse-' + collapse}>
-            <SourceCodeWithCopy lang="json" source={JSON.stringify(this.props.response.headers, null, 2)}/>
+            <SourceCodeWithCopy lang="json" source={JSON.stringify(headers, null, 2)}/>
           </SourceCodeWrapper>
-          <ShowMore onClick={this.changeCollapse}>
+          {
-            <u>+ show undocumented response headers</u>
+            collapse &&
-          </ShowMore>
+            <ShowMore onClick={this.changeCollapse}>
+              <u>+ show undocumented response headers</u>
+            </ShowMore>
+          }
         </HeaderWrapper>
       </>
     );