cluedin-widget/widget/entity/entitySourceAndProfile/index.jsx

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

import React, { Component } from 'react';
import Widget from '../../../core/components/generics/widget.jsx';
import Overlay from '../../../core/components/generics/overlay.jsx';
import registry from '../../../core/registry';
import config from '../../../core/config';
import { connect } from 'react-redux';
import { shouldFetchEntityIfNeeded } from '../../../core/action/entity';
import iso from '../../../iso';
import ProviderIcons from '../../../core/components/entityRelated/providerIcons.jsx'
const collectionHelper = iso.collection;

class EntitySourceAndProfile extends Component {

    componentWillMount() {
        //this.props.dispatch( shouldFetchEntityIfNeeded( 'xxx-x-x-xx-' ) );
    }

    render() {
        let content;
        let minHeight = 'auto';
        let loading   = false;

        const { isFetchingEntity, entity } = this.props;

        loading = isFetchingEntity;

        var providers = entity ? entity.providers.map( function( provider ) {
            return { name: provider, url: '', providers: [ provider ] }
        } ) : [];

        return (
            <Widget loading={loading} title="Sources & Profiles" minHeight={minHeight}>
                <div className="cluedIn_entity_list_flex">
                    <ul>
                        {
                            providers.map( ( provider, index ) => {
                                let providerContent;

                                if ( provider.url ) {
                                    providerContent = (<a href={provider.url}>{provider.name}</a>);
                                } else {
                                    providerContent = provider.name
                                }
                                return (
                                    <li key={index}>
                                        <ProviderIcons providers={provider.providers}></ProviderIcons>

                                        <div className="cluedIn_name">{providerContent}</div>
                                    </li>)
                            } )
                        }
                    </ul>
                </div>
            </Widget>
        );

    }
}

function select( state ) {
    return {
        entity: state.entity.selectedEntity,
        isFetchingEntity: state.entity.isFetchingEntity
    };
}

registry.register( 'EntitySourceAndProfile', connect( select )( EntitySourceAndProfile ) );