resolve eslint errors

Author: h15200

src/client/components/display/ResponseEventsDisplay.jsx

@@ -1,71 +1,89 @@
-import React from 'react';
-import SSERow from './SSERow.jsx';
-import JSONPretty from 'react-json-pretty';
-import createDOMPurify from 'dompurify';
-
-
+import React from "react";
+import JSONPretty from "react-json-pretty";
+import createDOMPurify from "dompurify";
+import SSERow from "./SSERow.jsx";
 
 const ResponseEventsDisplay = ({ response }) => {
   const { events, headers } = response;
   const displayContents = [];
 
   // If it's an SSE, render event rows
-  
-  if (headers && headers['content-type'] && headers['content-type'].includes('text/event-stream')) {
+
+  if (
+    headers &&
+    headers["content-type"] &&
+    headers["content-type"].includes("text/event-stream")
+  ) {
     events.forEach((cur, idx) => {
       displayContents.push(<SSERow key={idx} content={cur} />);
     });
   }
   // if the response content-type, purify and render html
-  else if (headers && headers['content-type'] && headers['content-type'].includes('text/html')) {
+  else if (
+    headers &&
+    headers["content-type"] &&
+    headers["content-type"].includes("text/html")
+  ) {
+    // console.log("headers:content-type ->", headers["content-type"]);
+    // console.log("events0 -> ", events[0]);
     displayContents.push(
-      <div className="okay" dangerouslySetInnerHTML={{__html: createDOMPurify.sanitize(events[0])}} />
-    )
-  }
-  else if (events && events.length > 1) {
+      <div
+        className="okay"
+        key="http2_html_content"
+        dangerouslySetInnerHTML={{
+          __html: createDOMPurify.sanitize(events[0]),
+        }}
+      />
+    );
+  } else if (events && events.length > 1) {
     if (events) {
-      let resEvents = '';
+      let resEvents = "";
       let eventJSON;
       for (const event of events) {
         eventJSON = JSON.stringify(event, null, 4);
         resEvents = `${resEvents}
-${eventJSON}`
+${eventJSON}`;
       }
       displayContents.push(
         <div className="json-response" key="jsonresponsediv">
-          <JSONPretty data={resEvents} space="4" theme={{
-            main: 'line-height:1.3; color: midnightblue; background:#RRGGBB; overflow:auto;',
-            key: 'color:#0089D0;', // bluetwo
-            string: 'color:#15B78F;',// greenone
-            value: 'color:#fd971f;', // a nice orange
-            boolean: 'color:#E00198;', // gqlpink
-          }}
+          <JSONPretty
+            data={resEvents}
+            space="4"
+            theme={{
+              main:
+                "line-height:1.3; color: midnightblue; background:#RRGGBB; overflow:auto;",
+              key: "color:#0089D0;", // bluetwo
+              string: "color:#15B78F;", // greenone
+              value: "color:#fd971f;", // a nice orange
+              boolean: "color:#E00198;", // gqlpink
+            }}
           />
         </div>
       );
     }
-    
   }
 
   // Otherwise, render a single display
-  else {
-    if (events) {
-      displayContents.push(
-        <div className="json-response" key="jsonresponsediv">
-          <JSONPretty data={events[0]} space="4" theme={{
-            main: 'line-height:1.3; color: midnightblue; background:#RRGGBB; overflow:auto;',
-            key: 'color:#0089D0;', // bluetwo
-            string: 'color:#15B78F;',// greenone
-            value: 'color:#fd971f;', // a nice orange
-            boolean: 'color:#E00198;', // gqlpink
+  else if (events) {
+    displayContents.push(
+      <div className="json-response" key="jsonresponsediv">
+        <JSONPretty
+          data={events[0]}
+          space="4"
+          theme={{
+            main:
+              "line-height:1.3; color: midnightblue; background:#RRGGBB; overflow:auto;",
+            key: "color:#0089D0;", // bluetwo
+            string: "color:#15B78F;", // greenone
+            value: "color:#fd971f;", // a nice orange
+            boolean: "color:#E00198;", // gqlpink
           }}
-          />
-        </div>
-      );
-    }
+        />
+      </div>
+    );
   }
 
   return <div className="tab_content-response">{displayContents}</div>;
-}
+};
 
 export default ResponseEventsDisplay;

src/client/components/display/Tab.jsx

@@ -1,21 +1,31 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
 class Tab extends Component {
   constructor(props) {
     super(props);
     this.tabClickHandler = this.tabClickHandler.bind(this);
   }
 
-  tabClickHandler () {
+  tabClickHandler() {
     let selectedTab = this.props.tabName;
-    this.props.onTabSelected(selectedTab);        
+    this.props.onTabSelected(selectedTab);
   }
 
   render() {
     return (
-      <li onClick={this.tabClickHandler} className={this.props.tabName === this.props.openTab ? 'tab-list-item-active': 'tab-list-item'} key={this.props.tabName}>{this.props.tabName}</li>
-    )
+      <li
+        onClick={this.tabClickHandler}
+        className={
+          this.props.tabName === this.props.openTab
+            ? "tab-list-item-active"
+            : "tab-list-item"
+        }
+        key={this.props.tabName}
+      >
+        {this.props.tabName}
+      </li>
+    );
   }
 }
 
-export default (Tab);
+export default Tab;