cluedin-widget/core/components/entities/personDetailed.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 EntityLink from "../entityRelated/EntityLink.jsx";
import EntityProfileImageLink from "../entityRelated/EntityProfileImageLink.jsx";
import SocialMenu from "../entityRelated/SocialMenu.jsx";
import { findFromKey } from "../../helpers/properties.jsx";
const NA = 'N/A';
export default class PersonDetailed extends Component {

    render() {
        const { entity } = this.props;
        let locationHtml;

        var jobtitleProp = findFromKey( entity.properties, 'jobtitle' );
        var locationProp = findFromKey( entity.properties, 'location' );

        var jobtitleValue = jobtitleProp ? jobtitleProp.value : NA;
        var locationValue = locationProp ? locationProp.value : NA;

        if( locationValue ) {
            locationHtml = (<div className="cluedIn_entity_person_list_address">
                <i className="fa fa-map-marker"></i><span>{locationValue || NA}</span>
            </div>)
        }

        return (<div className="cluedIn_entity_person_list_item">
            <div className="cluedIn_row">
                <div className="cluedIn_col s2">
                    <EntityProfileImageLink entity={entity}></EntityProfileImageLink>
                </div>
                <div className="cluedIn_col s10">
                    <div className="cluedIn_entity_person_list_name">
                        <EntityLink entity={entity}></EntityLink>
                    </div>
                    <div className="cluedIn_entity_person_list_title">{jobtitleValue}</div>
                    {locationHtml}
                    <SocialMenu social={entity.social}></SocialMenu>
                </div>
            </div>
        </div>);
    }
}