cluedin-widget/core/components/entities/organization.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 EntityIcon from '../entityRelated/EntityIcon.jsx';
import EntityLink from '../entityRelated/EntityLink.jsx';
import EntityDate from '../entityRelated/EntityDate.jsx';
import EntityLogo from '../entityRelated/EntityLogo.jsx';
import { getFileTypeUrlFromEntity } from '../../helpers/fileType';
import ReactEmoji from 'react-emoji';

export default class Organization extends Component {
  render() {
    const { entity, openInNewTab, q } = this.props;

    let typeURL = getFileTypeUrlFromEntity(entity);
    let lastChangedBy;
    let location;
    let jobTitleContnet;
    let IconHtml = (<EntityIcon entityType={entity.data.entityType}></EntityIcon>);

    if (entity.hasPreview || entity.hasLogo) {
      IconHtml = (<div style={{marginRight: '8px'}}>
        <EntityLogo url={entity.logoUrl || entity.previewUrl}></EntityLogo></div>);
    } else {
      IconHtml = (<EntityIcon entityType={entity.data.entityType}></EntityIcon>);
    }

    let jobTitle = entity.data.properties['property-user.jobTitle'] || entity.data.properties['property-person.jobTitle'];

    if (jobTitle) {
      jobTitleContnet = (<span
        style={{
                  maxWidth: '400px',
                  minWidth: '400px',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  display: 'inline-block',}}
      >
          {jobTitle}
              </span>);
    }

    let hasQuery = false;
    let description = entity.data.description || 'No snippet available';

    try {
      let index = description.search(new RegExp(q, 'i'));
      hasQuery = (index > -1) ? true : false;
    } catch (e) {
      console.log(e);
    }

    if (q && description && hasQuery) {
      description = description.replace(new RegExp(q, 'ig'), `<strong>${q}</strong>`);
    }

    if (entity.data.uris) {
      let uris = entity.data.uris.filter((uri)=> {
        return uri.origin;
      });

      if (uris.length === 1) {
        location = (<span>in <a href={entity.data.uris[0].uri}>{entity.data.uris[0].origin}</a></span>)
      }

      if (uris.length > 1) {
        let locations = uris.map((uri, index)=> {
          let link = (<a key={index} href={uri.uri}>{uri.origin}</a>);
          if (index === uris.length) {
            return (<span>{link}</span>);
          }

          return (<span>{link},</span>);
        });

        location = (<span>in {locations}</span>)
      }
    }

    if (location) {
      lastChangedBy = (<div>
          Found in {location}
          <br/>
          <EntityDate entity={entity}></EntityDate>
        </div>
      );
    }

    let maxHeightDescription = '32px';

    if (!jobTitleContnet) {
      maxHeightDescription = '50px';
    }

    return (
      <div className="cluedIn_entity_row">
        <div style={{display: 'flex'}}>
          <div style={{ display: 'inline-block'}}>
            {IconHtml}
          </div>
          <div style={{ display: 'inline-block', flex: 2}}>
            <EntityLink q={q} openInNewTab={openInNewTab} entity={entity}></EntityLink>
            {lastChangedBy}
          </div>
          <div style={{ display: 'inline-block', width: '400px', marginTop: '2px' }}>
            {jobTitleContnet}
            <div style={{
                color: '#999',
                fontSize: '12px',
                maxWidth: '400px',
                whiteSpace: 'normal',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                maxHeight: maxHeightDescription,
                display: 'block',}}
            >
              <span dangerouslySetInnerHTML={{__html: ReactEmoji.emojify(description)}}></span>
            </div>
          </div>
        </div>
      </div>
    );
  }
}