Merge pull request #16 from oslabs-beta/dev

merging to our master from dev!

Author: prheee

.babelrc

@@ -7,5 +7,5 @@
   "presets": [
     "@babel/preset-env",
     "@babel/preset-react"
-  ]
+  ],
 }

main.js

@@ -7,14 +7,26 @@ process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0;
 const { app, BrowserWindow, TouchBar, ipcMain } = require('electron');
 const path = require('path');
 const url = require('url');
-// This allows electron to spin up this server to localhost:7000 when the app starts up
-require('./httpserver');
+
 // Import Auto-Updater- Swell will update itself
 const { autoUpdater } = require('electron-updater');
 const log = require('electron-log');
 // TouchBarButtons are our nav buttons(ex: Select All, Deselect All, Open Selected, Close Selected, Clear All)
 const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
+// basic http cookie parser
+const cookie = require('cookie');
+// node-fetch for the fetch request
+const fetch2 = require('node-fetch');
+
+// GraphQL imports
+const ApolloClient = require('apollo-client').ApolloClient;
+const gql = require('graphql-tag');
+const { InMemoryCache } = require('apollo-cache-inmemory');
+const { createHttpLink } = require('apollo-link-http');
+const { ApolloLink } = require('apollo-link');
+const { onError } = require("apollo-link-error");
+
 // configure logging
 autoUpdater.logger = log;
 autoUpdater.logger.transports.file.level = 'info';
@@ -126,7 +138,7 @@ function createWindow() {
     webPreferences: {
       "nodeIntegration": true,
       "sandbox": false,
-      webSecurity: false,
+      webSecurity: true,
     },
     icon: `${__dirname}/src/assets/icons/64x64.png`
   })
@@ -263,3 +275,125 @@ app.on('activate', () => {
     createWindow();
   }
 });
+
+
+// ipcMain listener that 
+ipcMain.on('http1-fetch-message', (event, arg) => {
+  const { method, headers, body } = arg.options;
+
+  fetch2(headers.url, { method, headers, body })
+    .then((response) => {
+      const headers = response.headers.raw();
+      // check if the endpoint sends SSE
+        // add status code for regular http requests in the response header
+        
+        if (headers['content-type'][0].includes('stream')) {
+          // invoke another func that fetches to SSE and reads stream
+          // params: method, headers, body
+          event.sender.send('http1-fetch-reply', { headers, body: { error: 'This Is An SSE endpoint' } })
+         }
+        else {
+          headers[':status'] = response.status;
+  
+          const receivedCookie = headers['set-cookie'];
+          headers.cookies = receivedCookie;
+  
+          const contents = /json/.test(response.headers.get('content-type')) ? response.json() : response.text();
+          contents
+            .then(body => {
+              event.sender.send('http1-fetch-reply', { headers, body })
+            })
+            .catch(error => console.log('ERROR', error))
+        }
+    })
+    .catch(error => console.log(error))
+})
+
+ipcMain.on('open-gql', (event, args) => {
+  const reqResObj = args.reqResObj;
+
+  // populating headers object with response headers - except for Content-Type
+  const headers = {};
+  reqResObj.request.headers.filter(item => item.key !== 'Content-Type').forEach((item) => {
+    headers[item.key] = item.value;
+  });
+
+  // request cookies from reqResObj to request headers
+  let cookies;
+  if (reqResObj.request.cookies.length) {
+    cookies = reqResObj.request.cookies.reduce((acc,userCookie) => {
+      return acc + `${userCookie.key}=${userCookie.value}; `;
+    }, "")
+  }
+  headers.Cookie = cookies;
+
+  // afterware takes headers from context response object, copies to reqResObj
+  const afterLink = new ApolloLink((operation, forward) => {
+    return forward(operation).map(response => {
+      const context = operation.getContext();
+      const headers = context.response.headers.entries();
+      for (let headerItem of headers) {
+        const key = headerItem[0].split('-').map(item => item[0].toUpperCase() + item.slice(1)).join('-');
+        reqResObj.response.headers[key] = headerItem[1];
+
+        // if cookies were sent by server, parse first key-value pair, then cookie.parse the rest
+        if (headerItem[0] === 'set-cookie'){
+          const parsedCookies = [];
+          const cookieStrArr = headerItem[1].split(', ');
+          cookieStrArr.forEach(thisCookie => {
+            thisCookie = thisCookie.toLowerCase();
+            // index of first semicolon
+            const idx = thisCookie.search(/[;]/g);
+            // first key value pair
+            const keyValueArr = thisCookie.slice(0, idx).split('=');
+            // cookie contents after first key value pair
+            const parsedRemainingCookieProperties = cookie.parse(thisCookie.slice(idx + 1));
+
+            const parsedCookie = {...parsedRemainingCookieProperties, name: keyValueArr[0], value: keyValueArr[1]};
+  
+            parsedCookies.push(parsedCookie);
+          })
+          reqResObj.response.cookies = parsedCookies;
+        }
+      }
+
+      return response;
+    });
+  });
+
+  // creates http connection to host
+  const httpLink = createHttpLink({ uri: reqResObj.url, headers, credentials: 'include', fetch: fetch2, });
+
+  // additive composition of multiple links
+  const link = ApolloLink.from([
+    afterLink,
+    httpLink
+  ]);
+
+  const client = new ApolloClient({
+    link,
+    cache: new InMemoryCache(),
+  });
+
+  const body = gql`${reqResObj.request.body}`;
+  const variables = reqResObj.request.bodyVariables ? JSON.parse(reqResObj.request.bodyVariables) : {};
+
+  if (reqResObj.request.method === 'QUERY') {
+    client.query({ query: body, variables })
+
+      .then(data => {
+        event.sender.send('reply-gql', {reqResObj, data})})
+      .catch((err) => {
+        console.error(err);
+        event.sender.send('reply-gql', {error: err.networkError, reqResObj});
+      });
+    }
+    else if (reqResObj.request.method === 'MUTATION') {
+      client.mutate({ mutation: body, variables })
+      .then(data => event.sender.send('reply-gql', {reqResObj, data}))
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+});
+

package-lock.json

@@ -130,8 +130,10 @@
   "dependencies": {
     "apollo-cache-inmemory": "^1.6.2",
     "apollo-client": "^2.6.3",
+    "apollo-link": "^1.2.13",
+    "apollo-link-error": "^1.1.12",
     "apollo-link-http": "^1.5.15",
-    "apollo-link-ws": "^1.0.18",
+    "apollo-link-ws": "^1.0.19",
     "chart.js": "^2.7.3",
     "classnames": "^2.2.6",
     "date-fns": "^1.29.0",
@@ -144,6 +146,7 @@
     "graphql": "^14.4.2",
     "graphql-tag": "^2.10.1",
     "isomorphic-fetch": "^2.2.1",
+    "node-fetch": "^2.6.0",
     "node-sass": "^4.10.0",
     "nodemon": "^1.19.1",
     "path": "^0.12.7",
@@ -159,6 +162,7 @@
     "react-syntax-highlighter-virtualized-renderer": "^1.1.0",
     "redux": "^3.7.2",
     "rpmbuild": "0.0.22",
+    "set-cookie-parser": "^2.4.0",
     "status-indicator": "^1.0.9",
     "subscriptions-transport-ws": "^0.9.16",
     "uuid": "^3.3.2",
@@ -201,4 +205,4 @@
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.14"
   }
-}
+}

