stitch-ui/src/home/components/HomeAppDisplay.js

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable jsx-a11y/href-no-hash */
import React from "react";
import PropTypes from "prop-types";
import DropdownMenu from "react-dd-menu";
import { Button } from "../../core";
import { appLocation } from "../../util";

class HomeAppDisplay extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = { dropdownOpen: false };
    this.toggle = this.toggle.bind(this);
  }

  toggle(e) {
    // This is necessary because the toggle button is nested in a clickable
    // element and we don't want to trigger the outer click handler.
    e.stopPropagation();
    this.setState({ dropdownOpen: !this.state.dropdownOpen });
  }

  render() {
    const menuOptions = {
      isOpen: this.state.dropdownOpen,
      close: () => {
        this.setState({ dropdownOpen: false });
      },
      toggle: (
        <Button small onClick={this.toggle}>
          <i className="mms-icon-ellipsis" />
        </Button>
      ),
      align: "center"
    };
    const { app, deleteApp } = this.props;
    return (
      <div
        className="home-projects-listing-project"
        onClick={() =>
          this.context.router.history.push(appLocation(app.groupId, app._id))}
      >
        <div className="home-projects-listing-project-header">
          <div className="home-projects-listing-project-header-title">
            {app.name} ({app.clientAppId})
          </div>
          <DropdownMenu {...menuOptions}>
            <li>
              <a
                href="#"
                onClick={e => {
                  e.stopPropagation();
                  deleteApp(app.name, app._id);
                }}
              >
                Delete app…
              </a>
            </li>
          </DropdownMenu>
        </div>
      </div>
    );
  }
}

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

export default HomeAppDisplay;