stitch-ui/src/app/components/AddServiceModal.js

// TODO proptypes
/* eslint-disable react/prop-types */
// TODO get rid of refs
/* eslint-disable react/no-string-refs */
import React from "react";
import PropTypes from "prop-types";
import Modal from "react-modal";
import { connect } from "react-redux";
import { enterPressedCaller } from "../../util";
import { servicesByType } from "../../services/registry";
import * as actions from "../actions";
import {
  Banner,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  Button
} from "../../core";

class AddServiceModal extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.addService = this.addService.bind(this);
  }

  addService() {
    if (!this.props.selectedType) {
      this.props.setError("Must select a service type first");
      return;
    }

    this.props.onClose();

    const newName = this.props.name;
    const tab = servicesByType.get(this.props.selectedType).configEditor
      ? "config"
      : "incomingWebhooks";
    this.props
      .createService(newName, this.props.selectedType)
      .then(() =>
        this.context.router.history.push(
          `/groups/${this.props.app.groupId}/apps/${this.props.app
            ._id}/services/${newName}/${tab}`
        )
      )
      .catch(() => {});
  }

  render() {
    const { hasGcm } = this.props;
    return (
      <Modal
        isOpen={this.props.open}
        onRequestClose={this.props.onClose}
        className="view-modal-dialog"
        overlayClassName="view-modal-overlay"
        contentLabel="Add Service"
      >
        <div className="view-modal-content view-modal-content-service">
          <div className="view-modal-header">
            <Button className="view-modal-close" onClick={this.props.onClose}>
              ×
            </Button>
            <h2 className="view-modal-title">Add Service</h2>
          </div>
          <div className="view-modal-body">
            <div className="view-modal-body-service">
              {servicesByType
                .entrySeq()
                .filter(x => !x[1].hideAdd || (x[1].type === "gcm" && !hasGcm))
                .map(x => {
                  const svc = x[1];
                  return (
                    <div
                      className={`rich-radio rich-radio-is-medium${this.props
                        .selectedType === svc.type
                        ? " rich-radio-is-checked"
                        : ""}`}
                      key={svc.type}
                      value={svc.type}
                      onClick={() => {
                        this.props.selectType(svc.type);
                      }}
                    >
                      <div className="rich-radio-illustration-container">
                        <div className="rich-radio-illustration">
                          {React.createElement(svc.icon)}
                        </div>
                        <div>
                          <div className="rich-radio-illustration-title">
                            {svc.getLongDisplayName()}
                          </div>
                          <div className="rich-radio-illustration-description">
                            {svc.description}
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
              <Banner
                message={this.props.error}
                error
                onClear={this.props.clearError}
              />
            </div>
            <FormRow last>
              <FormRowLabelGroup>
                <label className="form-row-label" htmlFor="service-name">
                  Service Name
                </label>
                <p className="form-row-description">
                  Enter a unique name for this service. You can add multiple
                  instances of any type of service.
                </p>
              </FormRowLabelGroup>
              <FormRowInputGroup>
                <input
                  type="text"
                  id="service-name"
                  className="text-input form-row-text-input"
                  placeholder="Service Name"
                  ref="name"
                  value={this.props.name}
                  onChange={e => {
                    this.props.setSvcName(e.target.value);
                  }}
                  onKeyPress={enterPressedCaller(() => {
                    this.addService();
                  })}
                />
              </FormRowInputGroup>
            </FormRow>
            <div>
              <Banner message={this.props.createServiceError} error />
            </div>
          </div>
          <footer className="view-modal-footer">
            <div className="view-modal-actions">
              <Button
                className="cancel-add-service"
                onClick={this.props.onClose}
              >
                Cancel
              </Button>
              <Button
                primary
                footer
                disabled={!this.props.canSubmit}
                onClick={this.addService}
              >
                Add service
              </Button>
            </div>
          </footer>
        </div>
      </Modal>
    );
  }
}

AddServiceModal.contextTypes = {
  router: PropTypes.object
};

const mapDispatchToProps = (dispatch, ownProps) => ({
  createService: (name, type) =>
    dispatch(
      actions.createService(ownProps.app.groupId, ownProps.app._id, name, type)
    ).then(() =>
      dispatch(actions.loadServices(ownProps.app.groupId, ownProps.app._id))
    ),
  setSvcName: n => dispatch(actions.setSvcName(n)),
  selectType: t => dispatch(actions.selectType(t)),
  setError: e => dispatch(actions.setError(e)),
  clearError: () => dispatch(actions.clearError())
});

const mapStateToProps = state => {
  const {
    selectedType,
    canSubmit,
    name,
    error,
    createServiceError
  } = state.app.addServiceModal;
  const hasGcm = !!state.app.root.services.gcm;
  return { selectedType, canSubmit, name, error, createServiceError, hasGcm };
};

export default connect(mapStateToProps, mapDispatchToProps)(AddServiceModal);