ShareLinks.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import FacebookIcon from 'assets/images/icons/facebook.svg';
import TwitterIcon from 'assets/images/icons/twitter.svg';
import LinkedinIcon from 'assets/images/icons/linkedin.svg';

import * as s from './ShareLinks.module.scss';

import { mpLogShare } from '../../../../../utils/analytics';

export default class ShareLinks extends Component {
  static propTypes = {
    article: PropTypes.object.isRequired,
  };

  render() {
    const { article } = this.props;
    const url = typeof window !== 'undefined' ? window.location.toString() : '';
    const title = `mParticle - ${article.data.title}`;
    const tweet = `${title} ${url}`;

    return (
      <div className={s.shareArticle}>
        <div className={s.shareArticle__title}>Share</div>
        <div className={s.shareArticle__icons}>
          <a
            href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(tweet)}`}
            className={s.shareArticle__socialLink}
            target="_blank"
            onClick={() => mpLogShare('Twitter')}
          >
            <TwitterIcon className={s.shareArticle__icon} />
          </a>
          <a
            href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`}
            className={s.shareArticle__socialLink}
            target="_blank"
            onClick={() => mpLogShare('Facebook')}
          >
            <FacebookIcon className={s.shareArticle__icon} />
          </a>
          <a
            href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
              url
            )}&title=${encodeURIComponent(title)}&summary=${encodeURIComponent(
              article.data.intro_text
            )}&source=mParticle`}
            className={s.shareArticle__socialLink}
            target="_blank"
            onClick={() => mpLogShare('LinkedIn')}
          >
            <LinkedinIcon className={s.shareArticle__icon} />
          </a>
        </div>
      </div>
    );
  }
}