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

// TODO proptypes
/* eslint-disable react/prop-types */
/* eslint-disable no-alert */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import DropdownMenu from "react-dd-menu";

import { Button, Banner, Spinner, Confirm } from "../../core";
import { TopNav } from "../../nav";
import HomeAppDisplay from "./HomeAppDisplay";
import CreateAppModal from "./CreateAppModal";
import * as actions from "../actions";

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

  componentDidMount() {
    const groupIds = this.groupIds();

    if (
      this.props.groupId &&
      groupIds.length > 0 &&
      groupIds.includes(this.props.groupId)
    ) {
      this.props.loadApps(this.props.groupId);
      return;
    }

    if (groupIds.length > 0) {
      this.props.setGroupId(groupIds[0]);
      this.props.loadApps(groupIds[0]);
    }
  }

  deleteApp(appName, appId) {
    return Confirm.confirm(
      `Are you sure you want to delete app ${appName}?`
    ).then(
      () =>
        this.props
          .deleteApp(this.props.groupId, appId)
          .then(() => this.props.loadApps(this.props.groupId)),
      () => Promise.resolve()
    );
  }

  clearError() {
    this.props.clearError();
  }

  /**
   * @returns {Array}
   */
  groupIds() {
    const groupIds = [];
    if (!this.props.client.authedId()) {
      this.context.router.history.push("/login");
      return groupIds;
    }

    if (!this.props.userProfile) {
      return groupIds;
    }

    const roles = this.props.userProfile.roles;
    for (let i = 0; i < roles.length; i += 1) {
      const role = roles[i];
      if (role.groupId) {
        groupIds.push(role.groupId);
      }
    }

    return groupIds;
  }

  render() {
    const groupIds = this.groupIds();

    let menuOptions;
    if (groupIds) {
      menuOptions = {
        isOpen: this.props.isGroupDropdownOpen,
        close: this.props.toggleGroupDropdown,
        className: "sidenav-stitch-dropdown-outerwrapper",
        toggle: (
          <span className="sidenav-stitch-dropdown-wrapper">
            <div
              className="sidenav-stitch-app-dropdown"
              onClick={this.props.toggleGroupDropdown}
            >
              <span className="down-arrow">▼</span>
              <span className="sidenav-stitch-app-dropdown-appname">
                {" "}{this.props.groupId}
              </span>
            </div>
          </span>
        ),
        align: "center"
      };
    }

    if (!groupIds) {
      return (
        <div>
          <TopNav />
          <div className="home main-content">
            <div className="home-banner">
              <h1>Welcome to Stitch</h1>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div>
        <TopNav />
        <div className="home main-content">
          <div className="home-banner">
            <h1>Welcome to Stitch</h1>
            <div className="home-banner-controls">
              <Button primary large onClick={this.props.showNewAppModal}>
                + Create a new app
              </Button>
            </div>
          </div>
          <Banner message={this.props.error} error onClear={this.clearError} />
          <DropdownMenu {...menuOptions}>
            {groupIds.map(id =>
              <li
                key={id}
                onClick={() => {
                  this.props.setGroupId(id);
                  this.props.loadApps(id);
                }}
              >
                {id}
              </li>
            )}
          </DropdownMenu>
          {this.props.groupId &&
            <div className="home-projects">
              <div className="home-projects-listing">
                <label
                  htmlFor="projects"
                  className="home-projects-listing-label"
                >
                  All Projects
                </label>
                <Spinner open={this.props.loading} xlarge />
                {this.props.apps.map(app =>
                  <HomeAppDisplay
                    key={app.name}
                    app={app}
                    deleteApp={this.deleteApp}
                  />
                )}
                <div
                  className="home-projects-listing-new"
                  onClick={this.props.showNewAppModal}
                >
                  + Create a new app
                </div>
              </div>
            </div>}
        </div>
        {this.props.groupId &&
          <CreateAppModal
            groupId={this.props.groupId}
            createApp={this.props.createApp}
            open={this.props.isNewAppModalOpen}
            setCreateAppError={this.props.setCreateAppError}
            createAppError={this.props.createAppError}
            onClose={this.props.hideNewAppModal}
          />}
      </div>
    );
  }
}

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

const mapStateToProps = state => {
  const {
    apps,
    loading,
    error,
    createAppError,
    groupId,
    isGroupDropdownOpen
  } = state.home;
  const { client } = state.base.client;
  const { userProfile } = state.base;
  const isNewAppModalOpen = state.home.showNewAppModal;
  return {
    apps,
    loading,
    error,
    createAppError,
    client,
    isNewAppModalOpen,
    groupId,
    isGroupDropdownOpen,
    userProfile
  };
};

const mapDispatchToProps = dispatch => ({
  loadApps: groupId => dispatch(actions.loadApps(groupId)),
  createApp: (groupId, name) => dispatch(actions.createApp(groupId, name)),
  deleteApp: (groupId, appId) => dispatch(actions.deleteApp(groupId, appId)),
  showNewAppModal: () => dispatch(actions.showNewAppModal()),
  hideNewAppModal: () => dispatch(actions.hideNewAppModal()),
  clearError: () => dispatch(actions.clearError()),
  toggleGroupDropdown: () => dispatch(actions.toggleGroupDropdown()),
  setGroupId: id => dispatch(actions.setGroupId(id)),
  setCreateAppError: error => dispatch(actions.setCreateAppError(error))
});

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