Nov-14-8:44PM

src/client/components/ReqResCtrl.js

@@ -0,0 +1,115 @@
+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;
+
+    method = method.toUpperCase();
+
+    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",
+      },
+      redirect: "follow", // manual, *follow, error
+      referrer: "no-referrer", // no-referrer, *client
+    };
+
+    if (method !== 'GET' && method !== 'HEAD') {
+      outputObj.body = JSON.stringify(body)
+    }
+
+    ReqResCtrl.fetchController(outputObj, url, object)
+
+  },
+
+  /* Utility function to open fetches */
+  fetchController(parsedObj, url, originalObj) {
+    let timeSentSnap = Date.now();
+
+    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 = 'open...';
+
+        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) {
+    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);
+  },
+
+  /* Iterates across REQ/RES Array and opens connections for each object and passes each object to fetchController */
+  openEndPoints(e) {
+    for (let resReqObj of resReqArr) {
+      fetchController(resReqArr[e.id].endPoint, resReqArr[e.id].method, resReqArr[e.id].serverType);
+    }
+  },
+
+  /* Closes open endpoint */
+  closeEndpoint(e) {
+    resReqArr[e.id].close();
+  },
+
+  /* Closes all open endpoint */
+  closeEndpoints(resReqArr, e) {
+    for (let resReqObj of resReqArr) {
+      closeEndpoint(resReqObj);
+    }
+  }
+};
+
+
+
+export default ReqResCtrl;

src/client/components/containers/ReqResContainer.jsx

@@ -24,7 +24,7 @@ class ReqResContainer extends Component {
       return <ReqRes content={reqRes} key={index}></ReqRes>
     });
     return(
-      <div>
+      <div style={{'border' : '1px solid black'}}>
         ReqResContainer
         {reqResArr}
       </div>

src/client/components/display/ModalNewRequest.jsx

@@ -54,10 +54,12 @@ class ModalNewRequest extends Component {
 
   addNewRequest() {
     let reqRes = {
-      id : Math.random() * 100000,
+      id : Math.floor(Math.random() * 100000),
       url : this.state.url,
       timeSent : null,
       timeReceived : null,
+      connection : 'uninitialized',
+      connectionType : null,
       request: {
         method : this.state.method,
         headers : JSON.parse(this.state.headers),
@@ -66,7 +68,6 @@ class ModalNewRequest extends Component {
       response : {
         headers : null,
         data : null,
-        type : null,
       }
     }
 

src/client/components/display/ReqRes.jsx

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import { connect } from 'react-redux';
 import Request from './Request.jsx';
 import Response from './Response.jsx';
+import ReqResCtrl from '../ReqResCtrl';
 
 import * as actions from '../../actions/actions';
 
@@ -21,11 +22,16 @@ class ReqRes extends Component {
 
   render() {
     return(
-      <div>
+      <div style={{'border' : '1px solid black', 'margin' : '3px', 'display' : 'flex', 'flexDirection' : 'column'}}>
+        {this.props.content.id}
         {this.props.content.url}
-        {this.props.content.request.method}
+        {this.props.content.timeSent}
+        {this.props.content.timeReceived}
+        {this.props.content.connectionType}
         {/* <Request/>
         <Response/> */}
+        <button id={this.props.content.id} onClick={ReqResCtrl.openEndPoint}>Send</button>
+        <button>Close</button>
       </div>
     )
   }

test-server/index.js

@@ -1,6 +1,12 @@
-const express = require('express')
-const app = express()
-const port = 8080
+const express = require('express');
+const app = express();
+const port = 8080;
+
+app.use(function(req, res, next) {
+    res.header("Access-Control-Allow-Origin", "*");
+    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+    next();
+  });
 
 app.get('/', (req, res) => res.send('Test server running...'))
 
@@ -20,7 +26,8 @@ app.get('/sse', (req, res, next) => {
 
     setTimeout(() => {
         let respObj = {
-            event : 'testEvent',
+            id : 2,
+            eventType : 'testEvent',
             data : 'hi2',
         }
         res.write(JSON.stringify(respObj));

webpack.config.js

@@ -1,7 +1,7 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 
-const entry = [
+const entryArr = [
   './src/client/index.js',
   './public/styles.css'
 ];
@@ -11,12 +11,12 @@ module.exports = {
   devServer: {
     port: 3000,
   },
-  entry,
+  entry: entryArr,
   output: {
-    filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist/')
+    path: path.resolve(__dirname, 'dist/'),
+    filename: 'bundle.js'
   },
-  //devtool: "eval-source-map",
+  devtool: "eval-source-map",
   module: {
     loaders: [
       {