Merge pull request #34 from oslabs-beta/frontendOptimization

moved all composer state and dispatch maps to container
open-source-labs · Aug 3, 2019 · 8907860 · 8907860
2 parents 1678b5b + 7ff8dc3
commit 8907860
Show file tree

Hide file tree

Showing 16 changed files with 202 additions and 286 deletions.
diff --git a/__mocks__/styleMocks.js b/__mocks__/styleMocks.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/__tests__/composerTests.js b/__tests__/composerTests.js
@@ -13,13 +13,19 @@ import { JestEnvironment } from '@jest/environment';
 // import httpController from '../src/client/controllers/httpController.js'
 // import dbController from '../src/client/controllers/dbController.js'
 // import reqResController from '../src/client/controllers/reqResController.js'
+// import ComposerNewRequest from "../src/client/components/composer/NewRequest/ComposerNewRequest.jsx"; //doesn't like png
 import ProtocolSelect from "../src/client/components/composer/NewRequest/ProtocolSelect.jsx";
-// import FieldEntryForm from "../src/client/components/composer/NewRequest/FieldEntryForm.jsx";
-// import HeaderEntryForm from '../src/client/components/composer/NewRequest/HeaderEntryForm.jsx';
-// import CookieEntryForm from '../src/client/components/composer/NewRequest/CookieEntryForm.jsx';
+import FieldEntryForm from "../src/client/components/composer/NewRequest/FieldEntryForm.jsx";
+// import HeaderEntryForm from '../src/client/components/composer/NewRequest/HeaderEntryForm.jsx'; //doesn't like png
+import Header from '../src/client/components/composer/NewRequest/Header.jsx';
+// import CookieEntryForm from '../src/client/components/composer/NewRequest/CookieEntryForm.jsx'; //doesn't like png
 // import BodyEntryForm from "../src/client/components/composer/NewRequest/BodyEntryForm.jsx";
-// import GraphQLBodyEntryForm from "../src/client/components/composer/NewRequest/GraphQLBodyEntryForm.jsx";
-// import GraphQLVariableEntryForm from "../src/client/components/composer/NewRequest/GraphQLVariableEntryForm.jsx";
+import BodyTypeSelect from "../src/client/components/composer/NewRequest/BodyTypeSelect.jsx";
+import WWWForm from '../src/client/components/composer/NewRequest/WWWForm.jsx';
+import WWWField from '../src/client/components/composer/NewRequest/WWWField.jsx';
+import JSONTextArea from '../src/client/components/composer/NewRequest/JSONTextArea.jsx';
+// import GraphQLBodyEntryForm from "../src/client/components/composer/NewRequest/GraphQLBodyEntryForm.jsx"; //doesn't like png
+// import GraphQLVariableEntryForm from "../src/client/components/composer/NewRequest/GraphQLVariableEntryForm.jsx"; //doesn't like png
 
 // Newer Enzyme versions require an adapter to a particular version of React
 configure({ adapter: new Adapter() });

diff --git a/package.json b/package.json
@@ -97,6 +97,11 @@
       "private": false
     }
   },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./__mocks__/fileMock.js"
+    }
+  },
   "license": "MIT",
   "homepage": "http://www.getswell.io",
   "dependencies": {
@@ -168,4 +173,4 @@
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.14"
   }
-}
+}
diff --git a/src/assets/style/websocket.scss b/src/assets/style/websocket.scss
@@ -77,16 +77,23 @@
 //-------------------------------------------------------------------
 
 .websocket_message {
-	align-items: center;
 	border: 1px solid #ebeff2;
-	border-radius: 12px;
+	border-radius: 16px;
 	color: white;
 	display: flex;
-	flex-shrink: 0;
-	height: 25px;
-	margin-top: 3px;
-	overflow: hidden;
-	width: auto;
+  flex-shrink: 0;
+  align-items: flex-start ;
+  // height: 50px;
+  max-height: 100px;
+	min-height: 25px;
+  // height: auto;
+  margin-top: 3px;
+  // padding: 4px;
+	// overflow: hidden;
+  // width: auto;
+  max-width: 300px;
+  // scroll-padding: 10px;
+
 }
 .websocket_message-server {
 	align-self: flex-start;
@@ -97,36 +104,47 @@
 	background-color: rgb(0,137,208);
 }
 .websocket_message-data {
-	border-right: 1px solid #b6b6b6;
-	font-size: 14px;
-	height: 25px;
+  border-right: 1px solid #b6b6b6;
+  font-size: 14px;
+  line-height: 150%;
+  // height: 100%;
+  // width: 100%;
+  max-height: 94px;
+	min-height: 25px;
 	max-width: 300px;
-	// overflow: scroll;
-	// overflow-wrap: break-word;
-	padding: 0px 8px;
-	padding-top: 5px;
+  overflow: scroll;
+  // overflow-wrap: word-break;
+  word-break: break-all;
+  // white-space: pre-wrap;
+  white-space: pre-line;
+  padding: 6px 12px;
+  // margin-bottom: -6px;
+  scroll-padding: 10px;
+  // padding-top: 5px;
 }
 //-------------------------------------------------------------------
 //This is a fix for the ugly windows and linux scrollbars
 //-------------------------------------------------------------------
