Merge branch 'preload' of https://github.com/oslabs-beta/Swell into preload

Author: ChunsonHoag

httpMainController.js

@@ -45,6 +45,9 @@ const protoParserFunc = require("./src/client/protoParser.js");
 
 // require menu file
 require("./menu/mainMenu");
+// require http controller file
+require('./httpMainController.js')();
+
 
 // configure logging
 // autoUpdater.logger = log;
@@ -664,3 +667,6 @@ ipcMain.on("open-gql", (event, args) => {
       });
   }
 });
+
+// export main window so we can access ipcMain from other files
+module.exports = mainWindow; 

main.js

@@ -1,16 +1,20 @@
 const { ipcRenderer, contextBridge } = require("electron");
 
 contextBridge.exposeInMainWorld("api", {
-  send: (channel, data) => {
+  send: (channel, ...data) => {
     // allowlist channels
     const allowedChannels = [
       "toMain",
       "confirm-clear-history",
       "import-proto",
       "quit-and-install",
+      "open-gql",
+      "import-collection",
+      "export-collection",
+      'open-http',
     ];
     if (allowedChannels.includes(channel)) {
-      ipcRenderer.send(channel, data);
+      ipcRenderer.send(channel, ...data);
     }
   },
   receive: (channel, cb) => {
@@ -22,6 +26,8 @@ contextBridge.exposeInMainWorld("api", {
       "clear-history-response",
       "proto-info",
       "message",
+      "reply-gql",
+      'reqResUpdate'
     ];
     if (allowedChannels.includes(channel)) {
       ipcRenderer.on(channel, (event, ...args) => cb(...args));

package-lock.json

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import "../../../assets/style/App.scss";
 const { api } = window;
-// import ContentsContainer from './ContentsContainer.jsx';
+import ContentsContainer from './ContentsContainer.jsx';
 // import ReqResCtrl from '../../controllers/reqResController';
 import SidebarContainer from "./SidebarContainer.jsx";
 import UpdatePopUpContainer from "./UpdatePopUpContainer.jsx";
@@ -56,7 +56,7 @@ class App extends Component {
       <div id="app">
         <UpdatePopUpContainer />
         <SidebarContainer />
-        {/* <ContentsContainer /> */}
+        <ContentsContainer />
       </div>
     );
   }

preload.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component } from "react";
 
-import GraphContainer from './GraphContainer.jsx';
+// import GraphContainer from './GraphContainer.jsx';
 import ReqResContainer from './ReqResContainer.jsx';
 import NavBarContainer from './NavBarContainer.jsx';
 
@@ -12,7 +12,7 @@ class Contents extends Component {
   render() {
     return(
       <div className={'contents'}>
-        <GraphContainer/>
+        {/* <GraphContainer/> */}
         <NavBarContainer/>
         <ReqResContainer/>
       </div>

src/client/components/containers/App.jsx

@@ -40,7 +40,7 @@ class UpdatePopUpContainer extends Component {
         <p>{this.state.message}</p>
         {this.state.message === "Update downloaded." && (
           <>
-            <p class="updateMessage">
+            <p className="updateMessage">
               Do you want to restart and install now? <br /> (If not, will
               auto-install on restart.)
             </p>

src/client/components/containers/ContentsContainer.jsx

@@ -4,13 +4,12 @@ import db from "../db";
 import * as store from "../store";
 import * as actions from "../actions/actions";
 
-const { api } = window; 
+const { api } = window;
 
-
-api.receive('add-collection', (...args) => {
-    console.log('received data: ', JSON.parse(args.data));
-    collectionsController.addCollectionToIndexedDb(JSON.parse(args.data));
-    collectionsController.getCollections();
+api.receive("add-collection", (...args) => {
+  console.log("received data: ", JSON.parse(args.data));
+  collectionsController.addCollectionToIndexedDb(JSON.parse(args.data));
+  collectionsController.getCollections();
 });
 
 const collectionsController = {
@@ -63,7 +62,7 @@ const collectionsController = {
         foundCollection.name += " import";
         foundCollection.id = uuid();
 
-        ipcRenderer.send("export-collection", { collection: foundCollection });
+        api.send("export-collection", { collection: foundCollection });
       })
       .catch((error) => {
         console.error(error.stack || error);
@@ -72,7 +71,7 @@ const collectionsController = {
   },
 
   importCollection(collection) {
-    ipcRenderer.send("import-collection", collection);
+    api.send("import-collection", collection);
   },
 };
 

src/client/components/containers/UpdatePopUpContainer.jsx

@@ -4,7 +4,7 @@ import { InMemoryCache } from "apollo-cache-inmemory";
 import { WebSocketLink } from "apollo-link-ws";
 import { SubscriptionClient } from "subscriptions-transport-ws";
 //const { session } = require('electron').remote
-const { ipcRenderer } = require("electron");
+const { api } = window;
 
 import * as store from "../store";
 import * as actions from "../actions/actions";
@@ -26,17 +26,19 @@ const graphQLController = {
     });
   },
 
-  // handles graphQL queries and mutations
+  // handles graphQL queries and mutationsnp
   sendGqlToMain(args) {
     return new Promise((resolve) => {
-      ipcRenderer.send("open-gql", args);
-      ipcRenderer.on("reply-gql", (event, result) => {
+      api.receive("reply-gql", (result) => {
+        console.log("This is result:", result);
         // needs formatting because component reads them in a particular order
         result.reqResObj.response.cookies = this.cookieFormatter(
           result.reqResObj.response.cookies
         );
+        console.log(result);
         resolve(result);
       });
+      api.send("open-gql", args);
     });
   },
 

src/client/controllers/collectionsController.js

@@ -77,6 +77,7 @@ const httpController = {
         clearInterval(interval);
         if (foundHTTP2Connection.status === "initialized") {
           reqResObj.connection = "error";
+          // LISTEN FOR ERROR EVENTS FROM MAIN PROCESS HERE
           store.default.dispatch(actions.reqResUpdate(reqResObj));
         }
       }, 10000);
@@ -141,7 +142,8 @@ const httpController = {
     reqResObj.connection = "pending";
     reqResObj.timeSent = Date.now();
     store.default.dispatch(actions.reqResUpdate(reqResObj));
-
+  
+    // format headers in chosen reqResObj so we can add them to our request
     const formattedHeaders = {};
     reqResObj.request.headers.forEach((head) => {
       formattedHeaders[head.key] = head.value;
@@ -150,15 +152,11 @@ const httpController = {
 
     // initiate request
     const reqStream = client.request(formattedHeaders, {
+      // do not immediately close the *writable* side of the http2 stream (i.e. what the request sends over), in case we are using a request method that sends a payload body
       endStream: false,
     });
 
-    console.log("reqStream at THIS moment : ", {
-      ...reqStream,
-    });
-
-    // endStream false means we can continue to send more data, which we would for a body;
-    // Send body depending on method;
+    // we can now close the writable side of our stream, either sending our request body or not, depending on our method
     if (
       reqResObj.request.method !== "GET" &&
       reqResObj.request.method !== "HEAD"
@@ -169,10 +167,11 @@ const httpController = {
       reqStream.end();
     }
 
-    console.log("reqStream at THIS moment : ", {
-      ...reqStream,
-    });
+    // console.log("reqStream at THIS moment : ", {
+    //   ...reqStream,
+    // });
 
+    // create an object that represents our open connection.
     const openConnectionObj = {
       stream: reqStream,
       protocol: "HTTP2",
@@ -185,11 +184,14 @@ const httpController = {
       "   openConnectionObj : ",
       JSON.parse(JSON.stringify(openConnectionObj))
     );
+
+    // this is the connection array that was passed into these controller functions from reqResController.js
     connectionArray.push(openConnectionObj);
 
     let isSSE;
 
     reqStream.on("response", (headers, flags) => {
+      // first argumnet of callback to response listener in ClientHttp2Stream is an object containing the receieved HTTP/2 Headers Object, as well as the flags associated with those headers
       isSSE = headers["content-type"].includes("stream");
 
       if (isSSE) {
@@ -201,24 +203,28 @@ const httpController = {
       }
       reqResObj.isHTTP2 = true;
       reqResObj.timeReceived = Date.now();
+      console.log('this is the time inside the response event listener : ', Date.now())
       reqResObj.response.headers = headers;
       // reqResObj.response.events = []; // passing empty array to handleSingleEvent
       // below instead of running this line. This invocation is different from
       // when it is run below to Check if the URL provided is a stream (near line 327)
 
       // if cookies exists, parse the cookie(s)
       if (setCookie.parse(headers["set-cookie"])) {
+        console.log('made it into cookies')
         reqResObj.response.cookies = this.cookieFormatter(
           setCookie.parse(headers["set-cookie"])
         );
         store.default.dispatch(actions.reqResUpdate(reqResObj));
+        // RECEIVE A "RESPONSE EVENT"
         this.handleSingleEvent([], reqResObj, headers);
       }
     });
 
     reqStream.setEncoding("utf8");
     let data = "";
     reqStream.on("data", (chunk) => {
+      console.log('is this a server sent event? ', isSSE)
       data += chunk;
       if (isSSE) {
         let couldBeEvents = true;
@@ -252,6 +258,7 @@ const httpController = {
     reqStream.on("end", () => {
       if (isSSE) {
         const receivedEventFields = this.parseSSEFields(data);
+        console.log('SSE triggered')
         receivedEventFields.timeReceived = Date.now();
         reqResObj.connection = "closed";
         reqResObj.response.events.push(receivedEventFields);
@@ -399,6 +406,8 @@ const httpController = {
     newObj.connection = "closed";
     newObj.connectionType = "plain";
     newObj.timeReceived = Date.now();
+    console.log('Date.now() inside handleSingleEvent : ', Date.now())
+    console.log('this is what was added : ', newObj.timeReceived)
     newObj.response.events.push(response);
     store.default.dispatch(actions.reqResUpdate(newObj));
   },