cluedin-widget/plugin/gmail/App.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 { fetchEntityByEmail } from '../../core/action/entity';
import { connect } from 'react-redux';
import Sidebar from './structure/Sidebar.jsx';
import ProfileInfo from './person/ProfileInfo.jsx';
import SuggestedSearchForUser from './person/SuggestedSearchForUser.jsx';
import AggregationForEntity from './search/AggregationForEntity.jsx';
import iso from '../../iso';
import Gutter from '../../core/components/generics/Gutter.jsx';
import Theme from '../../theme';
import PoweredByCluedIn from './generics/PoweredByCluedIn.jsx';
import Alert from '../../core/components/generics/alert.jsx';
import { FormattedMessage } from 'react-intl';
import { fetchAllProvidersIfNeeded } from '../../core/action/provider';
import AddProvider from './providers/AddProvider';

class App extends Component {

  componentWillMount() {
    const { email } = this.props;

    this.props.dispatch(fetchEntityByEmail(email));
    this.props.dispatch(fetchAllProvidersIfNeeded());
  }

  render() {

    const {
      entity,
      isFetching,
      email,
      token,
      entityEmailNotFound,
      providers,
    } = this.props;

    let content;

    if (!token) {
      return (<div>Please Login to CluedIn</div>);
    }

    if (!email) {
      return (<div>Email Not correctly set.</div>);
    }

    const ChromePluginStyle = {
      top: 0,
      width: '220px',
      position: 'absolute',
      background: '#fff',
      bottom: 0,
    };

    if (entityEmailNotFound) {
      content = (<div>
        <Gutter size="small">
          <Alert type="info">
            CluedIn did not find any information related to <strong>{email}</strong>
          </Alert>
          <Gutter size="small" top={true}>
            Consider adding integrations to your CluedIn account.
          </Gutter>
          <h3>
            <FormattedMessage id="IntegrationReports.Title"/>
          </h3>
        </Gutter>
        <Gutter top={true}>
          <AddProvider isLink={true} providers={providers}/>
        </Gutter>
      </div>);
    }
    else if (isFetching) {
      content = (<div>Loading...</div>);
    } else {
      content = (
        <div>
          <ProfileInfo email={email} entity={entity}/>

          <Gutter type="small" left={true}>
            <Gutter top={true}>
              <h2 style={Theme.title.small}>Related Information</h2>
            </Gutter>
            <Gutter top={true} type="small">
              <AggregationForEntity entity={entity}/>
            </Gutter>
            <Gutter top={true}>
              <h2 style={Theme.title.small}>More information</h2>
            </Gutter>
            <Gutter top={true} type="small">
              <SuggestedSearchForUser entity={entity}/>
            </Gutter>
            <Gutter top={true}>
              <PoweredByCluedIn />
            </Gutter>
          </Gutter>
        </div>
      );
    }

    return (
      <div style={ChromePluginStyle}>
        <Sidebar>
          {content}
        </Sidebar>
      </div>
    );
  }
}

var select = (state) => {
  return {
    entity: state.entity.entityByEmail,
    isFetching: state.entity.isFetchingEntityByEmail,
    token: state.core.token,
    email: iso.browser.getParameterByName('email'),
    entityEmailNotFound: state.entity.entityEmailNotFound,
    providers: state.provider.allProviders,
  };
};

export default connect(select)(App);