share.js

import React from 'react';
// import ReactGA from 'react-ga';
import { FaTwitter, FaFacebookF, FaLinkedinIn } from 'react-icons/fa';
import {
  FacebookShareButton,
  TwitterShareButton,
  LinkedinShareButton,
} from 'react-share';
import { css } from '@emotion/core';

// import { GA } from '../constants/analytics';

const SHARE_BASE_URL = 'https://www.moodsfm.com/';

export function Share({ url, title, trackingConfig }) {
  const cleanedUrl = url.startsWith('/') ? url.substring(1) : url;
  const permalink = `${SHARE_BASE_URL}/${cleanedUrl}`;

  return (
    <div css={styles.wrapper}>
      <TwitterShareButton
        onClick={() =>
          ReactGA.event({
            ...trackingConfig,
            label: GA.LABELS.SOCIAL.TWITTER,
          })
        }
        style={{ marginRight: SPACING.spacing5 }}
        url={permalink}
        title={title}
        via="devsindepth"
      >
        <FaTwitter size="1.6rem" />
      </TwitterShareButton>

      <FacebookShareButton
        onClick={() =>
          // ReactGA.event({
          //  ...trackingConfig,
          //  label: GA.LABELS.SOCIAL.FACEBOOK,
          //})
        }
        style={{ marginRight: '2rem' }}
        url={permalink}
      >
        <FaFacebookF size="1.6rem" />
      </FacebookShareButton>

      <LinkedinShareButton
        onClick={() =>
          ReactGA.event({
            ...trackingConfig,
            label: GA.LABELS.SOCIAL.LINKEDIN,
          })
        }
        title={title}
        summary={title}
        url={permalink}
      >
        <FaLinkedinIn size="1.6rem" />
      </LinkedinShareButton>
    </div>
  );
}

const styles = {
  wrapper: css`
    button {
      cursor: pointer;
    }
  `,
};