stitch-ui/src/home/components/CreateAppModal.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 { enterPressedCaller } from "../../util";
import validateAppName from "../validation";
import {
  Banner,
  FormRow,
  FormRowInputGroup,
  FormRowLabelGroup,
  Button
} from "../../core";

class CreateAppModal extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.createApp = this.createApp.bind(this);
    this.submit = this.submit.bind(this);
  }

  createApp() {
    this.props
      .createApp(this.props.groupId, this.refs.newAppName.value)
      .then(app =>
        this.context.router.history.push(
          `/groups/${this.props.groupId}/apps/${app._id}`
        )
      )
      .catch(() => {});
  }

  submit() {
    const { setCreateAppError } = this.props;

    const appErr = validateAppName(this.refs.newAppName.value);
    if (appErr) {
      setCreateAppError(appErr);
    } else {
      this.createApp();
    }
  }

  render() {
    const { open, onClose, createAppError } = this.props;
    return (
      <Modal
        isOpen={open}
        onRequestClose={onClose}
        contentLabel="Create App"
        className="view-modal-dialog"
        overlayClassName="view-modal-overlay"
      >
        <div className="view-modal-content">
          <div className="view-modal-header">
            <Button className="view-modal-close" onClick={this.props.onClose}>
              ×
            </Button>
            <h2 className="view-modal-title">Create a new App</h2>
          </div>
          <div className="view-modal-body">
            <div className="clearfix">
              <Banner
                message={createAppError}
                error
                onClear={() => {
                  this.setState({ error: null });
                }}
              />
              <FormRow last>
                <FormRowLabelGroup>
                  <label className="form-row-label" htmlFor="namespace">
                    App Name
                  </label>
                </FormRowLabelGroup>
                <FormRowInputGroup>
                  <input
                    type="text"
                    onKeyPress={enterPressedCaller(this.submit)}
                    id="namespace"
                    className="text-input form-row-text-input"
                    placeholder="my-new-app"
                    ref="newAppName"
                  />
                </FormRowInputGroup>
              </FormRow>
            </div>
          </div>
          <footer className="view-modal-footer">
            <Button primary onClick={this.submit}>
              Create
            </Button>
          </footer>
        </div>
      </Modal>
    );
  }
}

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

CreateAppModal.propTypes = {
  createApp: PropTypes.func.isRequired,
  groupId: PropTypes.string.isRequired,
  open: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  setCreateAppError: PropTypes.func.isRequired,
  createAppError: PropTypes.string
};

CreateAppModal.defaultProps = {
  createAppError: ""
};

export default CreateAppModal;