cluedin-widget/widget/lastIssue/index.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react';
import Widget from '../../core/components/widget.jsx';
import Loading from '../../core/components/loading.jsx';
import registry from '../../core/registry';
import config from '../../core/config';
import { connect } from 'react-redux';
import {shouldFetchGenericLastIssuesIfNeeded} from '../../core/action/issue';
import Issue from './issue.jsx';
import iso from '../../iso';
import Overlay from '../../core/components/overlay.jsx';
import NoEntities from '../../core/components/noEntities.jsx';

const collectionHelper = iso.collection;

class OnBoarding extends Component {

    componentWillMount() {
        this.props.dispatch( shouldFetchGenericLastIssuesIfNeeded() );

    }

    render() {
        let content;
        let fakeHtml;
        let minHeight = 'auto';

        const { isFetchingGenericIssues, issues, isFake } = this.props;

        if ( isFetchingGenericIssues ) {
            content   = (<Loading></Loading>);
            minHeight = '200px';
        } else {
            content = collectionHelper.take( issues, 5 ).map( function( issue ) {
                return <Issue key={issue.id} entity={issue}></Issue>;
            } );
        }

        if ( isFake ) {
            fakeHtml = (<Overlay><NoEntities entityType="/Issue"></NoEntities></Overlay>);
        }

        return (
            <Widget title="Latest Issues" minHeight={minHeight}>
                {fakeHtml}
                <div className="cluedIn_entity_list">
                    {content}
                </div>
            </Widget>
        );
    }
}

function select( state ) {
    return {
        issues: state.issue.genericLastIssues,
        isFetchingGenericIssues: state.issue.isFetchingGenericIssues,
        isFake: state.issue.isFakeGenericIssues
    };
}

registry.register( 'genericLastIssue', connect( select )( OnBoarding ) );