cluedin-widget/widget/entity/entityOrganizationHeader/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 registry from '../../../core/registry';
import config from '../../../core/config';
import { connect } from 'react-redux';
import iso from '../../../iso';
import { findFromKey } from '../../../core/helpers/properties.jsx';
import SocialMenu from '../../../core/components/entityRelated/SocialMenu.jsx';
import FollowWidget from '../../../core/components/entityRelated/FollowWidget.jsx';
import Loading from '../../../core/components/generics/loading.jsx';

const maxScoreForCompany = 10;
const collectionHelper   = iso.collection;

class EntityOrganizationHeader extends Component {

    render() {
        let content;
        let minHeight = 'auto';
        let score     = 0; //number of properties needed to have Full Widgets
        let needToPlugInProvider;
        let industryHtml;
        let nbEmployeeHtml;
        let revenueHtml;
        let locationHtml;
        let statsHtml;
        let tickerHtml;
        let widgetContentStyle = {};
        let withStatClassName  = '';

        const { isFetchingEntity, entity } = this.props;

        if ( isFetchingEntity ) {
            var minHeightStyle = {
                height: '150px'
            };

            content = <div style={minHeightStyle}><Loading></Loading></div>;
        } else {

            var industryProp     = findFromKey( entity.properties, 'industry' );
            var nbEmployeeProp   = findFromKey( entity.properties, 'nbemployee' );
            var revenueProp      = findFromKey( entity.properties, 'revenue' );
            var locationProp     = findFromKey( entity.properties, 'location' );
            var tickerSymbolProp = findFromKey( entity.properties, 'tickersymbol' );

            if ( industryProp && industryProp.value ) {
                score += 1;
                industryHtml = (<div className="cluedIn_entityHeader_industry">
                    {industryProp.value}
                </div>);
            }

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

            if ( nbEmployeeProp && nbEmployeeProp.value ) {
                score += 1;
                nbEmployeeHtml = (<li>
                    <span className="cluedIn_stats_title">{nbEmployeeProp.displayName}</span>
                    <span className="cluedIn_stats_number">{nbEmployeeProp.value}</span>
                </li>);
            }

            if ( locationProp && locationProp.value ) {
                score += 1;
                locationHtml = (<div className="cluedIn_entityHeader_address">
                    <a><i className="fa fa-map-marker"></i> {locationProp.value}</a>
                </div>);
            }

            if ( tickerSymbolProp && tickerSymbolProp.value ) {
                score += 1;
                tickerHtml = ( <li>
                    <span className="cluedIn_stats_title">{tickerSymbolProp.displayName}</span>
                        <span className="cluedIn_stats_number">
                            <a target="_blank"
                               href={`http://finance.yahoo.com/q?s=${tickerSymbolProp.value}`}>{tickerSymbolProp.value}</a>
                        </span>
                </li>);
            }

            if ( revenueProp && revenueProp.value ) {
                score += 1;
                // <span className="cluedIn_stats_currency">$</span>
                //<span className="cluedIn_stats_unit">M</span>
                //<span className="cluedIn_stats_period">/year</span>

                revenueHtml = ( <li>
                    <span className="cluedIn_stats_title">revenueProp.displayName</span>
                        <span className="cluedIn_stats_number">
                            {revenueProp.value}
                        </span>
                </li>);
            }

            if ( !nbEmployeeProp.value ) {
                score -= 1
            }

            score += entity.social.length;

            if ( score < (maxScoreForCompany / 2) ) {
                needToPlugInProvider = (
                    <div className="cluedIn_alert cluedIn_alert_info cluedIn_m-t"><i className="fa fa-info-circle"></i>There
                        are few
                        information available, consider
                        plugging in provider such as a CRM </div>);
            }

            if ( nbEmployeeHtml || revenueHtml ) {
                statsHtml = <div className="cluedIn_entityStats">
                    <div className="cluedIn_row">
                        <div className="cluedIn_col s8 offset-s2">
                            <ul>
                                {tickerHtml}
                                {nbEmployeeHtml}
                                {revenueHtml}
                            </ul>
                        </div>
                    </div>
                </div>
            }

            if ( statsHtml ) {
                withStatClassName = 'cluedIn_withStats';
            }

            content = (
                <div className={withStatClassName}>
                    <div className="cluedIn_row">
                        <div className="cluedIn_col s2">
                            <div className="cluedIn_entityHeader_logo">
                                <img className="cluedIn_img_responsive"
                                     src={entity.logoUrl}/>
                            </div>
                        </div>
                        <div className="cluedIn_col s10">
                            <FollowWidget entity={entity}></FollowWidget>

                            <div className="cluedIn_entityHeader_title">
                                <span>{entity.name}</span>
                            </div>
                            {industryHtml}
                            {locationHtml}
                            <div className="cluedIn_entityHeader_social">
                                <SocialMenu social={entity.social}></SocialMenu>
                            </div>
                            {needToPlugInProvider}
                        </div>
                    </div>
                    {statsHtml}
                </div>
            );
        }

        return (
            <div style={widgetContentStyle} className="cluedIn_entityHeader">{ content }</div>
        );
    }
}

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

registry.register( 'entityOrganizationHeader', connect( select )( EntityOrganizationHeader ) );