cluedin-widget/widget/entity/entitySourceAndProfile/index.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 '../../../core/components/generics/widget.jsx';
import { register } from '../../../core/registry';
import { connect } from 'react-redux';
import ProviderIcons from '../../../core/components/entityRelated/providerIcons.jsx';
import ProviderOriginalLink from '../../../core/components/providerRelated/ProviderOriginalLink.jsx';

class EntitySourceAndProfile extends Component {
  render() {
    let minHeight = 'auto';

    const { isFetchingEntity, entity } = this.props;
    const uris = entity.data.uris;
    const providers = entity ? entity.providers.map(function (provider) {
      return { name: provider, url: '', providers: [provider] }
    }) : [];

    return (
      <Widget loading={isFetchingEntity} title="Sources & Profiles" minHeight={minHeight}>
        <div className="cluedIn_entity_list_flex">
          <ul>
            {
              providers.map((provider, index) => {
                return (
                  <li key={index}>
                    <ProviderIcons providers={provider.providers} />
                    <div className="cluedIn_name">
                      <ProviderOriginalLink provider={provider} uris={uris} />
                    </div>
                  </li>
                );
              })
            }
          </ul>
        </div>
      </Widget>
    );
  }
}

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

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