Close connection fully wired up

src/client/components/ReqResCtrl.js

@@ -1,92 +1,158 @@
-import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import * as store from '../store';
 import * as actions from '../actions/actions';
-import * as actionTypes from '../actions/actionTypes';
 
 const ReqResCtrl = {
-  parseReqObject(object) {
-    let { id, url, timeSent, timeReceived, connection, conntectionType, request: { method }, request: { headers }, request: { body} } = object;
+  parseReqObject(object, abortController) {
+    let { url, request: { method }, request: { headers }, request: { body } } = object;
+
+    console.log(headers);
 
     method = method.toUpperCase();
+    let formattedHeaders = {};
+    headers.forEach(head => {
+      formattedHeaders[head.key] = head.value
+    })
 
     let outputObj = {
       method: method,
       mode: "cors", // no-cors, cors, *same-origin
       cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
       credentials: "same-origin", // include, *same-origin, omit
-      headers: {
-        'Content-Type': 'application/json; charset=utf-8',
-        'Accept': 'application/json'
-        // "Content-Type": "application/x-www-form-urlencoded",
-      },
+      headers: formattedHeaders,
       redirect: "follow", // manual, *follow, error
       referrer: "no-referrer", // no-referrer, *client
     };
 
     if (method !== 'GET' && method !== 'HEAD') {
-      outputObj.body = JSON.stringify(body)
+      outputObj.body = body;
     }
 
-    ReqResCtrl.fetchController(outputObj, url, object)
+    this.fetchController(outputObj, url, object, abortController)
   },
 
   /* Utility function to open fetches */
-  fetchController(parsedObj, url, originalObj) {
+  fetchController(parsedObj, url, originalObj, abortController) {
     let timeSentSnap = Date.now();
+    // const controller = new AbortController();
+    const signal = abortController.signal;
+
+    console.log(signal);
+
+    parsedObj.signal = signal; 
+
+    // const abortBtn = document.getElementById(`${originalObj.id}close`);
+
+    // abortBtn.addEventListener('click', function() {
+    //   controller.abort();
+    //   console.log('Download aborted');
+    // });
 
     return fetch(url, parsedObj)
-      .then(response => {
-        let reader = response.body.getReader();
-        // console.log(reader);
-        read();
-
-        // console.log(originalObj);
-        const newObj = JSON.parse(JSON.stringify(originalObj));
-
-        newObj.timeSent = timeSentSnap;
-        newObj.timeReceived = Date.now();
-        newObj.response = {
-          headers: [response.headers],
-          events: [],
-        };
-
-        newObj.connection = 'open';
-        newObj.connectionType = 'SSE';
-
-        function read() {
-          reader.read().then(obj => {
-            // console.log(obj);
-            if (obj.done) {
-              // console.log('finished');
-              return;
-            } else {
-              let string = new TextDecoder("utf-8").decode(obj.value);
-              newObj.response.events.push({
-                data: string,
-                timeReceived: Date.now()
-              });
-              // console.log(string);
-              store.default.dispatch( actions.reqResUpdate(newObj) );
-              read();
-            }
+    .then(response => {
+      let heads = {};
+      for (let entry of response.headers.entries()) {
+        heads[entry[0].toLowerCase()] = entry[1];
+      }
+
+      const contentType = heads['content-type'];
+
+      switch (contentType) {
+        case 'text/event-stream' :
+          console.log('text/event-stream');
+          this.handleSSE(response, originalObj, timeSentSnap);
+          break;
+
+        case 'text/plain' :
+          console.log('text/plain');
+          this.handleSingleEvent();
+          break;
+
+        case 'application/json' :
+          console.log('application/json');
+          this.handleSingleEvent();
+          break;
+
+        case 'application/javascript' :
+          console.log('application/javascript');
+          this.handleSingleEvent();
+          break;
+
+        case 'application/xml' :
+          console.log('application/xml');
+          this.handleSingleEvent();
+          break;
+
+        case 'text/xml' :
+          console.log('text/xml');
+          this.handleSingleEvent();
+          break;
+
+        case 'text/html' :
+          console.log('text/html');
+          this.handleSingleEvent();
+          break;
+
+        default :
+          console.log('content-type not recognized')
+      }
+    })
+    .catch(err => console.log(err))
+  },
+
+  handleSingleEvent() {
+    console.log('Single Event')
+  },
+
+  /* handle SSE Streams */
+  handleSSE(response, originalObj, timeSentSnap) {
+    let reader = response.body.getReader();
+    console.log('response', response);
+
+    read();
+
+    const newObj = JSON.parse(JSON.stringify(originalObj));
+
+    newObj.timeSent = timeSentSnap;
+    newObj.timeReceived = Date.now();
+    newObj.response = {
+      headers: [response.headers],
+      events: [],
+    };
+
+    newObj.connection = 'open';
+    newObj.connectionType = 'SSE';
+
+    function read() {
+      reader.read().then(obj => {
+        // console.log(obj);
+        if (obj.done) {
+          // console.log('finished');
+          return;
+        } else {
+          let string = new TextDecoder("utf-8").decode(obj.value);
+          newObj.response.events.push({
+            data: string,
+            timeReceived: Date.now()
           });
+          // console.log(string);
+          store.default.dispatch(actions.reqResUpdate(newObj));
+          read();
         }
       });
+    }
   },
 
   /* Creates a REQ/RES Obj based on event data and passes the object to fetchController */
-  openEndPoint(e) {
+  openEndPoint(e, abortController) {
     const reqResComponentID = e.target.id;
     const gotState = store.default.getState();
     const reqResArr = gotState.business.reqResArray;
 
     // Search the store for the passed in ID
     const reqResObj = reqResArr.find((el) => el.id == reqResComponentID);
 
-    ReqResCtrl.parseReqObject(reqResObj);
-    // Send to fetchController callback
-    // ReqResCtrl.fetchController(reqResObj);
+    ReqResCtrl.parseReqObject(reqResObj, abortController);
   },
 
   /* Iterates across REQ/RES Array and opens connections for each object and passes each object to fetchController */
@@ -98,7 +164,12 @@ const ReqResCtrl = {
 
   /* Closes open endpoint */
   closeEndpoint(e) {
-    resReqArr[e.id].close();
+    console.log('closeEndpoint', e.target);
+    const reqResComponentID = e.target.id;
+    const gotState = store.default.getState();
+    const reqResArr = gotState.business.reqResArray;
+
+    reqResArr[e.target.id].close();
   },
 
   /* Closes all open endpoint */

src/client/components/display/HeaderEntryForm.jsx

@@ -72,7 +72,7 @@ class HeaderEntryForm extends Component {
           headers: headersDeepCopy,
           count: this.state.count+1,
         }, () => {
-          console.log(this.state.headers);
+          this.props.updateHeaders(this.state.headers);
         });
       }
     }

src/client/components/display/ModalNewRequest.jsx

@@ -65,7 +65,8 @@ class ModalNewRequest extends Component {
   addNewRequest() {
     let reqRes = {
       id : Math.floor(Math.random() * 100000),
-      url : this.state.url,
+      url: 'http://localhost:8080/sse',
+      // url : this.state.url,
       timeSent : null,
       timeReceived : null,
       connection : 'uninitialized',
@@ -79,7 +80,6 @@ class ModalNewRequest extends Component {
         headers : null,
         events : null,
       },
-      abortController : new AbortController(),
     };
     this.props.reqResAdd(reqRes);
   }
@@ -102,6 +102,8 @@ class ModalNewRequest extends Component {
         <input type='text' placeholder='URL' onChange={(e) => {
           this.urlOnChange(e)
         }}></input>
+
+         {/* value={'http://localhost:8080/sse'}  */}
 
         <HeaderEntryForm updateHeaders={this.updateHeaders} contentTypeHeader={this.state.contentTypeHeader}></HeaderEntryForm>
 

src/client/components/display/ReqRes.jsx

@@ -19,6 +19,11 @@ class ReqRes extends Component {
     super(props);
   }
 
+  componentDidMount() {
+    this.setState({
+      abortController : new AbortController(),
+    })
+  }
 
   render() {
     let contentBody = [];
@@ -35,10 +40,10 @@ class ReqRes extends Component {
         {this.props.content.timeReceived}
         {this.props.content.connectionType}
         {contentBody}
-        <button id={this.props.content.id} onClick={ReqResCtrl.openEndPoint}>Send</button>
+        <button id={this.props.content.id} onClick={(e) => ReqResCtrl.openEndPoint(e, this.state.abortController)}>Send</button>
         <button onClick={() => {
           console.log(`aborting fetch for ReqRes ${this.props.content.id}.`);
-          this.props.content.abortController.abort();
+          this.state.abortController.abort();
         }}>Close</button>
       </div>
     )