insomnia/app/ui/components/sidebar/sidebar.js

import React, {PureComponent, PropTypes} from 'react';
import autobind from 'autobind-decorator';
import classnames from 'classnames';
import EnvironmentsDropdown from '../dropdowns/environments-dropdown';
import SidebarFilter from './sidebar-filter';
import SidebarChildren from './sidebar-children';
import SyncButton from '../dropdowns/sync-dropdown';
import WorkspaceDropdown from '../dropdowns/workspace-dropdown';
import {SIDEBAR_SKINNY_REMS, COLLAPSE_SIDEBAR_REMS} from '../../../common/constants';

@autobind
class Sidebar extends PureComponent {
  _handleChangeEnvironment (id) {
    const {handleSetActiveEnvironment} = this.props;
    handleSetActiveEnvironment(id);
  }

  _handleCreateRequestInWorkspace () {
    const {workspace, handleCreateRequest} = this.props;
    handleCreateRequest(workspace._id);
  }

  _handleCreateRequestGroupInWorkspace () {
    const {workspace, handleCreateRequestGroup} = this.props;
    handleCreateRequestGroup(workspace._id);
  }

  render () {
    const {
      showCookiesModal,
      filter,
      childObjects,
      hidden,
      width,
      workspace,
      workspaces,
      environments,
      activeEnvironment,
      handleSetActiveWorkspace,
      handleImportFile,
      handleExportFile,
      handleChangeFilter,
      isLoading,
      handleCreateRequest,
      handleDuplicateRequest,
      handleDuplicateRequestGroup,
      handleGenerateCode,
      handleCreateRequestGroup,
      handleSetRequestGroupCollapsed,
      moveDoc,
      handleActivateRequest,
      activeRequest
    } = this.props;

    return (
      <aside className={classnames('sidebar', {
        'sidebar--hidden': hidden,
        'sidebar--skinny': width < SIDEBAR_SKINNY_REMS,
        'sidebar--collapsed': width < COLLAPSE_SIDEBAR_REMS
      })}>
        <WorkspaceDropdown
          className="sidebar__header"
          activeWorkspace={workspace}
          workspaces={workspaces}
          handleExportFile={handleExportFile}
          handleImportFile={handleImportFile}
          handleSetActiveWorkspace={handleSetActiveWorkspace}
          isLoading={isLoading}
        />

        <div className="sidebar__menu">
          <EnvironmentsDropdown
            handleChangeEnvironment={this._handleChangeEnvironment}
            activeEnvironment={activeEnvironment}
            environments={environments}
            workspace={workspace}
          />
          <button className="btn btn--super-compact" onClick={showCookiesModal}>
            <div className="sidebar__menu__thing">
              <span>Cookies</span>
            </div>
          </button>
        </div>

        <SidebarFilter
          onChange={handleChangeFilter}
          requestCreate={this._handleCreateRequestInWorkspace}
          requestGroupCreate={this._handleCreateRequestGroupInWorkspace}
          filter={filter || ''}
        />

        <SidebarChildren
          childObjects={childObjects}
          handleActivateRequest={handleActivateRequest}
          handleCreateRequest={handleCreateRequest}
          handleCreateRequestGroup={handleCreateRequestGroup}
          handleSetRequestGroupCollapsed={handleSetRequestGroupCollapsed}
          handleDuplicateRequest={handleDuplicateRequest}
          handleDuplicateRequestGroup={handleDuplicateRequestGroup}
          handleGenerateCode={handleGenerateCode}
          moveDoc={moveDoc}
          workspace={workspace}
          activeRequest={activeRequest}
        />

        <SyncButton
          className="sidebar__footer"
          key={workspace._id}
          workspace={workspace}
        />
      </aside>
    );
  }
}

Sidebar.propTypes = {
  // Functions
  handleActivateRequest: PropTypes.func.isRequired,
  handleSetRequestGroupCollapsed: PropTypes.func.isRequired,
  handleChangeFilter: PropTypes.func.isRequired,
  handleImportFile: PropTypes.func.isRequired,
  handleExportFile: PropTypes.func.isRequired,
  handleSetActiveWorkspace: PropTypes.func.isRequired,
  handleSetActiveEnvironment: PropTypes.func.isRequired,
  moveDoc: PropTypes.func.isRequired,
  handleCreateRequest: PropTypes.func.isRequired,
  handleCreateRequestGroup: PropTypes.func.isRequired,
  handleDuplicateRequest: PropTypes.func.isRequired,
  handleDuplicateRequestGroup: PropTypes.func.isRequired,
  handleGenerateCode: PropTypes.func.isRequired,
  showEnvironmentsModal: PropTypes.func.isRequired,
  showCookiesModal: PropTypes.func.isRequired,

  // Other
  hidden: PropTypes.bool.isRequired,
  width: PropTypes.number.isRequired,
  isLoading: PropTypes.bool.isRequired,
  workspace: PropTypes.object.isRequired,
  childObjects: PropTypes.arrayOf(PropTypes.object).isRequired,
  workspaces: PropTypes.arrayOf(PropTypes.object).isRequired,
  environments: PropTypes.arrayOf(PropTypes.object).isRequired,

  // Optional
  filter: PropTypes.string,
  activeRequest: PropTypes.object,
  activeEnvironment: PropTypes.object
};

export default Sidebar;