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 viewOriginLink;
    let editOriginalContent;
    let viewOriginalStyle = {
      float: 'right',
      marginRight: '15px',
      marginTop: '17px',
    };
    let wrapperTitleStyle = {};

    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) {
        // temporary HACK - replace + signs for %20 in links to original resource
        viewOriginalContent = (
          <div style={viewOriginalStyle}>
            <a target="__blank" href={entity.data.uri}>
              <RaisedButton label="View Original"/>
            </a>
          </div>);

        viewOriginLink = (
          <a target="__blank" href={entity.data.uri}>
            {entity.data.uri}
          </a>
        );

        wrapperTitleStyle.padding = 0;
      }

      if (entity.editUrl) {
        editOriginalContent = (
          <div style={viewOriginalStyle}>
            <a target="__blank" href={entity.editUrl}>
              <RaisedButton label="Edit Original"/>
            </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}/>
              {editOriginalContent}
              <div className="cluedIn_NameWithEntityIcon cluedIn_flex">
                <EntityIcon entityType={entity.data.entityType}/>
                <div style={wrapperTitleStyle} className="cluedIn_entityHeader_title">
                  <div className="cluedIn_entityHeader_title_span">{entity.name}</div>
                  <div className="cluedIn_entityHeader_title_viewOriginal">
                    <span>{viewOriginLink}</span>
                  </div>
                </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));