cluedin-widget/core/components/entityRelated/EntityHeaderDetails.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 { FormattedMessage } from "react-intl";

export default class EntityHeaderDetails extends Component {
    render() {
        const { entity } = this.props;
        
        let propertiesHTML;

        
        let modifiedDateHTML = entity.data.modifiedDateFormatted ? <li>
            <span className="cluedIn_stats_title">
                <FormattedMessage id="EntityHeaderDetails.LastModified" />
            </span>
            <span className="cluedIn_stats_text">
                {entity.data.modifiedDateFormatted}                
            </span>
        </li> : null;

        
        let createdDateHTML = entity.data.createdDateFormatted ? <li>
            <span className="cluedIn_stats_title">
                <FormattedMessage id="EntityHeaderDetails.Created" />
            </span>
            <span className="cluedIn_stats_text">
                {entity.data.createdDateFormatted}
            </span>
        </li> : null;

        let author = entity.data.authors && entity.data.authors.length > 0 ?
            entity.data.authors.slice(0, 1) : null; 

        let authorsHTML = author && author.name ? <li>
            <span className="cluedIn_stats_title">
                <FormattedMessage id="EntityHeaderDetails.Author" />
            </span>
            <span className="cluedIn_stats_text">
                {author.name}
                {entity.data.authors.length > 1 ? " et al" : ""}
            </span>
        </li> : null;

        let { lastChangedBy } = entity.data;
        
        let lastModifiedHTML = lastChangedBy && lastChangedBy.name ? <li>
            <span className="cluedIn_stats_title">
                <FormattedMessage id="EntityHeaderDetails.LastModifiedBy" />
            </span>
            <span className="cluedIn_stats_text">
                {lastChangedBy.name}
            </span>
        </li> : null;

        
         return modifiedDateHTML || authorsHTML || lastModifiedHTML || createdDateHTML ?
             <div className="cluedIn_entityStats">
                 <ul>
                    {createdDateHTML}
                    {authorsHTML}
                    {modifiedDateHTML}
                    {lastModifiedHTML}
                 </ul>
             </div> : null;
    }
}