Move pane components back into container

app/components/RequestPane.js

@@ -1,70 +0,0 @@
-import React, {Component, PropTypes} from 'react'
-import CodeEditor from '../components/CodeEditor'
-import UrlInput from '../components/UrlInput'
-import {METHOD_GET} from '../constants/global'
-import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
-
-// Don't inject component styles (use our own)
-Tabs.setUseDefaultStyles(false);
-
-class RequestPane extends Component {
-  shouldComponentUpdate (nextProps, nextState) {
-    return nextProps.request !== this.props.request;
-  }
-
-  render () {
-    const {
-      request,
-      updateRequestBody,
-      updateRequestUrl,
-      updateRequestMethod
-    } = this.props;
-
-    return (
-      <section id="request" className="pane col grid-v">
-        <header className="pane__header bg-super-light">
-          <UrlInput onUrlChange={updateRequestUrl}
-                    onMethodChange={updateRequestMethod}
-                    method={request.method}
-                    urlValue={request.url}/>
-        </header>
-        <div className="pane__body grid-v">
-          <Tabs selectedIndex={0} className="grid-v">
-            <TabList className="pane__header grid">
-              <Tab>
-                <button className="btn">Body</button>
-              </Tab>
-              <Tab>
-                <button className="btn">Params</button>
-              </Tab>
-              <Tab>
-                <button className="btn">Auth</button>
-              </Tab>
-              <Tab>
-                <button className="btn">Headers</button>
-              </Tab>
-            </TabList>
-            <TabPanel className="grid-v">
-              <CodeEditor value={request.body}
-                          className="grid-v"
-                          onChange={updateRequestBody}
-                          options={{mode: request._mode}}/>
-            </TabPanel>
-            <TabPanel className="grid-v">Params</TabPanel>
-            <TabPanel className="grid-v">Basic Auth</TabPanel>
-            <TabPanel className="grid-v">Headers</TabPanel>
-          </Tabs>
-        </div>
-      </section>
-    );
-  }
-}
-
-RequestPane.propTypes = {
-  updateRequestUrl: PropTypes.func.isRequired,
-  updateRequestBody: PropTypes.func.isRequired,
-  updateRequestMethod: PropTypes.func.isRequired,
-  request: PropTypes.object.isRequired
-};
-
-export default RequestPane;

app/components/ResponsePane.js

@@ -1,25 +0,0 @@
-import React, {PropTypes} from 'react'
-import CodeEditor from '../components/CodeEditor'
-
-const ResponsePane = (props) => (
-  <section id="response" className="pane col grid-v">
-    <header className="pane__header text-center bg-light">
-      <div className="pane__header__content">
-        <div className="tag success"><strong>200</strong> SUCCESS</div>
-        <div className="tag"><strong>GET</strong> https://google.com</div>
-      </div>
-    </header>
-    <div className="pane__body grid-v">
-      <CodeEditor className="grid-v"
-                  value="{}"
-                  options={{mode: 'application/json', readOnly: true}}
-      />
-    </div>
-  </section>
-);
-
-ResponsePane.propTypes = {
-  request: PropTypes.object.isRequired
-};
-
-export default ResponsePane;

app/components/Sidebar.js

