insomnia/app/ui/components/modals/generate-code-modal.js

import React, {PureComponent, PropTypes} from 'react';
import autobind from 'autobind-decorator';
import HTTPSnippet, {availableTargets} from 'httpsnippet';
import CopyButton from '../base/copy-button';
import {Dropdown, DropdownButton, DropdownItem} from '../base/dropdown';
import Editor from '../codemirror/code-editor';
import Modal from '../base/modal';
import ModalBody from '../base/modal-body';
import ModalHeader from '../base/modal-header';
import ModalFooter from '../base/modal-footer';
import {exportHar} from '../../../common/har';
import {trackEvent} from '../../../analytics/index';
import Link from '../base/link';

const DEFAULT_TARGET = availableTargets().find(t => t.key === 'shell');
const DEFAULT_CLIENT = DEFAULT_TARGET.clients.find(t => t.key === 'curl');
const MODE_MAP = {
  c: 'clike',
  java: 'clike',
  csharp: 'clike',
  node: 'javascript',
  objc: 'clike',
  ocaml: 'mllike'
};

const TO_ADD_CONTENT_LENGTH = {
  node: ['native']
};

@autobind
class GenerateCodeModal extends PureComponent {
  constructor (props) {
    super(props);

    let client;
    let target;

    // Load preferences from localStorage

    try {
      target = JSON.parse(window.localStorage.getItem('insomnia::generateCode::target'));
    } catch (e) {
    }
    try {
      client = JSON.parse(window.localStorage.getItem('insomnia::generateCode::client'));
    } catch (e) {
    }

    this.state = {
      cmd: '',
      request: null,
      target: target || DEFAULT_TARGET,
      client: client || DEFAULT_CLIENT
    };
  }

  _setModalRef (n) {
    this.modal = n;
  }
  _setEditorRef (n) {
    this._editor = n;
  }

  hide () {
    this.modal.hide();
  }

  _handleClientChange (client) {
    const {target, request} = this.state;
    this._generateCode(request, target, client);
    trackEvent('Generate Code', 'Client Change', `${target.title}/${client.title}`);
  }

  _handleTargetChange (target) {
    const {target: currentTarget} = this.state;
    if (currentTarget.key === target.key) {
      // No change
      return;
    }

    const client = target.clients.find(c => c.key === target.default);
    this._generateCode(this.state.request, target, client);
    trackEvent('Generate Code', 'Target Change', target.title);
  }

  async _generateCode (request, target, client) {
    // Some clients need a content-length for the request to succeed
    const addContentLength = (TO_ADD_CONTENT_LENGTH[target.key] || []).find(c => c === client.key);

    const {environmentId} = this.props;
    const har = await exportHar(request._id, environmentId, addContentLength);
    const snippet = new HTTPSnippet(har);
    const cmd = snippet.convert(target.key, client.key);

    this.setState({request, cmd, client, target});

    // Save client/target for next time
    window.localStorage.setItem('insomnia::generateCode::client', JSON.stringify(client));
    window.localStorage.setItem('insomnia::generateCode::target', JSON.stringify(target));
  }

  show (request) {
    const {client, target} = this.state;
    this._generateCode(request, target, client);
    this.modal.show();
  }

  render () {
    const {cmd, target, client} = this.state;
    const {editorFontSize, editorKeyMap} = this.props;

    const targets = availableTargets();

    // NOTE: Just some extra precautions in case the target is messed up
    let clients = [];
    if (target && Array.isArray(target.clients)) {
      clients = target.clients;
    }

    return (
      <Modal ref={this._setModalRef} tall {...this.props}>
        <ModalHeader>Generate Client Code</ModalHeader>
        <ModalBody noScroll style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr)',
          gridTemplateRows: 'auto minmax(0, 1fr)'
        }}>
          <div className="pad">
            <Dropdown outline>
              <DropdownButton className="btn btn--clicky">
                {target ? target.title : 'n/a'}
                <i className="fa fa-caret-down"/>
              </DropdownButton>
              {targets.map(target => (
                <DropdownItem key={target.key} onClick={this._handleTargetChange} value={target}>
                  {target.title}
                </DropdownItem>
              ))}
            </Dropdown>
            &nbsp;&nbsp;
            <Dropdown outline>
              <DropdownButton className="btn btn--clicky">
                {client ? client.title : 'n/a'}
                <i className="fa fa-caret-down"/>
              </DropdownButton>
              {clients.map(client => (
                <DropdownItem key={client.key} onClick={this._handleClientChange} value={client}>
                  {client.title}
                </DropdownItem>
              ))}
            </Dropdown>
            &nbsp;&nbsp;
            <CopyButton content={cmd} className="pull-right btn btn--clicky"/>
          </div>
          <Editor
            lineWrapping
            placeholder="Generating code snippet..."
            className="border-top"
            key={Date.now()}
            mode={MODE_MAP[target.key] || target.key}
            ref={this._setEditorRef}
            fontSize={editorFontSize}
            keyMap={editorKeyMap}
            defaultValue={cmd}
          />
        </ModalBody>
        <ModalFooter>
          <div className="margin-left italic txt-sm tall">
            * Code snippets generated by&nbsp;
            <Link href="https://github.com/Mashape/httpsnippet">
              httpsnippet
            </Link>
          </div>
          <button className="btn" onClick={this.hide}>
            Done
          </button>
        </ModalFooter>
      </Modal>
    );
  }
}

GenerateCodeModal.propTypes = {
  environmentId: PropTypes.string.isRequired,
  editorFontSize: PropTypes.number.isRequired,
  editorKeyMap: PropTypes.string.isRequired
};

export default GenerateCodeModal;