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, shouldChangeLastVisitedTimeAction } 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';
import CircularProgress from 'material-ui/CircularProgress';
import { pushAction } from '../action/action';
import EntityAskForLeadWrapper from './entityRelated/EntityAskForLeadWrapper.jsx';
import Helmet from 'react-helmet';

const mergeCluedInWithOrgWidgets = function (base, override) {
  let result = override.slice(0);

  base.filter(function (w) {
    var isPresent = override.find(function (wFromOrg) {
      return wFromOrg.name.toLowerCase() === w.name.toLowerCase();
    });

    if (!isPresent) {
      result.push(w);
    }
  });

  return result;
};

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, isEntityPageVisited } = this.props;

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

    if (entityId) {
      this.props.dispatch(shouldFetchEntityIfNeeded(entityId));
      this.props.dispatch(fetchAllFollow());
      if (!isEntityPageVisited) {
        this.props.dispatch(markAsVisited(org));
      }
      this.props.dispatch(pushAction('entityPage', { type, entityId }));
    }
  }

  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());
  }

  getWidgetConfigWithUsers() {
    const { widgetConfiguration, currentUser, type } = this.props;

    if (!currentUser || !currentUser.userProfile || !currentUser.userProfile.widgetConfiguration) {
      return widgetConfiguration;
    }

    //find type - type
    var customEntityTypeWidget = currentUser.userProfile.widgetConfiguration.find((w) => {
      return w.entityType.toLowerCase() === type.toLowerCase();
    });

    if (!customEntityTypeWidget) {
      return widgetConfiguration;
    }

    let filteredWidgets = mergeCluedInWithOrgWidgets(widgetConfiguration.widgets.slice(0), customEntityTypeWidget.widgets.slice(0));

    widgetConfiguration.widgets = filteredWidgets.filter((w) => {
      return !w.isDeleted;
    });

    return widgetConfiguration;
  }

  componentWillUnmount() {
    const { entityId } = this.props;

    this.props.dispatch(shouldChangeLastVisitedTimeAction(entityId || 'homescreen', Date.now()));
  }

  render() {
    const {
      widgetConfiguration,
      token,
      entityId,
      entity,
      isFetchingEntity,
      type,
      currentUser,
      standAlone,
      isFetchingCurrentUser,
      isFetchingSchema,
      lastTimeVisitedValue,
    } = 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}
        />
      );
    }

    if ((entityId && isFetchingEntity) || isFetchingCurrentUser || isFetchingSchema) {
      return (
        <div style={{textAlign: 'center', marginTop:'50px'}}>
          <CircularProgress></CircularProgress>
        </div>
      );
    }

    const lastVisitedDate = lastTimeVisitedValue[entityId || 'homescreen'];
    let titleSuffix;

    if (!entityId && !entity) {
      titleSuffix = 'Application';
    }

    if (entity) {
      titleSuffix = entity.name;
    }
    
    const title = `CluedIn - ${titleSuffix}`
    return (
      <div className="cluedIn_container">
        <Helmet title={title} />
        {entityMainBar}
        <EntityAskForLeadWrapper type={type}/>
        <CluedInLayout
          widgetConfiguration={this.getWidgetConfigWithUsers()}
          type={type}
          entityId={entityId}
          entity={entity}
          isAdmin={isAdmin}
          standAlone={standAlone}
          isFetchingEntity={isFetchingEntity}
          lastVisitedDate={lastVisitedDate}
        />
      </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,
    isEntityPageVisited: state.boarding.isEntityPageVisited,
    isFetchingSchema: state.entity.isFetchingSchema,
    lastTimeVisitedValue: state.core.lastTimeVisitedValue,
  };
};

export default connect(select)(CluedInApp);