cluedin-widget/core/components/entityRelated/EntityListWidget.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 Widget from '../generics/widget.jsx';
import Overlay from '../generics/overlay.jsx';
import NoEntities from './NoEntities.jsx';
import DefaultEntity from '../defaultEntity.jsx';
import RemovableComponent from '../base/RemovableComponent.jsx';
import { connect } from 'react-redux';

class EntityListWidget extends RemovableComponent {

  getMenu() {
    return this.getRemovableActions();
  }

  isFinishedPaging() {
    const { entities, pageNumber } = this.props;

    if (pageNumber === 0 && entities.length < 10) {
      return true;
    }

    return ( entities.length % ( pageNumber * 10 ) !== 0);
  }

  fetchPaging() {
    const { fetch, isFake, isFetching } = this.props;

    let isFinishedPaging = this.isFinishedPaging();

    if (isFake || isFetching || isFinishedPaging) {
      return;
    }

    fetch();
  }

  render() {
    let content;
    let fakeHtml;
    let minHeight = 'auto';
    let menu;
    let miniLoading;
    let mainLoading;
    let loadMoreResult;
    let noScroll;

    const { isFetching, entities, isAdmin, isFake, entityType, title, lastVisitedDate } = this.props;

    if (!entities) {
      return <div>No entities for {title}</div>;
    }

    if (!isFetching || entities.length > 0) {
      content = entities.map(function (entity) {
        return <DefaultEntity key={entity.id} entity={entity} lastVisitedDate={lastVisitedDate}></DefaultEntity>;
      });
    }

    if (isFake || (!isFetching && entities.length === 0)) {
      fakeHtml = (<Overlay><NoEntities isAdmin={isAdmin} entityType={entityType}></NoEntities></Overlay>);
      menu = this.getMenu();
    }

    miniLoading = (isFetching && entities.length > 0);
    mainLoading = (isFetching && entities.length === 0);

    //should improve this as you need to scroll when entities are bigger but infinite scroll should be disable.
    loadMoreResult = ( !isFetching && (entities.length % 10 === 0 && entities.length !== 0));
    noScroll = (isFake || entities.length === 0);

    if (!isFake && entities.length === 0) {
      minHeight = '200px';
    }

    return (
      <Widget pagingHandler={this.fetchPaging.bind(this)}
              loadMoreResult={loadMoreResult}
              loading={mainLoading}
              miniLoading={miniLoading}
              title={title}
              menu={menu}
              noScroll={noScroll}
              minHeight={minHeight}>
        {fakeHtml}
        <div className="cluedIn_entity_list cluedIn_is_widget">
          {content}
        </div>
      </Widget>
    );
  }
}

export default connect()(EntityListWidget);