<commit_before>/* global document Routes */

// Modules
import React, { Component } from 'react';
import Relay from 'react-relay';
import ReactDOM from 'react-dom';
import { ListItem } from 'material-ui/List';
import RaisedButton from 'material-ui/RaisedButton';

// Route
import developerRoute from '../../routes/developerRoute.es6';
import LoadingComponent from '../shared/loadingComponent';
import ErrorComponent from '../shared/errorComponent';

// Child Components
import Github from '../shared/icons/github.es6';
import StackOverflow from '../shared/icons/stackoverflow.es6';
import Linkedin from '../shared/icons/linkedin.es6';
import Youtube from '../shared/icons/youtube.es6';

// Child Components
import GithubPopup from './popups/github.es6';
import StackOverflowPopup from './popups/stackoverflow.es6';
import LinkedinPopup from './popups/linkedin.es6';
import YoutubePopup from './popups/youtube.es6';

// Map icon component to string names
const iconsMap = new Map();
iconsMap.set('github', Github);
iconsMap.set('stackoverflow', StackOverflow);
iconsMap.set('linkedin', Linkedin);
iconsMap.set('youtube', Youtube);

// Map Popups
const popupsMap = new Map();
popupsMap.set('github', GithubPopup);
popupsMap.set('stackoverflow', StackOverflowPopup);
popupsMap.set('linkedin', LinkedinPopup);
popupsMap.set('youtube', YoutubePopup);

class Connection extends Component {
  constructor(props) {
    super(props);
    this.connectOrImport = this.connectOrImport.bind(this);
    const routesMap = new Map();
    routesMap.set('youtube', Routes.developer_google_oauth2_omniauth_authorize_path());
    routesMap.set('stackoverflow', Routes.developer_stackexchange_omniauth_authorize_path());
    routesMap.set('linkedin', Routes.developer_linkedin_omniauth_authorize_path());
    this.routesMap = routesMap;
  }

  connectOrImport() {
    const { connection, developer } = this.props;
    if (connection.connected) {
      developerRoute.params = {};
      developerRoute.params.id = developer.login;
      const ImportPopup = popupsMap.get(connection.provider);

      ReactDOM.render(
        <Relay.Renderer
          Container={ImportPopup}
          queryConfig={developerRoute}
          environment={Relay.Store}
          render={({ props, error, retry }) => {
            if (props) {
              return (
                <ImportPopup
                  {...props}
                />
              );
            } else if (error) {
              return <ErrorComponent retry={retry} />;
            }
            return <LoadingComponent />;
          }}
        />,
        document.getElementById('popups-container')
      );
    }
  }

  render() {
    const { connection } = this.props;
    const Icon = iconsMap.get(connection.provider);
    const routePath = this.routesMap.get(connection.provider);

    return (
      <div className="list-item">
        <ListItem
          disabled
          innerDivStyle={{ padding: '20px 56px 20px 72px' }}
          leftIcon={<div className={connection.provider}><Icon /></div>}
          rightIconButton={
            connection.connected ?
              <RaisedButton
                style={{ top: 10, right: 20 }}
                primary
                onClick={this.connectOrImport}
                label="Import"
              /> :
                <RaisedButton
                  style={{ top: 10, right: 20 }}
                  primary
                  href={routePath}
                  label="Connect"
                />
          }
          primaryText={connection.provider}
        />
      </div>
    );
  }
}

Connection.propTypes = {
  connection: React.PropTypes.object,
  developer: React.PropTypes.object,
};

const ConnectionContainer = Relay.createContainer(Connection, {
  fragments: {
    connection: () => Relay.QL`
      fragment on Connection {
        provider,
        connected,
      }
    `,
  },
});

export default ConnectionContainer;
<commit_msg>Switching to js sdk<commit_after>/* global document Routes SE $ */

// Modules
import React, { Component } from 'react';
import Relay from 'react-relay';
import ReactDOM from 'react-dom';
import { ListItem } from 'material-ui/List';
import RaisedButton from 'material-ui/RaisedButton';

// Route
import developerRoute from '../../routes/developerRoute.es6';
import LoadingComponent from '../shared/loadingComponent';
import ErrorComponent from '../shared/errorComponent';