package.json

@@ -79,6 +79,36 @@
     }
   }
 }
+.grid-7 {
+	background: white;
+	border: 1px solid $bordergray;
+	border-bottom: 0;
+	display: grid;
+	grid-template-columns: 10% 12% 12% 6% 20% 20% 20%;
+	height: auto;
+	width: 100%;
+	div {
+		border-right: 1px solid $bordergray;
+		padding: 0 15px;
+		position: relative;
+    &:first-child {
+      max-height: 30px;
+    }
+    &:nth-child(-n+2) {
+      padding: 0;
+    }
+    &:nth-child(-n+3) {
+      padding: 0;
+    }
+    &:nth-child(4) {
+      max-height: 30px;
+      padding: 5px 11px;
+    }
+    &:last-child {
+      border-right: none;
+    }
+  }
+}
 .grid-9 {
 	background: white;
 	border: 1px solid $bordergray;

src/assets/style/grid.scss

@@ -18,6 +18,7 @@ export const SET_NEW_REQUEST_FIELDS = "SET_NEW_REQUEST_FIELDS";
 export const SET_NEW_REQUEST_HEADERS = "SET_NEW_REQUEST_HEADERS";
 export const SET_NEW_REQUEST_BODY = "SET_NEW_REQUEST_BODY";
 export const SET_NEW_REQUEST_COOKIES = "SET_NEW_REQUEST_COOKIES";
+export const SET_NEW_REQUEST_SSE = "SET_NEW_REQUEST_SSE";
 
 export const SET_CURRENT_TAB = "SET_CURRENT_TAB";
 

src/client/actions/actionTypes.js

@@ -76,6 +76,11 @@ export const setNewRequestCookies = (cookies) => ({
   payload : cookies
 });
 
+export const setNewRequestSSE = (SSEBool) => ({
+  type: types.SET_NEW_REQUEST_SSE,
+  payload : SSEBool
+});
+
 export const setCurrentTab = (tab) => ({
   type: types.SET_CURRENT_TAB,
   payload: tab,