From 839b708fdd22c23682dd2ee1005568274a2706a7 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Thu, 23 Jul 2020 18:27:16 +0300
Subject: [PATCH] gitalk to snippet page

---
 src/components/Article/Article.js | 26 ++++++++++++++------------
 src/components/Snippet/Snippet.js | 27 +++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/Article/Article.js b/src/components/Article/Article.js
index d4377d2..602237b 100644
--- a/src/components/Article/Article.js
+++ b/src/components/Article/Article.js
@@ -111,18 +111,20 @@ const Article = ({
           <div className="article-comments">
             <div className="article-comments__heading">
               <h2>Комментарии</h2>
-              {readyComments ? <GitalkComponent
-                options={{
-                  clientID,
-                  clientSecret,
-                  repo,
-                  owner,
-                  admin: admin.split(","),
-                  language: 'ru',
-                  id: pathname,
-                  title: title,
-                }}
-              /> : null}
+              {readyComments ? (
+                <GitalkComponent
+                  options={{
+                    clientID,
+                    clientSecret,
+                    repo,
+                    owner,
+                    admin: admin.split(","),
+                    language: "ru",
+                    id: pathname,
+                    title: title,
+                  }}
+                />
+              ) : null}
             </div>
             <div className="article-comments__content"></div>
           </div>
diff --git a/src/components/Snippet/Snippet.js b/src/components/Snippet/Snippet.js
index 3e47cd7..c059b46 100644
--- a/src/components/Snippet/Snippet.js
+++ b/src/components/Snippet/Snippet.js
@@ -1,7 +1,20 @@
 import React from "react"
 import PropTypes from "prop-types"
+import { useLocation } from "@reach/router"
+import GitalkComponent from "gitalk/dist/gitalk-component"
+import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery"
 
 const Snippet = ({ data: { description, title, date }, html }) => {
+  const {
+    siteMetadata: {
+      gitalk: { clientID, clientSecret, repo, owner, admin },
+    },
+  } = useSiteMetadataQuery()
+  const { pathname } = useLocation()
+  const [readyComments, setReadyComments] = React.useState(false)
+
+  React.useEffect(() => setReadyComments(true), [setReadyComments])
+
   return (
     <>
       <div className="snippet">
@@ -19,6 +32,20 @@ const Snippet = ({ data: { description, title, date }, html }) => {
           <div className="snippet-comments">
             <div className="snippet-comments__heading">
               <h2>Комментарии</h2>
+              {readyComments ? (
+                <GitalkComponent
+                  options={{
+                    clientID,
+                    clientSecret,
+                    repo,
+                    owner,
+                    admin: admin.split(","),
+                    language: "ru",
+                    id: pathname,
+                    title: title,
+                  }}
+                />
+              ) : null}
             </div>
             <div className="snippet-comments__content"></div>
           </div>