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 } = 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}></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));
        noScroll       = (isFake || entities.length === 0);

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