Simplified syntax in events display

open-source-labs · Jul 30, 2019 · 9154432 · 9154432
1 parent 83ec093
commit 9154432
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 42 deletions.
diff --git a/src/client/components/containers/ResponseContainer.jsx b/src/client/components/containers/ResponseContainer.jsx
@@ -75,11 +75,12 @@ class ResponseContainer extends Component {
         }
       }
     }
+    console.log('content being passed', this.props.content);
 
     return (
       <div className="resreq_res-container">
         <ResponseTabs responseContent={this.props.content} handleTabSelect={this.handleTabSelect} />
-        {this.state.openTabs === 'Response Events' && <ResponseEventsDisplay responseContent={this.props.content} />}
+        {this.state.openTabs === 'Response Events' && <ResponseEventsDisplay props={this.props.content} />}
         {this.state.openTabs === 'Response Headers' && <ResponseHeadersDisplay responseContent={this.props.content} />}
         {this.state.openTabs === 'Response Cookies' && <ResponseCookiesDisplay responseContent={this.props.content} />}
       </div>

diff --git a/src/client/components/display/ResponseEventsDisplay.jsx b/src/client/components/display/ResponseEventsDisplay.jsx
@@ -2,50 +2,33 @@ import React, { Component } from 'react';
 import EventRow from './EventRow.jsx';
 import JSONPretty from 'react-json-pretty';
 
-class ResponseEventsDisplay extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const displayContents = [];
-
-    // Step 1  - Locate responses from store add them to cache array
-    const responsesCache = [];
-    responsesCache.push(this.props);
-    console.log('this.props)', this.props);
-
-    // Step 2  - Increment across all responses in array
-    responsesCache.forEach((cur, idx) => {
-      const responseEvents = cur.responseContent.events;
-      if (this.props.responseContent.headers) {
-        const responseContentType = this.props.responseContent.headers['content-type'];
+const ResponseEventsDisplay = ({ props }) => {
+  const { events, headers } = props;
+  const displayContents = [];
 
-        // Check content type of each response Update to use includes
-        if (responseContentType && responseContentType.includes('text/event-stream')) {
-          responseEvents.forEach((cur, idx) => {
-            displayContents.push(<EventRow key={idx} content={cur} />);
-          });
-        }
-        else {
-          displayContents.push(
-            <div className="json-response" key={`jsonresponsediv+${idx}`}>
-              <JSONPretty data={responseEvents[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>
-          );
-        }
-      }
+  // If it's an SSE, render event rows
+  if (headers['content-type'] && headers['content-type'].includes('text/event-stream')) {
+    events.forEach((cur, idx) => {
+      displayContents.push(<EventRow key={idx} content={cur} />);
     });
-
-    return <div className="tab_content-response">{displayContents}</div>;
   }
+  // Otherwise, render a single display
+  else {
+    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>
+    );
+  }
+
+  return <div className="tab_content-response">{displayContents}</div>;
 }
 
 export default ResponseEventsDisplay;