cluedin-widget/widget/person/personProfile/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 Widget from "../../../core/components/generics/widget.jsx";
import { register } from "../../../core/registry";
import config from "../../../core/config";
import { connect } from "react-redux";
import EntityLink from "../../../core/components/entityRelated/EntityLink.jsx";
import iso from "../../../iso";
import SocialMenu from "../../../core/components/entityRelated/SocialMenu.jsx";
import PropertyViewer from "../../../core/components/entityRelated/EntityPropertyViewer.jsx";
import { findFromKey, makeGoogleMapUrl } from "../../../core/helpers/properties.jsx";
import FollowWidget from "../../../core/components/entityRelated/FollowWidget.jsx";
import Loading from "../../../core/components/generics/loading.jsx";

const collectionHelper = iso.collection;

class PersonProfile extends Component {

    render() {
        let locationHtml;

        const { isFetchingEntity, entity } = this.props;

        if( !entity ) {
            var isLoading = true;
            var style     = {
                height: '400px'
            };

            return (<Widget loading={isLoading}>
                <div style={style}><Loading></Loading></div>
            </Widget>);
        }

        if( !entity.hasPreview ) {
            entity.logoUrl = config.image.defaultProfile;
        }

        var jobtitleProp    = findFromKey( entity.properties, 'jobtitle' );
        var locationProp    = findFromKey( entity.properties, 'location' );
        var emailProp       = findFromKey( entity.properties, 'email' );
        var phoneNumberProp = findFromKey( entity.properties, 'phonenumber' );

        var emailHtml = ( emailProp && emailProp.value ) ? (
            <div className="cluedIn_personProfile_withIcon cluedIn_personProfile_email">
                <a target="__blank" href={ "mailto:" + emailProp.value }><i
                    className="fa fa-envelope-o"></i><span>{emailProp.value}</span></a>
            </div>) : '';

        var jobTitleHtml = jobtitleProp ? (
            <div className="cluedIn_personProfile_jobTitle">{jobtitleProp.value}</div>) : '';

        var locationValue = locationProp ? locationProp.value : '';

        if( locationValue ) {
            locationHtml = (<div className="cluedIn_personProfile_withIcon cluedIn_personProfile_address">
                <a target="__blank" href={makeGoogleMapUrl(locationValue)}><i
                    className="fa fa-map-marker"></i><span>{locationValue || NA}</span></a>
            </div>)
        }

        var phoneNumberPropHtml = (phoneNumberProp && phoneNumberProp.value) ? (
            <div className="cluedIn_personProfile_withIcon cluedIn_personProfile_phone">
                <a target="__blank" href={ "tel:" + phoneNumberProp.value }><i
                    className="fa fa-phone"></i><span>{phoneNumberProp.value}</span></a>
            </div>) : '';

        return (<Widget>
            <div className="cluedIn_personProfile">
                <div className="cluedIn_personProfile_image">
                    <img className="cluedIn_img_responsive"
                         src={entity.logoUrl}/>
                </div>
                <div className="cluedIn_personProfile_name">
                    <EntityLink entity={entity}></EntityLink>
                </div>
                {jobTitleHtml}
                {emailHtml}
                {phoneNumberPropHtml}
                {locationHtml}
                <div className="cluedIn_personProfile_social">
                    <SocialMenu social={entity.social}></SocialMenu>
                </div>
                <FollowWidget entity={entity}></FollowWidget>
                <PropertyViewer entity={entity}></PropertyViewer>
            </div>
        </Widget>);
    }
}

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

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