cluedin-widget/widget/person/personProfile/index.jsx

This is the project for creating and managing widgets in CluedIn.

import React, { Component } from 'react';
import Widget from '../../../core/components/generics/widget.jsx';
import Overlay from '../../../core/components/generics/overlay.jsx';
import NoEntities from '../../../core/components/entityRelated/NoEntities.jsx';
import registry 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
    };
}

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