-.websocket_message-data::-webkit-scrollbar{
-	width:10px;
-	background-color:#cccccc;
-	}
-	.websocket_message-data::-webkit-scrollbar-thumb{
-	background-color:rgb(189, 189, 189);
-	border-radius:10px;
-	}
-	.websocket_message-data::-webkit-scrollbar-thumb:hover{
-	background-color:rgb(114, 111, 111);
-	}
-	.websocket_message-data::-webkit-scrollbar-thumb:active{
-	background-color:rgb(80, 77, 77);
-	border:1px solid #333333;
-	}
+// .websocket_message-data::-webkit-scrollbar{
+// 	width:10px;
+// 	background-color:#cccccc;
+// 	}
+// 	.websocket_message-data::-webkit-scrollbar-thumb{
+// 	background-color:rgb(189, 189, 189);
+// 	border-radius:10px;
+// 	}
+// 	.websocket_message-data::-webkit-scrollbar-thumb:hover{
+// 	background-color:rgb(114, 111, 111);
+// 	}
+// 	.websocket_message-data::-webkit-scrollbar-thumb:active{
+// 	background-color:rgb(80, 77, 77);
+// 	border:1px solid #333333;
+// 	}
 //-------------------------------------------------------------------
 
 .websocket_message-time {
+  align-self: center;
+  justify-self: center;
 	font-size: 14px;
 	padding: 0px 8px;
 	text-align: center;

diff --git a/src/client/components/composer/ComposerContainer.jsx b/src/client/components/composer/ComposerContainer.jsx
@@ -7,15 +7,27 @@ import ComposerWarning from './Warning/ComposerWarning.jsx';
 
 const mapStateToProps = store => ({
   reqResArray: store.business.reqResArray,
-  composerDisplay: store.ui.composerDisplay,
+  composerDisplay: store.ui.composerDisplay, 
+  newRequestFields: store.business.newRequestFields, 
+  newRequestHeaders: store.business.newRequestHeaders, 
+  newRequestBody: store.business.newRequestBody, 
+  newRequestCookies: store.business.newRequestCookies, 
+  currentTab: store.business.currentTab, 
 });
 
-const mapDispatchToProps = dispatch => ({});
+const mapDispatchToProps = dispatch => ({
+  reqResAdd: (reqRes) => {dispatch(actions.reqResAdd(reqRes))},
+  setComposerWarningMessage: (message) => {dispatch(actions.setComposerWarningMessage(message))},
+  setComposerDisplay: (composerDisplay) => {dispatch(actions.setComposerDisplay(composerDisplay))},
+  setNewRequestHeaders: (requestHeadersObj) => {dispatch(actions.setNewRequestHeaders(requestHeadersObj))},
+  setNewRequestFields: (requestFields) => {dispatch(actions.setNewRequestFields(requestFields))},
+  setNewRequestBody: (requestBodyObj) => {dispatch(actions.setNewRequestBody(requestBodyObj))},
+  setNewRequestCookies: (requestCookiesObj) => {dispatch(actions.setNewRequestCookies(requestCookiesObj))},
+});
 
 class ComposerContainer extends Component {
   constructor(props) {
     super(props);
-    // console.log(this.props);
     this.state = {};
   }
 
@@ -37,7 +49,24 @@ class ComposerContainer extends Component {
     let composerContents;
     switch (this.state.composerDisplay) { // conditional rendering of components based on the value of composerDisplay in redux store
       case 'Request': {
-        composerContents = <ComposerNewRequest />;
+        composerContents = <ComposerNewRequest
+          composerDisplay={this.props.composerDisplay}
+          newRequestFields={this.props.newRequestFields}
+          newRequestHeaders={this.props.newRequestHeaders}
+          newRequestCookies={this.props.newRequestCookies}
+          newRequestBody={this.props.newRequestBody}
+          currentTab={this.props.currentTab}
+
+          reqResAdd={this.props.reqResAdd}
+
+          setComposerWarningMessage={this.props.setComposerWarningMessage}
+          setComposerDisplay={this.props.setComposerDisplay}
+
+          setNewRequestFields={this.props.setNewRequestFields}
+          setNewRequestHeaders={this.props.setNewRequestHeaders}
+          setNewRequestCookies={this.props.setNewRequestCookies}
+          setNewRequestBody={this.props.setNewRequestBody}
+        />;
         break;
       }
       case 'Warning': {

diff --git a/src/client/components/composer/NewRequest/BodyEntryForm.jsx b/src/client/components/composer/NewRequest/BodyEntryForm.jsx
@@ -1,32 +1,13 @@
 import React, { Component } from 'react';
-import { connect } from "react-redux";
-import * as actions from '../../../actions/actions';
-import PropTypes from "prop-types";
 import WWWForm from './WWWForm.jsx';
 import BodyTypeSelect from './BodyTypeSelect.jsx';
 import JSONTextArea from './JSONTextArea.jsx';
 import dropDownArrow from '../../../../assets/icons/arrow_drop_down_white_192x192.png'
 
-const mapStateToProps = store => ({
-  newRequestBody: store.business.newRequestBody,
-  newRequestHeaders: store.business.newRequestHeaders,
-});
-
-const mapDispatchToProps = dispatch => ({
-  setNewRequestBody: (requestBodyObj) => {
-    dispatch(actions.setNewRequestBody(requestBodyObj));
-  },
-  setNewRequestHeaders: (requestHeadersObj) => {
-    dispatch(actions.setNewRequestHeaders(requestHeadersObj))
-  }
-});
-
 class BodyEntryForm extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      show: true,
-    };
+    this.state = {show: true};
     this.toggleShow = this.toggleShow.bind(this);
   }
 
@@ -131,7 +112,4 @@ class BodyEntryForm extends Component {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(BodyEntryForm);
+export default BodyEntryForm;