cluedin-widget/core/components/cluedinapp.jsx

This project contains all the pages needed for browsing entities and searching them. The aim is to replace the CluedIn.Webapp project with this one when all the pages ( including the Admin page ) will be ported to REACT.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchWidgetConfigurationIfNeeded } from '../action/core';
import { shouldFetchEntityIfNeeded } from '../action/entity';
import { shouldFetchCurrentUser } from '../action/user';
import { fetchAllFollow } from '../action/follow';
import { markAsVisited } from '../action/boarding';
import CluedInLayout from './Layouts/CluedInLayout.jsx';
import EntityMainBar from './entityRelated/EntityMainBar.jsx';
import { openWMSManager } from '../action/wms';
class CluedInApp extends Component {

  static contextTypes = {
    router: React.PropTypes.object,
  };

  componentWillMount() {
    const {
      entityId,
      type,
    } = this.props;

    this.dispatchAllActionRequiredByPage(entityId, type);
  }

  dispatchAllActionRequiredByPage(entityId, type) {
    const {org} = this.props;

    this.props.dispatch(fetchWidgetConfigurationIfNeeded(type, org));
    this.props.dispatch(shouldFetchCurrentUser());

    if (entityId) {
      this.props.dispatch(shouldFetchEntityIfNeeded(entityId));
      this.props.dispatch(fetchAllFollow());
      this.props.dispatch(markAsVisited(org));
    }
  }

  componentWillUpdate(nextProps) {
    if (
      nextProps.entityId !== this.props.entityId
      || nextProps.paramToListen !== this.props.paramToListen
    ) {
      this.dispatchAllActionRequiredByPage(nextProps.entityId, nextProps.type);
    }
  }

  goBack() {
    this.context.router.goBack();
  }

  toggleLayout() {
    this.props.dispatch(openWMSManager());
  }

  render() {
    const {
      widgetConfiguration,
      token,
      entityId,
      entity,
      isFetchingEntity,
      type,
      currentUser,
      standAlone,
    } = this.props;

    let isAdmin = false;

    if (currentUser && currentUser.client) {
      isAdmin = currentUser.client.IsAdmin;
    }

    if (!token) {
      return (<div className="cluedIn_container">
        You are not connected to CluedIn, to see your widget, <a href="https://app." target="__blank">sign in to
        CluedIn</a>
      </div>);
    }

    if (!widgetConfiguration) {
      return <div></div>;
    }

    let entityMainBar;

    if (!standAlone) {
      entityMainBar = ( <EntityMainBar
        onBack={this.goBack.bind(this)}
        widgetConfiguration={widgetConfiguration}
        onConfigureLayoutClick={this.toggleLayout.bind(this)}
        entity={entity}
      />);
    }

    return (
      <div className="cluedIn_container">
        {entityMainBar}
        <CluedInLayout
          widgetConfiguration={widgetConfiguration}
          type={type}
          entityId={entityId}
          entity={entity}
          isAdmin={isAdmin}
          standAlone={standAlone}
          isFetchingEntity={isFetchingEntity}
        />
      </div>);
  }
}

var select = (state) => {
  return {
    widgetConfiguration: state.core.widgetConfiguration,
    token: state.core.token,
    entity: state.entity.selectedEntity,
    isFetchingEntity: state.entity.isFetchingEntity,
    org: state.core.org,
    isFetchingCurrentUser: state.user.isFetchingCurrentUser,
    currentUser: state.user.currentUser,
  };
};

export default connect(select)(CluedInApp);