From 56c5015fc3d9ec6ec62fd1e70c43adbc8f12f1fb Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Mon, 21 Mar 2016 20:22:45 -0700 Subject: [PATCH] Move pane components back into container --- app/components/RequestPane.js | 70 ---------------------------- app/components/ResponsePane.js | 25 ---------- app/components/Sidebar.js | 12 ++--- app/components/UrlInput.js | 2 +- app/containers/App.js | 82 ++++++++++++++++++++++++--------- app/css/components/editor.scss | 5 -- app/css/components/sidebar.scss | 9 ---- app/css/constants/colors.scss | 2 +- app/css/layout/pane.scss | 8 ++-- app/reducers/requests.js | 2 +- 10 files changed, 74 insertions(+), 143 deletions(-) delete mode 100644 app/components/RequestPane.js delete mode 100644 app/components/ResponsePane.js diff --git a/app/components/RequestPane.js b/app/components/RequestPane.js deleted file mode 100644 index cd1fb16236..0000000000 --- a/app/components/RequestPane.js +++ /dev/null @@ -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 ( -
-
- -
-
- - - - - - - - - - - - - - - - - - - Params - Basic Auth - Headers - -
-
- ); - } -} - -RequestPane.propTypes = { - updateRequestUrl: PropTypes.func.isRequired, - updateRequestBody: PropTypes.func.isRequired, - updateRequestMethod: PropTypes.func.isRequired, - request: PropTypes.object.isRequired -}; - -export default RequestPane; diff --git a/app/components/ResponsePane.js b/app/components/ResponsePane.js deleted file mode 100644 index 1e0d733719..0000000000 --- a/app/components/ResponsePane.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, {PropTypes} from 'react' -import CodeEditor from '../components/CodeEditor' - -const ResponsePane = (props) => ( -
-
-
-
200 SUCCESS
-
GET https://google.com
-
-
-
- -
-
-); - -ResponsePane.propTypes = { - request: PropTypes.object.isRequired -}; - -export default ResponsePane; diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js index 36a482b237..25a9571525 100644 --- a/app/components/Sidebar.js +++ b/app/components/Sidebar.js @@ -12,16 +12,16 @@ const Sidebar = (props) => ( Insomnia -
+
  • diff --git a/app/components/UrlInput.js b/app/components/UrlInput.js index 9ad53eebae..b9165531d4 100644 --- a/app/components/UrlInput.js +++ b/app/components/UrlInput.js @@ -15,7 +15,7 @@ class UrlInput extends Component {
      {METHODS.map((method) => (
    • -
      • diff --git a/app/containers/App.js b/app/containers/App.js index 067ef23688..608dfad803 100644 --- a/app/containers/App.js +++ b/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
      ; + } + + 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 ( - +
      +
      +
      + +
      +
      + + + + + + + + + + + Params + Basic Auth + Headers + +
      +
      +
      +
      +
      +
      200 SUCCESS
      +
      GET https://google.com
      +
      +
      +
      + +
      +
      +
      ) } - - renderResponsePane () { - const {activeRequest} = this.props; - return ( - - ) - } - render () { const {actions, loading, activeRequest, allRequests} = this.props; + return (
      -
      - {activeRequest ? this.renderRequestPane() :
      } - {activeRequest ? this.renderResponsePane() :
      } -
      + {this.renderPageBody()}
      ) diff --git a/app/css/components/editor.scss b/app/css/components/editor.scss index 704b581247..ffd2c7df04 100644 --- a/app/css/components/editor.scss +++ b/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; } diff --git a/app/css/components/sidebar.scss b/app/css/components/sidebar.scss index f17e514f3e..1a22c8f810 100644 --- a/app/css/components/sidebar.scss +++ b/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; } } diff --git a/app/css/constants/colors.scss b/app/css/constants/colors.scss index 23b2d87034..3fba6dfd71 100644 --- a/app/css/constants/colors.scss +++ b/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; diff --git a/app/css/layout/pane.scss b/app/css/layout/pane.scss index 77fad99052..08ead7bec5 100644 --- a/app/css/layout/pane.scss +++ b/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); } } diff --git a/app/reducers/requests.js b/app/reducers/requests.js index 4e879672c3..31a3e5ebd6 100644 --- a/app/reducers/requests.js +++ b/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});