LinkedInLogin.jsx

import React, {PropTypes} from 'react';

function linkedCb() {
    this.setState({isApiLoaded: true, isAuthorize: IN.User.isAuthorized()});
}

const sessionStorageKey = 'linkedInLogin';

class LinkedInLogin extends React.Component {

    static propTypes = {
        display: PropTypes.bool,
        onSuccessLogin: PropTypes.func,
        onErrorLogin: PropTypes.func,
        onLogOutCallBack: PropTypes.func,
        onLoadCallBack: PropTypes.func,
        apiKey: PropTypes.string,
        isAuthorize: PropTypes.bool,
        cssClass: PropTypes.string,
        isApiLoaded: PropTypes.func
    };

    static defaultProps = {
        display: 'block',
        isAuthorize: true,
        apiKey: 'apiKey',
        onLoadCallBack: linkedCb,
        cssClass: 'linkedInLogin'
    };

    constructor(props) {
        super(props);
        this.state = {
            isApiLoaded: false,
            isAuthorize: false
        }
    }

    isApiLoaded() {
        return this.props.isApiLoaded(this.state.isApiLoaded)
    }

    componentDidMount() {
        if (!window.IN && !document.getElementById('linked-in-login')) {
            const head = document.getElementsByTagName('head')[0];

            window.linkedCb = this.props.onLoadCallBack.bind(this);

            const linkedInScript = document.createElement("script");
            linkedInScript.id = 'linked-in-login';
            linkedInScript.type = "text/javascript";
            linkedInScript.src = "http://platform.linkedin.com/in.js";
            linkedInScript.innerHTML = `api_key: ${this.props.apiKey}
                                    \n authorize: ${this.props.isAuthorize}
                                    \n onLoad: linkedCb`;

            head.appendChild(linkedInScript);
        } else {
            this.setState({isApiLoaded: true});
        }
    }

    signInWithLinkedIn() {
        if (this.state.isApiLoaded) {
            IN.User.authorize(this.linkedInAuthCallBack, this);
        } else {
            console.log('api is not available yet');
        }
    }

    signOutWithLinedIn() {
        if (this.state.isApiLoaded) {
            IN.User.logout(this.logOutCallBack, this);
        } else {
            console.log('api is not available yet');
        }
    }

    logOutCallBack(response) {
        if (response) {
            this.setState({isAuthorize: false});
            window.sessionStorage.removeItem(sessionStorageKey);
            if (typeof this.props.onLogOutCallBack === 'function') this.props.onLogOutCallBack(response);
        }
    }

    onAuthorizeSuccess(data) {
        this.setState({isAuthorize: true});
        window.sessionStorage.setItem(sessionStorageKey, JSON.stringify(data));
        if (typeof this.props.onSuccessLogin === 'function') this.props.onSuccessLogin(data);
    }

    onAuthorizeError(error) {
        console.log(error);
        if (typeof this.props.onErrorLogin === 'function') this.props.onErrorLogin(error);
    }

    linkedInAuthCallBack() {
        IN.API.Raw('people/~:(id,first-name,last-name,email-address,picture-url,public-profile-url)')
            .result(this.onAuthorizeSuccess.bind(this))
            .error(this.onAuthorizeError.bind(this))
    }

    render() {
        if (!this.props.display) return (<noscript />);
        if (!this.state.isAuthorize) {
            return (<button className="linkedInLogin"
                            onClick={this.signInWithLinkedIn.bind(this)}/>)
        } else {
            return (<button className="linkedInLogin"
                            onClick={this.signOutWithLinedIn.bind(this)}/>)
        }
    }
}

export default LinkedInLogin;