A bunch more cleanup refactoring

app/models/settings.js

@@ -6,7 +6,7 @@ export const prefix = 'set';
 
 export function init () {
   return {
-    showPasswords: true,
+    showPasswords: false,
     useBulkHeaderEditor: false,
     followRedirects: true,
     editorFontSize: 12,

app/ui/components/CookieInput.js

@@ -3,12 +3,7 @@ import {Cookie} from 'tough-cookie';
 
 
 class CookieInput extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      isValid: true
-    };
-  }
+  state = {isValid: true};
 
   _handleChange () {
     const isValid = this._isValid();

app/ui/components/RenderedQueryString.js

@@ -1,16 +1,11 @@
-import React, {PropTypes, Component} from 'react';
+import React, {PropTypes, PureComponent} from 'react';
 import {getRenderedRequest} from '../../common/render';
 import * as querystring from '../../common/querystring';
 import * as util from '../../common/misc';
 
 
-class RenderedQueryString extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      string: ''
-    }
-  }
+class RenderedQueryString extends PureComponent {
+  state = {string: ''};
 
   _update (props, delay = false) {
     clearTimeout(this._triggerTimeout);

app/ui/components/RequestPane.js

@@ -15,21 +15,37 @@ class RequestPane extends PureComponent {
   _handleHidePasswords = () => this.props.updateSettingsShowPasswords(false);
   _handleShowPasswords = () => this.props.updateSettingsShowPasswords(true);
 
-  _updateSettingsUseBulkHeaderEditor = () => {
+  _handleUpdateSettingsUseBulkHeaderEditor = () => {
     const {useBulkHeaderEditor, updateSettingsUseBulkHeaderEditor} = this.props;
     updateSettingsUseBulkHeaderEditor(!useBulkHeaderEditor);
     trackEvent('Headers', 'Toggle Bulk', !useBulkHeaderEditor ? 'On' : 'Off');
   };
 
+  _handleImportFile = () => {
+    this.props.handleImportFile();
+    trackEvent('Request Pane', 'CTA', 'Import');
+  };
+
+  _handleCreateRequest = () => {
+    this.props.handleCreateRequest(this.props.request);
+    trackEvent('Request Pane', 'CTA', 'New Request');
+  };
+
+  _trackQueryToggle = pair => trackEvent('Query', 'Toggle', pair.disabled ? 'Disable' : 'Enable');
+  _trackQueryCreate = () => trackEvent('Query', 'Create');
+  _trackQueryDelete = () => trackEvent('Query', 'Delete');
+  _trackTabBody = () => trackEvent('Request Pane', 'View', 'Body');
+  _trackTabHeaders = () => trackEvent('Request Pane', 'View', 'Headers');
+  _trackTabAuthentication = () => trackEvent('Request Pane', 'View', 'Authentication');
+  _trackTabQuery = () => trackEvent('Request Pane', 'View', 'Query');
+
   render () {
     const {
       request,
       environmentId,
-      handleImportFile,
       showPasswords,
       editorFontSize,
       editorLineWrapping,
-      handleCreateRequest,
       handleSend,
       useBulkHeaderEditor,
       updateRequestUrl,
@@ -72,18 +88,11 @@ class RequestPane extends PureComponent {
               </table>
 
               <div className="text-center pane__body--placeholder__cta">
-                <button className="btn inline-block btn--clicky"
-                        onClick={() => {
-                          handleImportFile();
-                          trackEvent('Request Pane', 'CTA', 'Import');
-                        }}>
+                <button className="btn inline-block btn--clicky" onClick={this._handleImportFile}>
                   Import from File
                 </button>
                 <button className="btn inline-block btn--clicky"
-                        onClick={() => {
-                          handleCreateRequest(this.props.request);
-                          trackEvent('Request Pane', 'CTA', 'New Request');
-                        }}>
+                        onClick={this._handleCreateRequest}>
                   New Request
                 </button>
               </div>
@@ -97,6 +106,7 @@ class RequestPane extends PureComponent {
     if (request.body && request.body.params) {
       numBodyParams = request.body.params.filter(p => !p.disabled).length;
     }
+
     const numParameters = request.parameters.filter(p => !p.disabled).length;
     const numHeaders = request.headers.filter(h => !h.disabled).length;
     const hasAuth = !request.authentication.disabled && request.authentication.username;
@@ -115,7 +125,7 @@ class RequestPane extends PureComponent {
         </header>
         <Tabs className="pane__body">
           <TabList>
-            <Tab onClick={() => trackEvent('Request Pane', 'View', 'Body')}>
+            <Tab onClick={this._trackTabBody}>
               <button>
                 {getContentTypeName(request.body.mimeType)}
                 {" "}
@@ -125,17 +135,17 @@ class RequestPane extends PureComponent {
                 <i className="fa fa-caret-down"></i>
               </ContentTypeDropdown>
             </Tab>
-            <Tab onClick={() => trackEvent('Request Pane', 'View', 'Auth')}>
+            <Tab onClick={this._trackTabAuthentication}>
               <button>
                 Auth {hasAuth ? <i className="fa fa-lock txt-sm"></i> : null}
               </button>
             </Tab>
-            <Tab onClick={() => trackEvent('Request Pane', 'View', 'Query')}>
+            <Tab onClick={this._trackTabQuery}>
               <button>
                 Query {numParameters ? <span className="txt-sm">({numParameters})</span> : null}
               </button>
             </Tab>
-            <Tab onClick={() => trackEvent('Request Pane', 'View', 'Headers')}>
+            <Tab onClick={this._trackTabHeaders}>
               <button>
                 Headers {numHeaders ? <span className="txt-sm">({numHeaders})</span> : null}
               </button>
@@ -189,9 +199,9 @@ class RequestPane extends PureComponent {
                 key={request._id}
                 namePlaceholder="name"
                 valuePlaceholder="value"
-                onToggleDisable={pair => trackEvent('Query', 'Toggle', pair.disabled ? 'Disable' : 'Enable')}
-                onCreate={() => trackEvent('Query', 'Create')}
-                onDelete={() => trackEvent('Query', 'Delete')}
+                onToggleDisable={this._trackQueryToggle}
+                onCreate={this._trackQueryCreate}
+                onDelete={this._trackQueryDelete}
                 pairs={request.parameters}
                 onChange={updateRequestParameters}
               />
@@ -207,7 +217,7 @@ class RequestPane extends PureComponent {
 
             <div className="pad-right text-right">
               <button className="margin-top-sm btn btn--clicky"
-                      onClick={this._updateSettingsUseBulkHeaderEditor}>
+                      onClick={this._handleUpdateSettingsUseBulkHeaderEditor}>
                 {useBulkHeaderEditor ? 'Regular Edit' : 'Bulk Edit'}
               </button>
             </div>

app/ui/components/ResponsePane.js

@@ -17,13 +17,7 @@ import {cancelCurrentRequest} from '../../common/network';
 import {trackEvent} from '../../analytics';
 
 class ResponsePane extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      response: null
-    }
-  }
+  state = {response: null};
 
   async _getResponse (request) {
     if (!request) {

app/ui/components/Toast.js

@@ -7,14 +7,7 @@ import {trackEvent} from '../../analytics/index';
 const LOCALSTORAGE_KEY = 'insomnia::notifications::seen';
 
 class Toast extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      notification: null,
-      visible: false,
-    };
-  }
+  state = {notification: null, visible: false};
 
   _loadSeen () {
     try {

app/ui/components/base/CopyButton.js

@@ -2,12 +2,8 @@ import React, {Component, PropTypes} from 'react';
 const {clipboard} = require('electron');
 
 class CopyButton extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      showConfirmation: false
-    }
-  }
+  state = {showConfirmation: false};
+
   _handleClick (e) {
     e.preventDefault();
 
@@ -20,7 +16,7 @@ class CopyButton extends Component {
     }, 2000);
   }
 
-  componentWillUnmount() {
+  componentWillUnmount () {
     clearTimeout(this._triggerTimeout);
   }
 

app/ui/components/base/Editable.js

@@ -2,12 +2,7 @@ import React, {Component, PropTypes} from 'react';
 import * as misc from '../../../common/misc';
 
 class Editable extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      editing: false
-    }
-  }
+  state = {editing: false};
 
   _handleEditStart () {
     this.setState({editing: true});

app/ui/components/base/Modal.js

@@ -7,13 +7,7 @@ import {isMac} from '../../../common/constants';
 let globalZIndex = 1000;
 
 class Modal extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      open: false,
-      zIndex: globalZIndex,
-    };
-  }
+  state = {open: false, zIndex: globalZIndex};
 
   _handleClick (e) {
     // Did we click a close button. Let's check a few parent nodes up as well

app/ui/components/base/PromptButton.js

@@ -5,10 +5,7 @@ const STATE_ASK = 'ask';
 const STATE_DONE = 'done';
 
 class PromptButton extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {state: STATE_DEFAULT}
-  }
+  state = {state: STATE_DEFAULT};
 
   _confirm (e) {
     // Clear existing timeouts

app/ui/components/base/dropdown/Dropdown.js

@@ -6,13 +6,7 @@ import DropdownItem from './DropdownItem';
 import DropdownDivider from './DropdownDivider';
 
 class Dropdown extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      open: false,
-      dropUp: false
-    };
-  }
+  state = {open: false, dropUp: false};
 
   _handleClick () {
     this.toggle();

app/ui/components/dropdowns/SyncDropdown.js

@@ -11,15 +11,12 @@ import LoginModal from '../modals/LoginModal';
 import PromptButton from '../base/PromptButton';
 
 class SyncDropdown extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      loggedIn: null,
-      syncData: null,
-      loading: false,
-      hide: false,
-    }
-  }
+  state = {
+    loggedIn: null,
+    syncData: null,
+    loading: false,
+    hide: false,
+  };
 
   _handleHideMenu () {
     this.setState({hide: true});

app/ui/components/editors/AuthEditor.js

@@ -1,33 +1,49 @@
-import React, {PropTypes} from 'react';
+import React, {PropTypes, PureComponent} from 'react';
 import KeyValueEditor from '../base/KeyValueEditor';
 import {trackEvent} from '../../../analytics/index';
 
-const AuthEditor = ({authentication, showPasswords, onChange, ...other}) => {
-  const pairs = [{
-    name: authentication.username || '',
-    value: authentication.password || '',
-    disabled: authentication.disabled || false,
-  }];
+class AuthEditor extends PureComponent {
+  _handleOnCreate = () => trackEvent('Auth Editor', 'Create');
+  _handleOnDelete = () => trackEvent('Auth Editor', 'Delete');
 
-  return (
-    <KeyValueEditor
-      pairs={pairs}
-      maxPairs={1}
-      namePlaceholder="Username"
-      valuePlaceholder="********"
-      valueInputType={showPasswords ? 'text' : 'password'}
-      onToggleDisable={pair => trackEvent('Auth Editor', 'Toggle', pair.disabled ? 'Disable' : 'Enable')}
-      onCreate={() => trackEvent('Auth Editor', 'Create')}
-      onDelete={() => trackEvent('Auth Editor', 'Delete')}
-      onChange={pairs => onChange({
-        username: pairs.length ? pairs[0].name : '',
-        password: pairs.length ? pairs[0].value : '',
-        disabled: pairs.length ? pairs[0].disabled : false,
-      })}
-      {...other}
-    />
-  );
-};
+  _handleToggleDisable = pair => {
+    const label = pair.disabled ? 'Disable' : 'Enable';
+    trackEvent('Auth Editor', 'Toggle', label);
+  };
+
+  _handleChange = pairs => {
+    const pair = {
+      username: pairs.length ? pairs[0].name : '',
+      password: pairs.length ? pairs[0].value : '',
+      disabled: pairs.length ? pairs[0].disabled : false,
+    };
+
+    this.props.onChange(pair);
+  };
+
+  render () {
+    const {authentication, showPasswords} = this.props;
+    const pairs = [{
+      name: authentication.username || '',
+      value: authentication.password || '',
+      disabled: authentication.disabled || false,
+    }];
+
+    return (
+      <KeyValueEditor
+        pairs={pairs}
+        maxPairs={1}
+        namePlaceholder="Username"
+        valuePlaceholder="********"
+        valueInputType={showPasswords ? 'text' : 'password'}
+        onToggleDisable={this._handleToggleDisable}
+        onCreate={this._handleOnCreate}
+        onDelete={this._handleOnDelete}
+        onChange={this._handleChange}
+      />
+    );
+  }
+}
 
 AuthEditor.propTypes = {
   handleUpdateSettingsShowPasswords: PropTypes.func.isRequired,

app/ui/components/editors/body/BodyEditor.js

@@ -1,4 +1,4 @@
-import React, {PropTypes, Component} from 'react';
+import React, {PropTypes, PureComponent} from 'react';
 import RawEditor from './RawEditor';
 import UrlEncodedEditor from './UrlEncodedEditor';
 import FormEditor from './FormEditor';
@@ -6,7 +6,7 @@ import FileEditor from './FileEditor';
 import {getContentTypeFromHeaders, CONTENT_TYPE_FORM_URLENCODED, CONTENT_TYPE_FORM_DATA, CONTENT_TYPE_FILE} from '../../../../common/constants';
 import {newBodyRaw, newBodyFormUrlEncoded, newBodyForm, newBodyFile} from '../../../../models/request';
 
-class BodyEditor extends Component {
+class BodyEditor extends PureComponent {
   _handleRawChange = (rawValue) => {
     const {onChange, request} = this.props;
 

app/ui/components/modals/AlertModal.js

@@ -5,10 +5,7 @@ import ModalHeader from '../base/ModalHeader';
 import ModalFooter from '../base/ModalFooter';
 
 class AlertModal extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {};
-  }
+  state = {title: '', message: ''};
 
   show (options = {}) {
     this.modal.show();

app/ui/components/modals/ChangelogModal.js

@@ -7,10 +7,7 @@ import ModalFooter from '../base/ModalFooter';
 import {getAppVersion, CHANGELOG_URL, CHANGELOG_PAGE} from '../../../common/constants';
 
 class ChangelogModal extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {changelog: null};
-  }
+  state = {changelog: null};
 
   show () {
     this.modal.show();

app/ui/components/modals/CookiesModal.js

@@ -8,14 +8,11 @@ import * as models from '../../../models';
 import {trackEvent} from '../../../analytics/index';
 
 class CookiesModal extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      cookieJar: null,
-      workspace: null,
-      filter: ''
-    };
-  }
+  state = {
+    cookieJar: null,
+    workspace: null,
+    filter: ''
+  };
 
   async _saveChanges () {
     const {cookieJar} = this.state;

app/ui/components/modals/EnvironmentEditModal.js

@@ -8,14 +8,10 @@ import ModalFooter from '../base/ModalFooter';
 
 
 class EnvironmentEditModal extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      requestGroup: null,
-      isValid: true
-    }
-  }
+  state = {
+    requestGroup: null,
+    isValid: true
+  };
 
   _saveChanges () {
     if (!this._envEditor.isValid()) {

app/ui/components/modals/GenerateCodeModal.js

@@ -45,8 +45,6 @@ class GenerateCodeModal extends Component {
     } catch (e) {
     }
 
-    console.log(client, target);
-
     this.state = {
       cmd: '',
       request: null,

app/ui/components/modals/ImportSummaryModal.js

@@ -5,13 +5,9 @@ import ModalHeader from '../base/ModalHeader';
 import ModalFooter from '../base/ModalFooter';
 
 class ImportSummaryModal extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      summary: {}
-    };
-  }
+  state = {
+    summary: {}
+  };
 
   show ({summary}) {
     this.modal.show();

app/ui/components/modals/LoginModal.js

@@ -11,16 +11,13 @@ import * as sync from '../../../sync';
 import {trackEvent} from '../../../analytics';
 
 class LoginModal extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      step: 1,
-      loading: false,
-      error: '',
-      title: '',
-      message: '',
-    }
-  }
+  state = {
+    step: 1,
+    loading: false,
+    error: '',
+    title: '',
+    message: '',
+  };
 
   async _handleLogin (e) {
     e.preventDefault();

app/ui/components/modals/PaymentModal.js

@@ -28,17 +28,14 @@ for (let i = 0; i < 20; i++) {
 }
 
 class PaymentModal extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      title: '',
-      message: '',
-      error: '',
-      loading: false,
-      cardType: '',
-      selectedPlan: 'plus-monthly-1'
-    }
-  }
+  state = {
+    title: '',
+    message: '',
+    error: '',
+    loading: false,
+    cardType: '',
+    selectedPlan: 'plus-monthly-1'
+  };
 
   show (options = {}) {
     const {message, title} = options;

app/ui/components/modals/PromptModal.js

@@ -5,17 +5,13 @@ import ModalHeader from '../base/ModalHeader';
 import ModalFooter from '../base/ModalFooter';
 
 class PromptModal extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      headerName: 'Not Set',
-      defaultValue: '',
-      submitName: 'Not Set',
-      selectText: false,
-      hint: null
-    };
-  }
+  state = {
+    headerName: 'Not Set',
+    defaultValue: '',
+    submitName: 'Not Set',
+    selectText: false,
+    hint: null
+  };
 
   _onSubmit (e) {
     e.preventDefault();

app/ui/components/modals/SignupModal.js

@@ -16,14 +16,11 @@ const STEP_CONFIRM_PASSWORD = 'confirm';
 const STEP_LOGIN_INFO = 'done';
 
 class SignupModal extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      step: STEP_BASIC_INFO,
-      error: '',
-      loading: false
-    }
-  }
+  state = {
+    step: STEP_BASIC_INFO,
+    error: '',
+    loading: false
+  };
 
   async _handleSignup (e) {
     e.preventDefault();

app/ui/components/modals/SyncLogsModal.js

@@ -8,12 +8,9 @@ import ModalFooter from '../base/ModalFooter';
 import * as sync from '../../../sync';
 
 class SyncLogsModal extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      logs: []
-    }
-  }
+  state = {
+    logs: []
+  };
 
   show () {
     clearInterval(this._interval);

app/ui/components/modals/WorkspaceEnvironmentsEditModal.js

@@ -14,18 +14,14 @@ import {trackEvent} from '../../../analytics/index';
 
 
 class WorkspaceEnvironmentsEditModal extends Component {
-  constructor (props) {
-    super(props);
-
-    this.state = {
-      workspace: null,
-      isValid: true,
-      subEnvironments: [],
-      rootEnvironment: null,
-      activeEnvironmentId: null,
-      forceRefreshKey: 0,
-    }
-  }
+  state = {
+    workspace: null,
+    isValid: true,
+    subEnvironments: [],
+    rootEnvironment: null,
+    activeEnvironmentId: null,
+    forceRefreshKey: 0,
+  };
 
   show (workspace) {
     this.modal.show();

app/ui/components/sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import React, {Component, PropTypes} from 'react';
+import React, {PureComponent, PropTypes} from 'react';
 import classnames from 'classnames';
 import EnvironmentsDropdown from '../dropdowns/EnvironmentsDropdown';
 import SidebarFilter from './SidebarFilter';
@@ -8,9 +8,8 @@ import WorkspaceDropdown from '../dropdowns/WorkspaceDropdown';
 import {SIDEBAR_SKINNY_REMS, COLLAPSE_SIDEBAR_REMS} from '../../../common/constants';
 
 
-class Sidebar extends Component {
-
-  _handleChangeEnvironment = (id) => {
+class Sidebar extends PureComponent {
+  _handleChangeEnvironment = id => {
     const {workspace, handleSetActiveEnvironment} = this.props;
     handleSetActiveEnvironment(workspace._id, id);
   };
@@ -130,8 +129,8 @@ Sidebar.propTypes = {
   hidden: PropTypes.bool.isRequired,
   width: PropTypes.number.isRequired,
   isLoading: PropTypes.bool.isRequired,
-  children: PropTypes.array.isRequired,
   workspace: PropTypes.object.isRequired,
+  children: PropTypes.arrayOf(PropTypes.object).isRequired,
   workspaces: PropTypes.arrayOf(PropTypes.object).isRequired,
   environments: PropTypes.arrayOf(PropTypes.object).isRequired,
 

app/ui/components/sidebar/SidebarChildren.js

@@ -85,7 +85,6 @@ class SidebarChildren extends PureComponent {
       }
 
       const isActive = hasActiveChild(child.children);
-
       const children = this._renderChildren(child.children, requestGroup);
 
       // Don't render the row if there are no children while filtering

app/ui/components/sidebar/SidebarRequestGroupRow.js

@@ -75,7 +75,7 @@ class SidebarRequestGroupRow extends PureComponent {
         </div>
 
         <ul className={classnames('sidebar__list', {'sidebar__list--collapsed': isCollapsed})}>
-          {children.length === 0 ? (
+          {children.length > 0 ? children : (
             <SidebarRequestRow
               handleActivateRequest={this._nullFunction}
               moveRequest={moveRequest}
@@ -85,7 +85,7 @@ class SidebarRequestGroupRow extends PureComponent {
               workspace={workspace}
               requestCreate={handleCreateRequest}
             />
-          ) : children}
+          )}
         </ul>
       </li>
     ));

app/ui/components/viewers/ResponseViewer.js

@@ -8,11 +8,8 @@ import {LARGE_RESPONSE_MB, PREVIEW_MODE_FRIENDLY, PREVIEW_MODE_SOURCE} from '../
 let alwaysShowLargeResponses = false;
 
 class ResponseViewer extends Component {
-  constructor (props) {
-    super(props);
-    this.state = {
-      blockingBecauseTooLarge: false
-    };
+  state = {
+    blockingBecauseTooLarge: false
   };
 
   _handleDismissBlocker () {

app/ui/redux/create.js

@@ -6,8 +6,8 @@ export default function configureStore () {
   const middleware = [thunkMiddleware];
 
   if (__DEV__) {
-    const createLogger = require('redux-logger');
-    middleware.push(createLogger({collapsed: true}));
+    // const createLogger = require('redux-logger');
+    // middleware.push(createLogger({collapsed: true}));
   }
 
   const store = createStore(reducer, applyMiddleware(...middleware));

app/ui/redux/selectors.js

@@ -1,5 +1,6 @@
 import {createSelector} from 'reselect';
 import * as models from '../../models/index';
+
 // ~~~~~~~~~ //
 // Selectors //
 // ~~~~~~~~~ //