// Child Components
import Github from '../shared/icons/github.es6';
import StackOverflow from '../shared/icons/stackoverflow.es6';
import Linkedin from '../shared/icons/linkedin.es6';
import Youtube from '../shared/icons/youtube.es6';

// Child Components
import GithubPopup from './popups/github.es6';
import StackOverflowPopup from './popups/stackoverflow.es6';
import LinkedinPopup from './popups/linkedin.es6';
import YoutubePopup from './popups/youtube.es6';

// Map icon component to string names
const iconsMap = new Map();
iconsMap.set('github', Github);
iconsMap.set('stackoverflow', StackOverflow);
iconsMap.set('linkedin', Linkedin);
iconsMap.set('youtube', Youtube);

// Map Popups
const popupsMap = new Map();
popupsMap.set('github', GithubPopup);
popupsMap.set('stackoverflow', StackOverflowPopup);
popupsMap.set('linkedin', LinkedinPopup);
popupsMap.set('youtube', YoutubePopup);

$.getScript('https://api.stackexchange.com/js/2.0/all.js', () => {
  SE.init({
    clientId: 8323,
    key: 'mUf0h5oYP)21lsCPOt5OGw((',
    channelUrl: 'http://hireables.dev/blank',
    complete: (data) => {
      console.log(data);
    },
  });
});

$.getScript('//platform.linkedin.com/in.js', () => {
  console.log('loaded');
});

const loginStackoverflow = () => {
  SE.authenticate({
    success: (data) => { console.log(data); },
    error: (data) => { console.log(data); },
    scope: ['read_inbox'],
    networkUsers: true,
  });
};

class Connection extends Component {
  constructor(props) {
    super(props);
    this.connectOrImport = this.connectOrImport.bind(this);
    const routesMap = new Map();
    routesMap.set('youtube', Routes.developer_google_oauth2_omniauth_authorize_path());
    routesMap.set('stackoverflow', '#');
    routesMap.set('linkedin', Routes.developer_linkedin_omniauth_authorize_path());
    this.routesMap = routesMap;
  }

  connectOrImport() {
    const { connection, developer } = this.props;
    if (connection.connected) {
      developerRoute.params = {};
      developerRoute.params.id = developer.login;
      const ImportPopup = popupsMap.get(connection.provider);

      ReactDOM.render(
        <Relay.Renderer
          Container={ImportPopup}
          queryConfig={developerRoute}
          environment={Relay.Store}
          render={({ props, error, retry }) => {
            if (props) {
              return (
                <ImportPopup
                  {...props}
                />
              );
            } else if (error) {
              return <ErrorComponent retry={retry} />;
            }
            return <LoadingComponent />;
          }}
        />,
        document.getElementById('popups-container')
      );
    }
  }

  render() {
    const { connection } = this.props;
    const Icon = iconsMap.get(connection.provider);
    const routePath = this.routesMap.get(connection.provider);

    return (
      <div className="list-item">
        <ListItem
          disabled
          innerDivStyle={{ padding: '20px 56px 20px 72px' }}
          leftIcon={<div className={connection.provider}><Icon /></div>}
          rightIconButton={
            connection.connected ?
              <RaisedButton
                style={{ top: 10, right: 20 }}
                primary
                onClick={this.connectOrImport}
                label="Import"
              /> :
                <RaisedButton
                  style={{ top: 10, right: 20 }}
                  primary
                  onClick={() => loginStackoverflow()}
                  href={routePath}
                  label="Connect"
                />
          }
          primaryText={connection.provider}
        />
      </div>
    );
  }
}

Connection.propTypes = {
  connection: React.PropTypes.object,
  developer: React.PropTypes.object,
};

const ConnectionContainer = Relay.createContainer(Connection, {
  fragments: {
    connection: () => Relay.QL`
      fragment on Connection {
        provider,
        connected,
      }
    `,
  },
});

export default ConnectionContainer;

{'fraction_non_alphanumeric': 0.1337753048419557, 'fraction_numerical': 0.0074582692080028415, 'mean_word_length': 2.5436241610738257, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 38, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5935306', 'n_tokens_mistral': 2433, 'n_tokens_neox': 2366, 'n_words': 487}