From a0fcc33115da88276bd764c329dae8eb72637323 Mon Sep 17 00:00:00 2001
From: Marcela Bomfim <marcela.bomfim@lojaskd.com.br>
Date: Tue, 10 Oct 2017 11:53:14 -0300
Subject: [PATCH] Adding Disqus comments on post template

---
 gatsby-config.js                             |  1 +
 package.json                                 | 11 +++--
 src/components/Disqus/Disqus.jsx             | 49 ++++++++++++++++++++
 src/components/PostTemplateDetails/index.jsx |  8 ++++
 4 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Disqus/Disqus.jsx

diff --git a/gatsby-config.js b/gatsby-config.js
index 2923f5d..378c3b8 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -4,6 +4,7 @@ module.exports = {
     title: 'Blog by John Doe',
     subtitle: 'Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.',
     copyright: '© All rights reserved.',
+    disqusShortname: '',
     menu: [
       {
         label: 'Articles',
diff --git a/package.json b/package.json
index d93e051..13c04b2 100644
--- a/package.json
+++ b/package.json
@@ -27,15 +27,15 @@
     "gatsby": "^1.8.12",
     "gatsby-link": "^1.6.8",
     "gatsby-plugin-catch-links": "^1.0.5",
+    "gatsby-plugin-feed": "^1.3.5",
     "gatsby-plugin-google-analytics": "^1.0.4",
     "gatsby-plugin-manifest": "^1.0.4",
-    "gatsby-plugin-postcss-sass": "^1.0.3",
-    "gatsby-plugin-feed": "^1.3.5",
-    "gatsby-plugin-sitemap": "^1.2.2",
     "gatsby-plugin-offline": "^1.0.4",
+    "gatsby-plugin-postcss-sass": "^1.0.3",
     "gatsby-plugin-preact": "^1.0.0",
     "gatsby-plugin-react-helmet": "^1.0.3",
     "gatsby-plugin-sharp": "^1.6.2",
+    "gatsby-plugin-sitemap": "^1.2.2",
     "gatsby-remark-copy-linked-files": "^1.5.2",
     "gatsby-remark-images": "^1.5.4",
     "gatsby-remark-prismjs": "^1.2.1",
@@ -44,8 +44,9 @@
     "gatsby-source-filesystem": "^1.4.3",
     "gatsby-transformer-remark": "^1.7.1",
     "gatsby-transformer-sharp": "^1.6.1",
-    "typeface-roboto": "latest",
-    "lodash": "^4.17.2"
+    "lodash": "^4.17.2",
+    "react-disqus-comments": "^1.1.0",
+    "typeface-roboto": "latest"
   },
   "devDependencies": {
     "postcss-pxtorem": "^4.0.1",
diff --git a/src/components/Disqus/Disqus.jsx b/src/components/Disqus/Disqus.jsx
new file mode 100644
index 0000000..632cc8d
--- /dev/null
+++ b/src/components/Disqus/Disqus.jsx
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactDisqusComments from 'react-disqus-comments';
+import config from '../../../gatsby-config';
+
+class Disqus extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      toasts: []
+    };
+    this.notifyAboutComment = this.notifyAboutComment.bind(this);
+    this.onSnackbarDismiss = this.onSnackbarDismiss.bind(this);
+  }
+
+  onSnackbarDismiss() {
+    const [, ...toasts] = this.state.toasts;
+    this.setState({ toasts });
+  }
+  notifyAboutComment() {
+    const toasts = this.state.toasts.slice();
+    toasts.push({ text: 'New comment available!!' });
+    this.setState({ toasts });
+  }
+  render() {
+    const { postNode } = this.props;
+    if (!config.siteMetadata.disqusShortname) {
+      return null;
+    }
+    const post = postNode.frontmatter;
+    const url = config.siteMetadata.url + postNode.fields.slug;
+    return (
+      <ReactDisqusComments
+        shortname={config.siteMetadata.disqusShortname}
+        identifier={post.title}
+        title={post.title}
+        url={url}
+        category_id={post.category_id}
+        onNewComment={this.notifyAboutComment}
+      />
+    );
+  }
+}
+
+Disqus.propTypes = {
+  postNode: PropTypes.object.isRequired
+};
+
+export default Disqus;
diff --git a/src/components/PostTemplateDetails/index.jsx b/src/components/PostTemplateDetails/index.jsx
index 6620951..3bc4e05 100644
--- a/src/components/PostTemplateDetails/index.jsx
+++ b/src/components/PostTemplateDetails/index.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'gatsby-link';
 import moment from 'moment';
+import Disqus from '../Disqus/Disqus';
 import './style.scss';
 
 class PostTemplateDetails extends React.Component {
@@ -30,6 +31,12 @@ class PostTemplateDetails extends React.Component {
       </div>
     );
 
+    const commentsBlock = (
+      <div>
+        <Disqus postNode={post} />
+      </div>
+    );
+
     return (
       <div>
         {homeBlock}
@@ -50,6 +57,7 @@ class PostTemplateDetails extends React.Component {
                 <br /> <strong>{author.name}</strong> on Twitter
               </a>
             </p>
+            {commentsBlock}
           </div>
         </div>
       </div>