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

// TODO proptypes
/* eslint-disable react/prop-types */
import React, { Component } from "react";
import { connect } from "react-redux";
import { Route, Switch, Redirect } from "react-router-dom";

import { SideNav, TopNav } from "../../nav";
import * as actions from "../actions";
import * as homeActions from "../../home/actions";

import AppHome from "./AppHome";
import DebugConsole from "../../debugconsole/components/DebugConsole";
import Clients from "../../platform/platform";
import LogBrowser from "../../logs/components/LogBrowser";
import Values from "../../values/components/Values";
import NamedPipelines from "../../namedpipelines/components/NamedPipelines";
import Authentication from "../../auth/components/Authentication";
import Push from "../../push/components/PushNotifications";
import EditService from "../../services/components/EditService";

class App extends Component {
  componentDidMount() {
    const { groupId, appId } = this.props.match.params;

    this.props.loadApps(groupId);
    this.props.loadServices(groupId, appId);
    this.props.load(groupId, appId);
  }

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

    if (nextAppId !== appId) {
      this.props.load(nextGroupId, nextAppId);
      this.props.loadServices(nextGroupId, nextAppId);
      this.props.loadApps(nextGroupId);
    }
  }

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

    const appProps = {
      client: this.props.client,
      dispatch: this.props.dispatch,
      app: this.props.app,
      onUpdate: this.props.load,
      services: this.props.services
    };

    return (
      <div className="sidenav-padding">
        <TopNav />
        <div>
          {this.props.children}
        </div>
        <SideNav
          match={match}
          services={this.props.services}
          svcname={match.params.svcname}
          apps={this.props.apps}
          app={this.props.app}
        />

        <Switch>
          <Redirect
            exact
            from={`${match.url}`}
            to={`${match.url}/gettingstarted`}
          />
          <Route
            path={`${match.url}/gettingstarted`}
            render={routeProps => <AppHome {...appProps} {...routeProps} />}
          />
          <Route
            path={`${match.url}/auth`}
            render={routeProps =>
              <Authentication {...appProps} {...routeProps} />}
          />
          <Route
            path={`${match.url}/debug`}
            render={routeProps =>
              <DebugConsole {...appProps} {...routeProps} />}
          />
          <Route
            path={`${match.url}/push`}
            render={routeProps => <Push {...appProps} {...routeProps} />}
          />
          <Route
            path={`${match.url}/clients`}
            render={routeProps => <Clients {...appProps} {...routeProps} />}
          />

          <Route
            path={`${match.url}/logs`}
            render={routeProps => <LogBrowser {...appProps} {...routeProps} />}
          />
          <Route
            path={`${match.url}/values`}
            render={routeProps => <Values {...appProps} {...routeProps} />}
          />
          <Route
            path={`${match.url}/namedpipelines`}
            render={routeProps =>
              <NamedPipelines {...appProps} {...routeProps} />}
          />
          <Route
            path={`${match.url}/services/:svcname`}
            render={routeProps => <EditService {...routeProps} />}
          />
        </Switch>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const client = state.base.client;
  const { app, error, services } = state.app.root;
  const modalState = state.app.addServiceModal;
  return { client, app, services, error, modalState };
};

const mapDispatchToProps = dispatch => ({
  dispatch,
  load: (groupId, appId) => dispatch(actions.loadApp(groupId, appId)),
  loadApps: groupId => dispatch(homeActions.loadApps(groupId)),
  loadServices: (groupId, appId) =>
    dispatch(actions.loadServices(groupId, appId))
});

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