@@ -12,16 +12,16 @@ const Sidebar = (props) => (
             Insomnia
           </a>
           <ul className="bg-super-light">
-            <li><a href="#">hello</a></li>
-            <li><a href="#">hello</a></li>
-            <li><a href="#">hello</a></li>
-            <li><a href="#">hello</a></li>
-            <li><a href="#">hello</a></li>
+            <li><button>hello</button></li>
+            <li><button>hello</button></li>
+            <li><button>hello</button></li>
+            <li><button>hello</button></li>
+            <li><button>hello</button></li>
           </ul>
         </Dropdown>
       </h1>
     </header>
-    <div className="pane__body grid-v hide-scrollbars">
+    <div className="pane__body grid-v hide-scrollbars bg-dark">
       <ul className="sidebar-items">
         <li className="grid">
           <div className="form-control col">

app/components/UrlInput.js

@@ -15,7 +15,7 @@ class UrlInput extends Component {
           <ul className="bg-super-light">
             {METHODS.map((method) => (
               <li key={method}>
-                <button className="bg-super-light" onClick={onMethodChange.bind(null, method)}>
+                <button onClick={onMethodChange.bind(null, method)}>
                   {method}
                 </button>
               </li>

app/containers/App.js

@@ -1,36 +1,79 @@
 import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
+import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
+import CodeEditor from '../components/CodeEditor'
+import UrlInput from '../components/UrlInput'
 import Sidebar from '../components/Sidebar'
-import RequestPane from '../components/RequestPane'
-import ResponsePane from '../components/ResponsePane'
 
 import * as RequestActions from '../actions/requests'
 import * as GlobalActions from '../actions/global'
 
+// Don't inject component styles (use our own)
+Tabs.setUseDefaultStyles(false);
+
 class App extends Component {
-  renderRequestPane () {
+  renderPageBody() {
     const {actions, activeRequest} = this.props;
+
+    if (!activeRequest) {
+      return <div></div>;
+    }
+
+    const updateRequestBody = actions.updateRequestBody.bind(null, activeRequest.id);
+    const updateRequestUrl = actions.updateRequestUrl.bind(null, activeRequest.id);
+    const updateRequestMethod = actions.updateRequestMethod.bind(null, activeRequest.id);
+    
     return (
-      <RequestPane
-        updateRequestBody={actions.updateRequestBody.bind(null, activeRequest.id)}
-        updateRequestUrl={actions.updateRequestUrl.bind(null, activeRequest.id)}
-        updateRequestMethod={actions.updateRequestMethod.bind(null, activeRequest.id)}
-        request={activeRequest}
-      />
+      <div className="grid grid-collapse">
+        <section id="request" className="pane col grid-v">
+          <header className="pane__header bg-super-light">
+            <UrlInput onUrlChange={updateRequestUrl}
+                      onMethodChange={updateRequestMethod}
+                      method={activeRequest.method}
+                      urlValue={activeRequest.url}/>
+          </header>
+          <div className="pane__body grid-v">
+            <Tabs selectedIndex={0} className="grid-v">
+              <TabList className="pane__header grid">
+                <Tab><button className="btn">Body</button></Tab>
+                <Tab><button className="btn">Params</button></Tab>
+                <Tab><button className="btn">Auth</button></Tab>
+                <Tab><button className="btn">Headers</button></Tab>
+              </TabList>
+              <TabPanel className="grid-v">
+                <CodeEditor value={activeRequest.body}
+                            className="grid-v"
+                            onChange={updateRequestBody}
+                            options={{mode: activeRequest._mode}}/>
+              </TabPanel>
+              <TabPanel className="grid-v">Params</TabPanel>
+              <TabPanel className="grid-v">Basic Auth</TabPanel>
+              <TabPanel className="grid-v">Headers</TabPanel>
+            </Tabs>
+          </div>
+        </section>
+        <section id="response" className="pane col grid-v">
+          <header className="pane__header text-center bg-light">
+            <div className="pane__header__content">
+              <div className="tag success"><strong>200</strong> SUCCESS</div>
+              <div className="tag"><strong>GET</strong> https://google.com</div>
+            </div>
+          </header>
+          <div className="pane__body grid-v">
+            <CodeEditor
+              className="grid-v"
+              value="{}"
+              options={{mode: 'application/json', readOnly: true}}/>
+          </div>
+        </section>
+      </div>
     )
   }
-
-  renderResponsePane () {
-    const {activeRequest} = this.props;
-    return (
-      <ResponsePane request={activeRequest}/>
-    )
-  }
-
   render () {
     const {actions, loading, activeRequest, allRequests} = this.props;
+
     return (
       <div className="grid bg-dark">
         <Sidebar
@@ -40,10 +83,7 @@ class App extends Component {
           activeRequest={activeRequest}
           requests={allRequests}/>
         <div className="col">
-          <div className="grid grid-collapse">
-            {activeRequest ? this.renderRequestPane() : <div></div>}
-            {activeRequest ? this.renderResponsePane() : <div></div>}
-          </div>
+          {this.renderPageBody()}
         </div>
       </div>
     )

app/css/components/editor.scss

@@ -20,11 +20,6 @@
     background-color: $bg-dark !important;
   }
 
-  .CodeMirror-overlayscroll-horizontal div,
-  .CodeMirror-overlayscroll-vertical div {
-    background: lighten($bg-dark, 10%);
-  }
-
   .CodeMirror-linenumber, .CodeMirror-guttermarker-subtle {
     color: #555555 !important;
   }

app/css/components/sidebar.scss

@@ -20,19 +20,10 @@
       color: darken($font-dark-bg, 40%);
       padding: $sidebar-item-padding;
       border-left: 4px solid transparent;
-
-      &:hover {
-        background: lighten($bg-dark, 2%);
-      }
-
-      &:active {
-        background: lighten($bg-dark, 4%);
-      }
     }
   }
 
   .sidebar-items li.sidebar-item.active > a {
     border-left-color: $bg-primary;
-    color: $font-dark-bg;
   }
 }

app/css/constants/colors.scss

@@ -1,6 +1,6 @@
 /* Background Colors */
 $bg-primary: #7D70CC;
-$bg-light: #eaeaea;
+$bg-light: #efefef;
 $bg-super-light: #ffffff;
 $bg-dark: #272824;
 

app/css/layout/pane.scss

@@ -3,8 +3,8 @@
 
 .pane {
   .pane__header {
-    border-right: 1px solid transparent;
-    border-left: 1px solid transparent;
+    border-right: 2px solid transparent;
+    border-left: 2px solid transparent;
     height: $header-height;
 
     .pane__header__content {
@@ -17,7 +17,7 @@
 
   .pane__body {
     height: 100%;
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    border-left: 2px solid rgba(0, 0, 0, 0.1);
+    border-right: 2px solid rgba(0, 0, 0, 0.1);
   }
 }

app/reducers/requests.js

@@ -37,8 +37,8 @@ export default function (state = initialState, action) {
   switch (action.type) {
     case types.REQUEST_ADD:
       all = requestsReducer(state.all, action);
-      active = state.active || action.request.id;
       return Object.assign({}, state, {all, active});
+      active = action.request.id;
     case types.REQUEST_UPDATE:
       all = requestsReducer(state.all, action);
       return Object.assign({}, state, {all});