insomnia/packages/insomnia-app/app/ui/components/dropdowns/method-dropdown.js

import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import autobind from 'autobind-decorator';
import {Dropdown, DropdownButton, DropdownDivider, DropdownItem} from '../base/dropdown';
import * as constants from '../../../common/constants';
import {showPrompt} from '../modals/index';
import {trackEvent} from '../../../common/analytics';

const LOCALSTORAGE_KEY = 'insomnia.httpMethods';

@autobind
class MethodDropdown extends PureComponent {
  _setDropdownRef (n) {
    this._dropdown = n;
  }

  _handleSetCustomMethod () {
    let recentMethods;
    try {
      const v = window.localStorage.getItem(LOCALSTORAGE_KEY);
      recentMethods = JSON.parse(v) || [];
    } catch (err) {
      recentMethods = [];
    }

    // Prompt user for the method
    showPrompt({
      defaultValue: this.props.method,
      title: 'HTTP Method',
      submitName: 'Done',
      upperCase: true,
      selectText: true,
      hint: 'Common examples are LINK, UNLINK, FIND, PURGE',
      label: 'Name',
      placeholder: 'CUSTOM',
      hints: recentMethods,
      onDeleteHint: method => {
        recentMethods = recentMethods.filter(m => m !== method);
        window.localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(recentMethods));
      },
      onComplete: method => {
        // Don't add empty methods
        if (!method) {
          return;
        }

        // Don't add base methods
        if (constants.HTTP_METHODS.includes(method)) {
          return;
        }

        // Save method as recent
        recentMethods = recentMethods.filter(m => m !== method);
        recentMethods.unshift(method);
        window.localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(recentMethods));

        // Invoke callback
        this.props.onChange(method);
        trackEvent('Request', 'Set Method', 'Custom');
      }
    });
  }

  _handleChange (method) {
    this.props.onChange(method);
    trackEvent('Request', 'Set Method', method);
  }

  toggle () {
    this._dropdown && this._dropdown.toggle(true);
  }

  render () {
    const {
      method,
      right,
      onChange, // eslint-disable-line no-unused-vars
      ...extraProps
    } = this.props;
    return (
      <Dropdown ref={this._setDropdownRef} className="method-dropdown" right={right}>
        <DropdownButton type="button" {...extraProps}>
          {method} <i className="fa fa-caret-down"/>
        </DropdownButton>
        {constants.HTTP_METHODS.map(method => (
          <DropdownItem key={method}
                        className={`http-method-${method}`}
                        onClick={this._handleChange}
                        value={method}>
            {method}
          </DropdownItem>
        ))}
        <DropdownDivider/>
        <DropdownItem className="http-method-custom"
                      onClick={this._handleSetCustomMethod}
                      value={method}>
          Custom Method
        </DropdownItem>
      </Dropdown>
    );
  }
}

MethodDropdown.propTypes = {
  // Required
  onChange: PropTypes.func.isRequired,
  method: PropTypes.string.isRequired,

  // Optional
  right: PropTypes.bool
};

export default MethodDropdown;