From 4c768804b20ef789b77451aafef04d9b4076bfea Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Wed, 27 Apr 2016 23:22:50 -0700
Subject: [PATCH] Hooked up content type selection dropdown (#14)

---
 app/components/ContentTypeDropdown.js | 31 +++++++++++++++++++++++++++
 app/components/RequestBodyEditor.js   |  4 +---
 app/components/RequestPane.js         | 22 +++++++++----------
 app/components/ResponsePane.js        |  8 ++++++-
 app/components/base/Editor.js         | 31 +++++++++++----------------
 app/containers/App.js                 |  1 +
 app/css/layout/base.scss              |  8 +++++++
 app/lib/contentTypes.js               | 24 +++++++++++++++++++++
 8 files changed, 95 insertions(+), 34 deletions(-)
 create mode 100644 app/components/ContentTypeDropdown.js
 create mode 100644 app/lib/contentTypes.js

diff --git a/app/components/ContentTypeDropdown.js b/app/components/ContentTypeDropdown.js
new file mode 100644
index 0000000000..13f9dbabe9
--- /dev/null
+++ b/app/components/ContentTypeDropdown.js
@@ -0,0 +1,31 @@
+import React, {Component, PropTypes} from 'react'
+
+import Dropdown from '../components/base/Dropdown'
+import * as contentTypes from '../lib/contentTypes'
+
+class ContentTypeDropdown extends Component {
+  render () {
+    const {updateRequestContentType} = this.props;
+    
+    return (
+      <Dropdown>
+        <button><i className="fa fa-caret-down"></i></button>
+        <ul>
+          {contentTypes.CONTENT_TYPES.map(contentType => (
+            <li key={contentType}>
+              <button onClick={e => updateRequestContentType(contentType)}>
+                {contentTypes.getContentTypeName(contentType)}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </Dropdown>
+    )
+  }
+}
+
+ContentTypeDropdown.propTypes = {
+  updateRequestContentType: PropTypes.func.isRequired
+};
+
+export default ContentTypeDropdown;
diff --git a/app/components/RequestBodyEditor.js b/app/components/RequestBodyEditor.js
index a3e7165933..bf3826a1dd 100644
--- a/app/components/RequestBodyEditor.js
+++ b/app/components/RequestBodyEditor.js
@@ -3,7 +3,7 @@ import Editor from './base/Editor'
 
 class RequestBodyEditor extends Component {
   render () {
-    const {body, contentType, requestId, onChange, className} = this.props;
+    const {body, contentType, onChange, className} = this.props;
 
     return (
       <Editor
@@ -11,7 +11,6 @@ class RequestBodyEditor extends Component {
         className={className}
         debounceMillis={400}
         onChange={onChange}
-        uniquenessKey={requestId}
         options={{
           mode: contentType,
           placeholder: 'request body here...'
@@ -26,7 +25,6 @@ RequestBodyEditor.propTypes = {
   onChange: PropTypes.func.isRequired,
   
   // Other
-  requestId: PropTypes.string.isRequired,
   body: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired
 };
diff --git a/app/components/RequestPane.js b/app/components/RequestPane.js
index 444c70410b..3c14e59d9c 100644
--- a/app/components/RequestPane.js
+++ b/app/components/RequestPane.js
@@ -2,12 +2,14 @@ import React, {Component, PropTypes} from 'react'
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs'
 
 import KeyValueEditor from '../components/base/KeyValueEditor'
-import Dropdown from '../components/base/Dropdown'
 
+import ContentTypeDropdown from '../components/ContentTypeDropdown'
 import RequestBodyEditor from '../components/RequestBodyEditor'
 import RequestAuthEditor from '../components/RequestAuthEditor'
 import RequestUrlBar from '../components/RequestUrlBar'
 
+import {getContentTypeName} from '../lib/contentTypes'
+
 class RequestPane extends Component {
   render () {
     const {
@@ -18,7 +20,8 @@ class RequestPane extends Component {
       updateRequestBody,
       updateRequestParams,
       updateRequestAuthentication,
-      updateRequestHeaders
+      updateRequestHeaders,
+      updateRequestContentType
     } = this.props;
 
     if (!request) {
@@ -46,16 +49,10 @@ class RequestPane extends Component {
           <Tabs className="grid__cell grid--v section__body">
             <TabList className="grid grid--start">
               <Tab className="no-wrap grid grid--center">
-                <button>JSON</button>
-                <Dropdown>
-                  <button><i className="fa fa-caret-down"></i></button>
-                  <ul>
-                    {/*<li><button><i className="fa fa-picture-o"></i> File Upload</button></li>*/}
-                    <li><button><i className="fa fa-bars"></i> Form Data</button></li>
-                    <li><button><i className="fa fa-code"></i> XML</button></li>
-                    <li><button><i className="fa fa-file-text"></i> Plain Text</button></li>
-                  </ul>
-                </Dropdown>
+                <button>{getContentTypeName(request.contentType)}</button>
+                <ContentTypeDropdown
+                  updateRequestContentType={updateRequestContentType}
+                />
               </Tab>
               <Tab>
                 <button className="no-wrap">
@@ -124,6 +121,7 @@ RequestPane.propTypes = {
   updateRequestParams: PropTypes.func.isRequired,
   updateRequestAuthentication: PropTypes.func.isRequired,
   updateRequestHeaders: PropTypes.func.isRequired,
+  updateRequestContentType: PropTypes.func.isRequired,
 
   // Other
   request: PropTypes.object
diff --git a/app/components/ResponsePane.js b/app/components/ResponsePane.js
index 87cf42a31b..c1e96ce8f6 100644
--- a/app/components/ResponsePane.js
+++ b/app/components/ResponsePane.js
@@ -17,7 +17,13 @@ class ResponsePane extends Component {
       return (
         <section className="grid__cell section grid--v grid--start">
           <header className="header bg-light section__header"></header>
-          <div className="section__body grid__cell"></div>
+          <div className="section__body grid__cell grid grid--center">
+            <div className="faint text-center">
+              <h1>Nothing Yet...</h1>
+              <p>Click the <em>Send</em> button to trigger a request</p>
+              <br/>
+            </div>
+          </div>
         </section>
       )
     }
diff --git a/app/components/base/Editor.js b/app/components/base/Editor.js
index 35ecb5d495..901feb8a64 100644
--- a/app/components/base/Editor.js
+++ b/app/components/base/Editor.js
@@ -70,14 +70,16 @@ class Editor extends Component {
   }
 
   componentDidMount () {
+    const {options, value} = this.props;
+    
     var textareaNode = this.refs.textarea;
 
     this.codeMirror = CodeMirror.fromTextArea(textareaNode, BASE_CODEMIRROR_OPTIONS);
     this.codeMirror.on('change', this._codemirrorValueChanged.bind(this));
     this.codeMirror.on('paste', this._codemirrorValueChanged.bind(this));
-    this._currentCodemirrorValue = this.props.value || '';
+    this._currentCodemirrorValue = value || '';
     this._codemirrorSetValue(this._currentCodemirrorValue);
-    this._codemirrorSetOptions(this.props.options);
+    this._codemirrorSetOptions(options);
   }
 
   componentWillUnmount () {
@@ -92,22 +94,24 @@ class Editor extends Component {
     if (!this.codeMirror) {
       return;
     }
+    
+    const {options, value} = this.props;
+
+    // Reset any options that may have changed
+    this._codemirrorSetOptions(options);
 
     // Don't update if no value passed
-    if (this.props.value === undefined) {
+    if (value === undefined) {
       return;
     }
 
     // Don't update if same value passed again
-    if (this._currentCodemirrorValue === this.props.value) {
+    if (this._currentCodemirrorValue === value) {
       return;
     }
 
-    // Reset any options that may have changed
-    this._codemirrorSetOptions(this.props.options);
-
     // Set the new value
-    this._codemirrorSetValue(this.props.value);
+    this._codemirrorSetValue(value);
   }
 
   /**
@@ -184,14 +188,6 @@ class Editor extends Component {
 
     this.codeMirror.setValue(code);
   }
-  
-  shouldComponentUpdate (nextProps) {
-    if (!this.props.uniquenessKey) {
-      return true;
-    } else {
-      return this.props.uniquenessKey !== nextProps.uniquenessKey;
-    }
-  }
 
   render () {
     const options = this.props.options || {};
@@ -223,8 +219,7 @@ Editor.propTypes = {
   value: PropTypes.string,
   prettify: PropTypes.bool,
   className: PropTypes.any,
-  debounceMillis: PropTypes.number,
-  uniquenessKey: PropTypes.string
+  debounceMillis: PropTypes.number
 };
 
 export default Editor;
diff --git a/app/containers/App.js b/app/containers/App.js
index 143c82fea3..df48fec2d7 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -84,6 +84,7 @@ class App extends Component {
             updateRequestParams={params => db.requestUpdate(activeRequest, {params})}
             updateRequestAuthentication={authentication => db.requestUpdate(activeRequest, {authentication})}
             updateRequestHeaders={headers => db.requestUpdate(activeRequest, {headers})}
+            updateRequestContentType={contentType => db.requestUpdate(activeRequest, {contentType})}
           />
           <ResponsePane
             response={activeResponse}
diff --git a/app/css/layout/base.scss b/app/css/layout/base.scss
index 17ec83c86d..5b4ee65899 100644
--- a/app/css/layout/base.scss
+++ b/app/css/layout/base.scss
@@ -40,6 +40,10 @@ hr {
   margin: $padding-md 0;
 }
 
+em {
+  font-style: italic;
+}
+
 label {
   color: $hl;
   text-transform: uppercase;
@@ -66,6 +70,10 @@ label {
   height: 100%;
 }
 
+.faint {
+  color: $hl;
+}
+
 .wide {
   width: 100%;
 }
diff --git a/app/lib/contentTypes.js b/app/lib/contentTypes.js
new file mode 100644
index 0000000000..d63458ba6d
--- /dev/null
+++ b/app/lib/contentTypes.js
@@ -0,0 +1,24 @@
+export const CONTENT_TYPE_JSON = 'application/json';
+export const CONTENT_TYPE_XML = 'application/xml';
+export const CONTENT_TYPE_TEXT = 'text/plain';
+export const CONTENT_TYPE_FORM = 'application/x-www-form-urlencoded';
+
+const contentTypeMap = {
+  [CONTENT_TYPE_JSON]: 'JSON',
+  [CONTENT_TYPE_XML]: 'XML',
+  [CONTENT_TYPE_TEXT]: 'Plain Text',
+  [CONTENT_TYPE_FORM]: 'Form Data'
+};
+
+export const CONTENT_TYPES = Object.keys(contentTypeMap);
+
+/**
+ * Get the friendly name for a given content type
+ * 
+ * @param contentType
+ * @returns {*|string}
+ */
+export function getContentTypeName (contentType) {
+  // TODO: Make this more robust maybe...
+  return contentTypeMap[contentType] || 'Unknown';
+}