cluedin-widget/core/components/entityRelated/SocialMenu.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 Radium from 'radium';
import Tooltip from 'rc-tooltip';
import {
  findFromKey,
  makeLinkedInLinkValue,
  makeTwitterLinkValue,
  makeLinkValue,
  makeInstagramLinkValue,
  makeGithubLinkValue,
  makeCrunchbaseLinkValue,
  makeDunsLinkValue,
  makeWikipediaLinkValue,
  makeAngelListLinkValue,
  makeLinkWithDirectValue
} from '../../helpers/properties.jsx';
import FontIcon from 'material-ui/FontIcon';

const linkStyle = {
  ':hover': {
    opacity: 0.6,
  },
  marginRight: '5px',
};

class SocialMenu extends Component {
  render() {
    const { social, entity } = this.props;
    const properties = entity.data ? (entity.data.properties || {}) : {};
    let websiteHtml;
    let twitterHtml;
    let facebookHtml;
    let linkedInHtml;
    let googlePlusHtml;
    let instagramHtml;
    let githubHtml;
    let crunchbaseHtml;
    let angelListHtml;
    let wikipediaHtml;
    let dunsHtml;
    let skypeHtml;
    let gChatHtml;
    let lyncHtml;

    if (!social || social.length === 0) {
      return (<span></span>);
    }

    let websiteProp = properties['property-organization.website'];
    let twitterProp = properties['property-user.social.twitter'];
    let linkedInProp = properties['property-user.social.linkedin'];
    let facebookProp = properties['property-user.social.facebook'];
    let crunchbaseProp = properties['property-user.social.crunchbase'];

    let googlePlusProp = findFromKey(social, 'googlePlus');
    let instagramProp = findFromKey(social, 'instagram');
    let githubProp = findFromKey(social, 'github');
    let angellistProp = findFromKey(social, 'angellist');
    let wikipediaProp = findFromKey(social, 'wikipedia');
    let dunsProp = findFromKey(social, 'duns');
    let skypeProp = findFromKey(social, 'skype');
    let lyncProp = findFromKey(social, 'lync');
    let gChatProp = findFromKey(social, 'gChat');

    if (skypeProp && skypeProp.value) {
      var skypeLink = skypeProp.value;

      skypeHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Skype</div>}
        >
          <a key="skypeLink" target="_blank" href={skypeLink} style={linkStyle}><i className="fa fa-skype"></i></a>
        </Tooltip>
      </li>);
    }

    if (lyncProp && lyncProp.value) {
      var lyncLink = lyncProp.value;

      lyncHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Lync</div>}
        >
          <a key="lyncLink" target="_blank" href={lyncLink} style={linkStyle}><i className="fa fa-commenting-o"></i></a>
        </Tooltip>
      </li>);
    }

    if (gChatProp && gChatProp.value) {
      var gChatLink = gChatProp.value;

      gChatHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Google</div>}
        >
          <a key="gChatLink" target="_blank" href={gChatLink} style={linkStyle}><i className="fa fa-google"></i></a>
        </Tooltip>
      </li>);
    }

    if (angellistProp && angellistProp.value) {
      var angelListLink = makeAngelListLinkValue(angellistProp);

      angelListHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Angel List</div>}
        >
          <a key="angelListLink" title="Angel List" target="_blank" href={angelListLink} style={linkStyle}>
            <FontIcon
              className="fa fa-angellist"
            />
          </a>
        </Tooltip>
      </li>);
    }

    if (wikipediaProp && wikipediaProp.value) {
      var wikipediaLink = makeWikipediaLinkValue(wikipediaProp);

      wikipediaHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Skype</div>}
        >
          <a key="wikipediaLink" title="Wikipedia" target="_blank" href={wikipediaLink} style={linkStyle}>
            <FontIcon
              className="fa fa-wikipedia-w"
            />
          </a>
        </Tooltip>
      </li>);
    }

    if (dunsProp && dunsProp.value) {
      var dunsLink = makeDunsLinkValue(dunsProp);

      dunsHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Duncs</div>}
        >
          <a key="duncs" target="_blank" href={dunsLink} style={linkStyle}><i className="fa fa-building-o"></i></a>
        </Tooltip>
      </li>);
    }

    if (googlePlusProp && googlePlusProp.value) {
      var googlePlusLink = makeGooglePlusLinkValue(googlePlusProp);

      googlePlusHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Google+</div>}
        >
          <a key="googlePlusLink" title="Google+" target="_blank" href={googlePlusLink} style={linkStyle}>
            <FontIcon
              className="fa fa-google-plus"
            />
          </a>
        </Tooltip>
      </li>);
    }

    if (instagramProp && instagramProp.value) {
      var instagramLink = makeInstagramLinkValue(instagramProp);

      instagramHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Instagram</div>}
        >
          <a key="instagramLink" title="Instagram" target="_blank" href={instagramLink} style={linkStyle}>
            <FontIcon
              className="fa fa-instagram"
            />
          </a>
        </Tooltip>
      </li>);
    }

    if (githubProp && githubProp.value) {
      var githubLink = makeGithubLinkValue(githubProp);

      githubHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Github</div>}
        >
          <a key="githubLink" title="Github" target="_blank" href={githubLink} style={linkStyle}>
            <FontIcon
              className="fa fa-github"
            />
          </a>
        </Tooltip>
      </li>);
    }

    if (crunchbaseProp) {
      var crunchbaseLink = makeCrunchbaseLinkValue(crunchbaseProp);

      crunchbaseHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Crunchbase</div>}
        >
          <a key="crunchBase" title="Crunchbase" target="_blank" href={crunchbaseLink} style={linkStyle}>
            <FontIcon
              className="fa fa-building"
            />
          </a>
        </Tooltip>
      </li>);
    }

    if (websiteProp) {
      var websiteLink = makeLinkWithDirectValue(websiteProp);

      websiteHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Website</div>}
        >
          <a key='webisteLink' title="Website" target="_blank" style={linkStyle} href={websiteLink}>
            <FontIcon className="fa fa-globe"/>
          </a>
        </Tooltip>
      </li>);
    }

    if (twitterProp) {
      var twitterLink = makeTwitterLinkValue(twitterProp);

      twitterHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Twitter</div>}
        >
          <a key="twitterLink" title="Twitter" target="_blank" style={linkStyle} href={twitterLink}>
            <FontIcon style={{color: '#4099FF'}}
                      className="fa fa-twitter"
            />
          </a>
        </Tooltip>
      </li>);
    }

    if (linkedInProp) {
      var linkedInLink = makeLinkedInLinkValue(linkedInProp);

      linkedInHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>LinkedIn</div>}
        >
          <a key="linkedInLink" title="LinkedIn" target="_blank" style={linkStyle} href={linkedInLink}>
            <FontIcon style={{color: '#0077B5'}}
                      className="fa fa-linkedin"
            />
          </a>
        </Tooltip>
      </li>);
    }

    if (facebookProp) {
      var facebookLink = makeLinkValue(facebookProp);

      facebookHtml = (<li>
        <Tooltip placement="bottom"
                 destroyTooltipOnHide={true}
                 overlay={<div>Facebook</div>}
        >
          <a key="facebookLink" title="Facebook" target="_blank" style={linkStyle} href={facebookLink}>
            <FontIcon style={{color: '#3b5998'}}
                      className="fa fa-facebook"
            />
          </a>
        </Tooltip>
      </li>);
    }

    return (
      <div className="cluedIn_social">
        <ul>
          {websiteHtml}
          {twitterHtml}
          {facebookHtml}
          {linkedInHtml}
          {angelListHtml}
          {wikipediaHtml}
          {dunsHtml}
          {googlePlusHtml}
          {instagramHtml}
          {githubHtml}
          {crunchbaseHtml}
          {skypeHtml}
          {lyncHtml}
          {gChatHtml}
        </ul>
      </div>
    );
  }
}
;

export default Radium(SocialMenu);