terrafarm/gatsby-casper-demo

View on GitHub
src/components/PostShare/PostShare.jsx

Summary

Maintainability
A
1 hr
Test Coverage
import React from "react";
import { ShareButtons } from "react-share";
import "./PostShare.css";

const formatSiteUrl = (siteUrl, pathPrefix, path) =>
  siteUrl + (pathPrefix === "/" ? "" : pathPrefix) + path;

// const getCover = post => {
//   const { cover } = post;
//   if (cover && cover.childImageSharp && cover.childImageSharp.original) {
//     return cover.childImageSharp.original.src;
//   }
//   return "";
// };

class PostShare extends React.Component {
  render() {
    const { postNode, postPath, config } = this.props;
    const post = postNode.frontmatter;
    const url = formatSiteUrl(config.siteUrl, config.pathPrefix, postPath);

    const {
      FacebookShareButton,
      GooglePlusShareButton,
      // PinterestShareButton,
      TwitterShareButton
    } = ShareButtons;

    return (
      <section className="share">
        <h4>Share this post</h4>
        <div style={{ display: "flex" }}>
          <TwitterShareButton url={url} title={post.title}>
            <a className="icon-twitter" style={{ fontSize: "1.4em" }}>
              <span className="hidden">Twitter</span>
            </a>
          </TwitterShareButton>
          <FacebookShareButton url={url} quote={post.title}>
            <a className="icon-facebook" style={{ fontSize: "1.4em" }}>
              <span className="hidden">Facebook</span>
            </a>
          </FacebookShareButton>
          {/* <PinterestShareButton */}
          {/* url={url} */}
          {/* media={formatSiteUrl( */}
          {/* config.siteUrl, */}
          {/* config.pathPrefix, */}
          {/* getCover(post) */}
          {/* )} */}
          {/* description={postNode.excerpt} */}
          {/* > */}
          {/* <a className="icon-pinterest" style={{ fontSize: "1.4em" }}> */}
          {/* <span className="hidden">Pinterest</span> */}
          {/* </a> */}
          {/* </PinterestShareButton> */}
          <GooglePlusShareButton url={url}>
            <a className="icon-google-plus" style={{ fontSize: "1.4em" }}>
              <span className="hidden">Google+</span>
            </a>
          </GooglePlusShareButton>
        </div>
      </section>
    );
  }
}

export default PostShare;