cluedin-widget/plugin/gmail/providers/AllProviderListRow.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 config from '../../../core/config';
import iso from '../../../iso';
import { FormattedMessage } from 'react-intl';
import theme from '../../../theme';
import Theme from '../../../theme';
import radium from 'radium';

let providersConfig = config.providers;

class AllProviderListRow extends Component {

  onClick() {
    const { provider, onProviderClick } = this.props;

    onProviderClick(iso.provider.formatNameToConfigName(provider.Name), provider.Id);
  }

  render() {
    const { provider, isLink } = this.props;

    let providerConfig = providersConfig[iso.provider.formatNameToConfigName(provider.Name)];

    if (!providerConfig) {
      console.log('wrong provider ' + provider.Name);
    }

    let providerUrl = providerConfig.icon;
    let linkContent;
    let link = config.location.gotToAppProvider([provider.Name, provider.Id]);

    if (isLink) {
      linkContent = (
        <a href={link} target="_blank" style={[Theme.buttons.main, Theme.buttons.primary]}>
          <FormattedMessage id="AllProviderListRow.Add"></FormattedMessage>
        </a>
      );
    } else {
      linkContent = (
        <a onClick={this.onClick.bind(this)} style={[Theme.buttons.main, Theme.buttons.primary]}>
          <FormattedMessage id="AllProviderListRow.Add"></FormattedMessage>
        </a>
      );
    }

    return (<li key={provider.Id} style={theme.list.integrationList.listItem}>
      <img style={theme.list.integrationList.smallLogo} alt={provider.Name} src={providerUrl}/>
      <h4 style={theme.list.integrationList.text}>{provider.Name}</h4>
      <div style={theme.list.integrationList.action}>
        {linkContent}
      </div>
    </li>);
  }
}

export default radium(AllProviderListRow);