Adding Disqus comments on post template

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>