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 {
  findFromKey,
  makeLinkedInLinkValue,
  makeTwitterLinkValue,
  makeLinkValue,
  makeInstagramLinkValue,
  makeGithubLinkValue,
  makeCrunchbaseLinkValue,
  makeDunsLinkValue,
  makeWikipediaLinkValue,
  makeAngelListLinkValue
} from '../../helpers/properties.jsx';
import FontIcon from 'material-ui/FontIcon';

export default class SocialMenu extends Component {
  render() {
    const { social } = this.props;
    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>);
    }

    var websiteProp = findFromKey(social, 'website');
    var twitterProp = findFromKey(social, 'twitter');
    var linkedInProp = findFromKey(social, 'linkedin');
    var facebookProp = findFromKey(social, 'facebook');
    var googlePlusProp = findFromKey(social, 'googlePlus');
    var instagramProp = findFromKey(social, 'instagram');
    var githubProp = findFromKey(social, 'github');
    var crunchbaseProp = findFromKey(social, 'crunchbase');
    var angellistProp = findFromKey(social, 'angellist');
    var wikipediaProp = findFromKey(social, 'wikipedia');
    var dunsProp = findFromKey(social, 'duns');
    var skypeProp = findFromKey(social, 'skype');
    var lyncProp = findFromKey(social, 'lync');
    var gChatProp = findFromKey(social, 'gChat');

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

      skypeHtml = (<li>
        <a target="_blank" href={skypeLink} className="skype"><i className="fa fa-skype"></i></a>
      </li>);
    }

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

      lyncHtml = (<li>
        <a target="_blank" href={lyncLink} className="lync"><i className="fa fa-lync"></i></a>
      </li>);
    }

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

      gChatHtml = (<li>
        <a target="_blank" href={gChatLink} className="gChat"><i className="fa fa-google-chat"></i></a>
      </li>);
    }

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

      angelListHtml = (<li>
        <a title="Angel List" target="_blank" href={angelListLink} className="angellist">
          <FontIcon
            className="fa fa-angellist-w"
          />
        </a>
      </li>);
    }

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

      wikipediaHtml = (<li>
        <a title="Wikipedia" target="_blank" href={wikipediaLink} className="wikipedia">
          <FontIcon
            className="fa fa-wikipedia-w"
          />
        </a>
      </li>);
    }

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

      dunsHtml = (<li>
        <a target="_blank" href={dunsLink} className="duns"><i className="fa fa-duns"></i></a>
      </li>);
    }

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

      googlePlusHtml = (<li>
        <a title="Google+" target="_blank" href={googlePlusLink} className="googlePlus">
          <FontIcon
            className="fa fa-googleplus"
          />
        </a>
      </li>);
    }

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

      instagramHtml = (<li>
        <a title="Instagram" target="_blank" href={instagramLink} className="instagram">
          <FontIcon
            className="fa fa-instagram"
          />
        </a>
      </li>);
    }

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

      githubHtml = (<li>
        <a title="Github" target="_blank" href={githubLink} className="github">
          <FontIcon
            className="fa fa-github"
          />
        </a>
      </li>);
    }

    if (crunchbaseProp && crunchbaseProp.value) {
      var crunchbaseLink = makeCrunchbaseLinkValue(crunchbaseProp);

      crunchbaseHtml = (<li>
        <a title="Crunchbase" target="_blank" href={crunchbaseLink} className="crunchbase">
          <FontIcon
            className="fa fa-crunchbase"
          />
        </a>
      </li>);
    }

    if (websiteProp && websiteProp.value) {
      var websiteLink = makeLinkValue(websiteProp);

      websiteHtml = (<li>
        <a title="Website" target="_blank" href={websiteLink} className="website">
          <FontIcon
            className="fa fa-globe"
          />
        </a>
      </li>);
    }

    if (twitterProp && twitterProp.value) {
      var twitterLink = makeTwitterLinkValue(twitterProp);

      twitterHtml = (<li>
        <a title="Twitter" target="_blank" href={twitterLink} className="twitter">
          <FontIcon
            className="fa fa-twitter"
          />
        </a>
      </li>);
    }

    if (linkedInProp && linkedInProp.value) {
      var linkedInLink = makeLinkedInLinkValue(linkedInProp);

      linkedInHtml = (<li>
        <a title="LinkedIn" target="_blank" href={linkedInLink} className="linkedin">
          <FontIcon
            className="fa fa-linkedin"
          />
        </a>
      </li>);
    }

    if (facebookProp && facebookProp.value) {
      var facebookLink = makeLinkValue(facebookProp);

      facebookHtml = (<li>
        <a title="Facebook" target="_blank" href={facebookLink} className="facebook">
          <FontIcon
            className="fa fa-facebook"
          />
        </a>
      </li>);
    }

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