cluedin-widget/plugin/gmail/person/ProfileInfo.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, { PropTypes } from 'react';
import FullName from './FullName.jsx';
import { findFromKey } from '../../../core/helpers/properties.jsx';
import SocialMenu from '../../../core/components/entityRelated/SocialMenu.jsx';
import Gutter from '../../../core/components/generics/Gutter.jsx';
import { location } from '../../../core/config';
import { Link as LinkStyle } from '../styling';

const list = {
  listStyle: 'none',
  margin: '5px 0',
};

const ulStyle = {
  margin: '5px 0',
  padding: 0,
};

const ProfileInfo = (props) => {
  const {entity, email} = props;

  const jobtitleProp = findFromKey(entity.properties, 'jobtitle');
  const locationProp = findFromKey(entity.properties, 'location');
  const mobilenumberProp = findFromKey(entity.properties, 'mobilenumber');
  const orgnaizationProp = findFromKey(entity.properties, 'organizationname');
  const link = location.goToEntity(entity, true);
  const locationPropHtml = (locationProp && locationProp.value) ? (
    <li style={list}>{locationProp.value}</li>
  ) : void 0;

  const jobtitlePropHtml = (jobtitleProp && jobtitleProp.value) ? (<li style={list}>{jobtitleProp.value}</li>) : void 0;

  const organizationPropHtml = (orgnaizationProp && orgnaizationProp.value) ? (
    <li style={list}>{orgnaizationProp.value}</li>) : void 0;

  const mobilePropHtml = (mobilenumberProp && mobilenumberProp.value) ? (
    <li style={list}><i className="fa fa-mobile" aria-hidden="true"></i> {mobilenumberProp.value}</li>
  ) : void 0;

  return (
    <div>
      <a target="_blank" href={link}>
        <FullName fullName={entity.name}/>
      </a>
      <table>
        <tbody>
        <tr>
          <td style={{ padding: '0 10px 0 9px' }}>
            <a target="_blank" href={link}>
              <div
                style={{
                    borderRadius: '7px',
                    width: '80px',
                    height: '80px',
                    backgroundSize: 'cover',
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: '0px 0px' }}
              >
                <img
                  alt="Logo Profile"
                  style={{ width: '80px', height: '80px', borderRadius: '7px' }}
                  src={entity.logoUrl || 'https://s3-eu-west-1.amazonaws.com/cluedindev/a0.jpg'} width="80"
                  height="80"
                />
              </div>
            </a>
          </td>
          <td style={{ verticalAlign: 'top' }}>
            <ul style={ulStyle}>
              <li style={list}>{email}</li>
              {locationPropHtml}
            </ul>
          </td>
        </tr>
        </tbody>
      </table>
      <Gutter type="small" style={{ padding: '0 5px' }}>
        <ul style={ulStyle}>
          {jobtitlePropHtml}
          {organizationPropHtml}
        </ul>
      </Gutter>
      <Gutter type="small" style={{ padding: '0 5px' }}>
        <ul style={ulStyle}>
          {mobilePropHtml}
        </ul>
      </Gutter>
      <Gutter type="small" style={{ padding: '0 5px' }}>
        <SocialMenu social={entity.social} />
      </Gutter>
      <Gutter type="small" style={{ padding: '0 5px' }}>
        <a style={LinkStyle} target="_blank" href={link}>Visit Full Profile</a>
      </Gutter>
    </div>
  );
};

ProfileInfo.propTypes = {
  entity: PropTypes.object,
};

export default ProfileInfo;