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

// TODO proptypes
/* eslint-disable react/prop-types */
import React from "react";
import PropTypes from "prop-types";
import { Route } from "react-router-dom";
import { connect } from "react-redux";
import * as serviceActions from "../../services/actions";
import EditService from "../../services/components/EditService";

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

  componentDidMount() {
    const {
      app: { groupId, _id },
      match: { params: { svcname } }
    } = this.props;

    this.props.loadSvc(groupId, _id, svcname);
  }

  componentWillReceiveProps(nextProps) {
    const { appId, svcname } = this.props.match.params;
    const { appId: nextAppId, svcname: nextSvcname } = nextProps.match.params;

    if (appId !== nextAppId || svcname !== nextSvcname) {
      this.props.loadSvc(
        nextProps.params.groupId,
        nextProps.params.appId,
        nextProps.params.svcname,
        true
      );
    }
  }

  handleRemoved() {
    this.context.router.history.push(
      `/groups/${this.props.app.groupId}/apps/${this.props.params.appId}`
    );
  }

  render() {
    const { service, app, onUpdate, children, match } = this.props;
    if (!service) {
      return null;
    }

    const svcProps = {
      svcname: service.name,
      app,
      service,
      onRemoved: this.handleRemoved,
      onUpdate
    };

    return (
      <div>
        {React.Children.map(children, c =>
          React.cloneElement(c, {
            svcname: service.name,
            app,
            service,
            onRemoved: this.handleRemoved,
            onUpdate
          })
        )}

        <Route
          exact
          path={`${match.url}/:svcname`}
          render={routeProps => <EditService {...routeProps} {...svcProps} />}
        />
      </div>
    );
  }
}

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

const mapStateToProps = state => {
  const { app, services, error } = state.app.root;
  const { service, loadingSvc } = state.service.base;
  return { app, loadingSvc, services, error, service };
};

const mapDispatchToProps = dispatch => ({
  loadSvc: (groupId, appId, svcName, switching) => {
    dispatch(serviceActions.loadSvc(groupId, appId, svcName, { switching }));
  }
});

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