Merge pull request #21 from oslabs-beta/subscription

Simplified ResponseEventsDisplay

src/client/components/containers/GraphContainer.jsx

@@ -3,10 +3,6 @@ import { connect } from 'react-redux';
 import Graph from '../display/Graph.jsx';
 import * as actions from '../../actions/actions';
 
-const mapStateToProps = store => ({});
-
-const mapDispatchToProps = dispatch => ({});
-
 class GraphContainer extends Component {
   constructor(props) {
     super(props);
@@ -21,4 +17,4 @@ class GraphContainer extends Component {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(GraphContainer);
+export default GraphContainer;

src/client/components/containers/ResponseContainer.jsx

@@ -7,10 +7,6 @@ import ResponseEventsDisplay from '../display/ResponseEventsDisplay.jsx';
 import ResponseHeadersDisplay from '../display/ResponseHeadersDisplay.jsx';
 import ResponseCookiesDisplay from '../display/ResponseCookiesDisplay.jsx';
 
-const mapStateToProps = store => ({});
-const mapDispatchToProps = dispatch => ({});
-// TODO: Implement Redux in these components?
-
 class ResponseContainer extends Component {
   constructor(props) {
     super(props);
@@ -79,19 +75,17 @@ 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>
     );
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(ResponseContainer);
+export default ResponseContainer;

src/client/components/display/SSERow.jsx → src/client/components/display/EventRow.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import ReactJson from 'react-json-view';
 
-class SSERow extends Component {
+class EventRow extends Component {
   constructor(props) {
     super(props);
     this.state = {};
@@ -16,7 +16,6 @@ class SSERow extends Component {
     expandable.classList.toggle('expanded');
   }
   render() {
-    // console.log("IN THE SSEROW FILE")
     let contentBody;
     try {
       let json = JSON.parse(this.props.content.data);
@@ -49,22 +48,22 @@ class SSERow extends Component {
               {this.props.content.timeReceived}
             </span>
           </div>
-          
+
           <div>
             <span className={'tertiary-title expand-btn'} onClick={(e) => this.handleClick(e)} ></span>
           </div>
         </div>
 
         <div className={'title-row data-inner'}>
-            <div>
-              <span className={'tertiary-title'}>
-                Data {contentBody}
-              </span>
-            </div>
+          <div>
+            <span className={'tertiary-title'}>
+              Data {contentBody}
+            </span>
+          </div>
         </div>
       </div>
     );
   }
 }
 
-export default SSERow;
+export default EventRow;

src/client/components/display/ReqRes.jsx

@@ -9,8 +9,6 @@ import RequestTabs from './RequestTabs.jsx';
 
 import * as actions from '../../actions/actions';
 
-const mapStateToProps = store => ({});
-
 const mapDispatchToProps = dispatch => ({
   reqResDelete: (reqRes) => {
     dispatch(actions.reqResDelete(reqRes));
@@ -144,6 +142,6 @@ class ReqRes extends Component {
 }
 
 export default connect(
-  mapStateToProps,
+  null,
   mapDispatchToProps,
 )(ReqRes);

src/client/components/display/ResponseCookiesDisplay.jsx

@@ -7,7 +7,7 @@ class ResponseCookiesDisplay extends Component {
   }
 
   render() {
-    const tabContentShownEvents = [];
+    const displayContents = [];
 
     // Step 1  - Locate responses from store add them to cache array
     const responsesCache = [];
@@ -17,10 +17,10 @@ class ResponseCookiesDisplay extends Component {
 
     responsesCache.forEach((cur, idx) => {
       if (!this.props.responseContent.cookies) {
-        tabContentShownEvents.push(<p className="reqResContent" key={`reqResRESContent${idx}`} >No Response Cookies</p>)
+        displayContents.push(<p className="reqResContent" key={`reqResRESContent${idx}`} >No Response Cookies</p>)
         return;
       }
-      tabContentShownEvents.push(
+      displayContents.push(
         <CookieTable
           className="cookieTable"
           cookies={this.props.responseContent.cookies}
@@ -29,7 +29,7 @@ class ResponseCookiesDisplay extends Component {
       );
     });
 
-    return <div className="tab_content-response">{tabContentShownEvents}</div>;
+    return <div className="tab_content-response">{displayContents}</div>;
   }
 }
 

src/client/components/display/ResponseEventsDisplay.jsx

@@ -1,52 +1,34 @@
 import React, { Component } from 'react';
-import SSERow from './SSERow.jsx';
+import EventRow from './EventRow.jsx';
 import JSONPretty from 'react-json-pretty';
 
-class ResponseEventsDisplay extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const tabContentShownEvents = [];
-
-    // Step 1  - Locate responses from store add them to cache array
-    const responsesCache = [];
-    responsesCache.push(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) => {
-            tabContentShownEvents.push(<SSERow key={idx} content={cur} />);
-          });
-        }
-        else {
-          responseEvents.forEach((cur, idx) => {
-            tabContentShownEvents.push(
-              <div className="json-response" key={`jsonresponsediv+${idx}`}>
-                <JSONPretty data={cur} 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">{tabContentShownEvents}</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;

src/client/components/display/ResponseHeadersDisplay.jsx

@@ -6,7 +6,7 @@ class ResponseHeadersDisplay extends Component {
   }
 
   render() {
-    const tabContentShownEvents = [];
+    const displayContents = [];
 
     // Step 1  - Locate responses from store add them to cache array
     const responsesCache = [];
@@ -16,13 +16,13 @@ class ResponseHeadersDisplay extends Component {
     responsesCache.forEach((cur, idx) => {
       const headerObj = this.props.responseContent.headers;
       if (!Object.keys(headerObj).length) {
-        tabContentShownEvents.push(<p className="reqResContent" key={`reqResRESContent${idx}`} >No Response Headers</p>)
+        displayContents.push(<p className="reqResContent" key={`reqResRESContent${idx}`} >No Response Headers</p>)
         return;
       }
       if (!Array.isArray(headerObj) && headerObj) {
         for (const key in headerObj) {
           if (!Array.isArray(cur)) {
-            tabContentShownEvents.push(
+            displayContents.push(
               <div className="grid-2" key={key}>
                 <span className="tertiary-title title_offset">{key}</span>
                 <span className="tertiary-title title_offset">
@@ -37,7 +37,7 @@ class ResponseHeadersDisplay extends Component {
         }
       }
     });
-    return <div className="tab_content-response">{tabContentShownEvents}</div>;
+    return <div className="tab_content-response">{displayContents}</div>;
   }
 }
 export default ResponseHeadersDisplay;