Merge pull request #277 from oslabs-beta/master

Swell v0.5.0 update from Beta

Author: texpatnyc

.babelrc

@@ -6,9 +6,12 @@
   },
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
   "plugins": [
-        ["@babel/transform-runtime"]
-    ],
+    ["@babel/transform-runtime"],
+    ["@babel/proposal-class-properties"],
+    ["@babel/proposal-object-rest-spread"]
+  ]
 }

.eslintrc.js

@@ -43,3 +43,102 @@
 // 		}]
 // 	}
 // };
+
+module.exports = {
+  env: {
+    es6: true,
+    jest: true,
+    node: true,
+  },
+  extends: [
+    "airbnb",
+    "prettier",
+    "prettier/@typescript-eslint",
+    "prettier/react",
+    // "plugin:@typescript-eslint/eslint-recommended",
+    // "plugin:@typescript-eslint/recommended",
+  ],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+  },
+  parser: "babel-eslint",
+  // parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      jsx: true,
+      classes: true,
+    },
+  },
+  plugins: [
+    // "@typescript-eslint",
+    "react",
+    "jsx-a11y",
+    "import",
+    "jest",
+    "react-hooks",
+  ],
+  rules: {
+    "arrow-body-style": 0,
+    camelcase: 0,
+    "class-methods-use-this": 0,
+    "consistent-return": 0,
+    "comma-dangle": 0,
+    "dot-notation": 0,
+    "func-names": 0,
+    "guard-for-in": 0,
+    "import/extensions": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/no-unresolved": 0,
+    "import/prefer-default-export": 0,
+    "max-len": 0,
+    "no-alert": 0,
+    "no-console": 0,
+    "no-param-reassign": 0,
+    "no-plusplus": 0,
+    "no-restricted-globals": 1,
+    "no-restricted-syntax": 0,
+    "no-shadow": 0,
+    "no-undef": 0,
+    "no-unused-vars": 0,
+    "no-use-before-define": 0,
+    "no-useless-constructor": 0,
+    "no-underscore-dangle": 0,
+    "no-unused-expressions": 0,
+    "no-return-assign": 0,
+    quotes: 0,
+    "prefer-const": 1,
+    "prefer-destructuring": 0,
+    "prefer-template": 0,
+    "react/button-has-type": 0,
+    "react/destructuring-assignment": 0,
+    "react/forbid-prop-types": 0,
+    "react/jsx-filename-extension": 0,
+    "react/jsx-no-duplicate-props": 0,
+    "react/no-access-state-in-setstate": 0,
+    "react/no-array-index-key": 0,
+    "react/no-did-update-set-state": 0,
+    "react/no-unused-state": 0,
+    "react/prefer-stateless-function": 0,
+    "react/sort-comp": [
+      2,
+      {
+        order: ["lifecycle", "everything-else", "rendering"],
+      },
+    ],
+    "react/prop-types": 0,
+    "spaced-comment": 0,
+    strict: 0,
+  },
+  // setting: {
+  //   "import/parsers": {
+  //     "@typescript-eslint/parser": [".ts", ".tsx"],
+  //   },
+  //   "import/resolver": {
+  //     typescript: {
+  //       alwaysTryTypes: true,
+  //     },
+  //   },
+  // },
+};

.gitignore

@@ -59,3 +59,6 @@ ehthumbs.db
 # proto files #
 #####################
 protos/
+
+# testing #
+test/snapshot.png

SSEController.js

@@ -0,0 +1,55 @@
+const http = require('http');
+// native browser api that we are bringing in to work in a node environmnet
+const EventSource = require('eventsource');
+
+const SSEController = {};
+
+// keep reference to what will be our EventSource that listens for SSE's
+let sse; 
+
+SSEController.createStream = (reqResObj, options, event) => {
+  // got options from httpController
+  const { headers } = options;
+  // because EventSource cannot access headers, we are making a regular get request to SSE server to get its headers, and then passing those headers into function where we will be connecting our EventSource, there will a time delay between the time the user opens the request and the server sends back its first response. We keep reference to the time the first request was made to account for that time difference later on. 
+  const startTime = Date.now(); 
+
+  const req = http.get(headers.url, {
+    headers,
+    agent: false,
+  });
+  req.once('response', (res) => {
+      // update info in reqResObj to reflect fact that connection was succesful
+      reqResObj.response.headers = {...res.headers};
+      reqResObj.connection = 'open'; 
+      reqResObj.connectionType = 'SSE';
+      // this is for purpose of logic in graph.jsx, which needs the entire req/res obj to have a timeReceived
+      reqResObj.timeReceived = Date.now();
+      // invoke function that will create an EventSource
+      SSEController.readStream(reqResObj, event, Date.now() - startTime);
+      req.destroy(); 
+  });
+};
+
+SSEController.readStream = (reqResObj, event, timeDiff) => {
+  // EventSource listens for SSE's and process specially formatted data from them, as well as adding other useful information
+  sse = new EventSource(reqResObj.url);
+  // event listeners 
+  sse.onopen = () => console.log(`SSE at ${reqResObj.url} opened!`);
+  // this is where incoming messages are processed
+  sse.onmessage = (message) => {
+    // message is not a javascript object, so we spread its contents into one
+    const newMessage = { ...message };
+    // this is where where account for any time lost between the first AJAX request and the creation of the EventSource
+    newMessage.timeReceived = Date.now() - timeDiff; 
+    // add processed message to events array on reqResObj
+    reqResObj.response.events.push(newMessage);
+    // ...and send back to renderer process to be added to the store
+    return event.sender.send('reqResUpdate', reqResObj);
+  }; 
+  sse.onerror = (err) => {
+    console.log('there was an error in SSEController.readStream', err);
+    sse.close();
+  };
+};
+
+module.exports = SSEController; 

__mocks__/electronMock.js

@@ -1,3 +1,3 @@
-export const ipcRenderer = {  
-    on: jest.fn()
-  };
+export const ipcRenderer = {
+  on: jest.fn(),
+};

__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+// see jest.config
+module.exports = "test-file-stub";

__mocks__/styleMocks.js

@@ -1 +1,3 @@
-module.exports = 'test-file-stub';
+// see jest.config
+
+module.exports = {};