cluedin-widget/widget/entity/entityHeader/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 { register } from '../../../core/registry';
import { connect } from 'react-redux';
import FollowWidget from '../../../core/components/entityRelated/FollowWidget.jsx';
import EntityIcon from '../../../core/components/entityRelated/EntityIcon.jsx';
import EntityHeaderDetails from '../../../core/components/entityRelated/EntityHeaderDetails.jsx';
import Loading from '../../../core/components/generics/loading.jsx';
import RaisedButton from 'material-ui/RaisedButton';

class EntityHeader extends Component {

  render() {
    let content;
    let descriptionContent;
    let viewOriginalContent;

    let viewOriginalStyle = {
      float: 'right',
      marginRight: '15px',
      marginTop: '17px',
    };
    const {isFetchingEntity, entity, hideDescription} = this.props;

    if (isFetchingEntity) {
      let loadingStyle = {
        height: '150px'
      };

      return <div className="cluedIn_entityHeader" style={loadingStyle}><Loading></Loading></div>
    } else {
      if (entity.data.uri) {
        let replacedURI = entity.data.uri.replace(/\+/g, '%20');
        // temporary HACK - replace + signs for %20 in links to original resource
        viewOriginalContent = (
          <div style={viewOriginalStyle}>
            <a target="__blank" href={replacedURI}>
              <RaisedButton label="View Original"></RaisedButton>
            </a>
          </div>);
      }

      if (entity.showDescription && (!hideDescription)) {
        descriptionContent = (<div className="cluedIn_entityHeader_description">
          {entity.data.description}
        </div>);
      }

      content = <div className="cluedIn_entityHeader">
        <div className="cluedIn_row">
          <div className="cluedIn_col s12">
            <FollowWidget entity={entity}></FollowWidget>
            {viewOriginalContent}

            <div className="cluedIn_NameWithEntityIcon cluedIn_flex">
              <EntityIcon entityType={entity.data.entityType}></EntityIcon>

              <div className="cluedIn_entityHeader_title">
                <span>{entity.name}</span>
              </div>
            </div>
            {descriptionContent}
          </div>
        </div>
        <EntityHeaderDetails entity={entity}/>
      </div>;
    }
    return (
      <div>{ content }</div>
    );
  }
}

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

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