Adding Disqus comments on post template

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',

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",

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;

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>