cluedin-widget/widget/entity/entityPersonList/index.jsx

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

import React, { Component } from 'react'
import Widget from '../../../core/components/widget.jsx'
import Overlay from '../../../core/components/overlay.jsx'
import registry from '../../../core/registry'
import config from '../../../core/config'
import { connect } from 'react-redux'
import { shouldFetchEntityIfNeeded } from '../../../core/action/entity'
import iso from '../../../iso'
import ProviderIcons from '../../../core/components/providerIcons.jsx'
import EntityIcon from '../../../core/components/EntityIcon.jsx'
import EntitySubject from '../../../core/components/EntitySubject.jsx'
import EntityLink from '../../../core/components/EntityLink.jsx'
import EntityProfileImageLink from '../../../core/components/EntityProfileImageLink.jsx'
import SocialMenu from '../../../core/components/SocialMenu.jsx'

const collectionHelper = iso.collection;

class EntityPersonList extends Component {

    componentWillMount() {
        //this.props.dispatch( shouldFetchEntityIfNeeded( 'xxx-x-x-xx-' ) );
    }

    render() {
        let content;
        let minHeight = 'auto';

        const { isFetchingEntity, entity } = this.props;

        var loading = false;

        var persons = [
            {
                id: 'xxx-xxx-xxx',
                name: 'Pierre Derval',
                profileUrl: 'https://pbs.twimg.com/profile_images/479720412322881537/-n4aS59W_400x400.png',
                data: { jobTitle: 'Master of UI', location: 'Brussels, Be' }
            },
            {
                id: 'xxx-xxx-xxx',
                name: 'Tim Ward',
                profileUrl: 'https://pbs.twimg.com/profile_images/449832948598980608/h-m2P8AY_400x400.jpeg',
                data: { jobTitle: 'Chief Joke Officer', location: 'Copenhagen, Dk' }
            },
            {
                id: 'xxx-xxx-xxx',
                name: 'Martin Hyldal',
                profileUrl: 'https://pbs.twimg.com/profile_images/75465135/DSC00440_small.jpg',
                data: { jobTitle: 'Wizzard', location: 'Copenhagen, Dk' }
            },
            {
                id: 'xxx-xxx-xxx',
                name: 'Raul Jimenez',
                profileUrl: 'https://i.ytimg.com/vi/8xQeZjtWlDE/maxresdefault.jpg',
                data: { jobTitle: 'QA & Training', location: 'London, UK' }
            }
        ];

        return (
            <Widget loading={loading} title="Employees linked to your Team" minHeight={minHeight}>
                <div className="cluedIn_entity_person_list">
                    { persons.map( ( person )=> {
                        return (
                            <div className="cluedIn_entity_person_list_item">
                                <div className="cluedIn_row">
                                    <div className="cluedIn_col s2">
                                        <EntityProfileImageLink entity={person}></EntityProfileImageLink>
                                    </div>
                                    <div className="cluedIn_col s10">
                                        <div className="cluedIn_entity_person_list_name">
                                            <EntityLink entity={person}></EntityLink>
                                        </div>
                                        <div className="cluedIn_entity_person_list_title">{person.data.jobTitle}</div>
                                        <div className="cluedIn_entity_person_list_address">
                                            <i className="fa fa-map-marker"></i><span>{person.data.location}</span>
                                        </div>
                                        <SocialMenu entity={person}></SocialMenu>
                                    </div>
                                </div>
                            </div>
                        );
                    } ) }
                </div>
            </Widget>
        );

    }
}

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

registry.register( 'entityPersonList', connect( select )( EntityPersonList ) );