From d8c6888920fb20dc65500abca7801b96dca36188 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Fri, 18 Feb 2022 11:06:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5React-cusdis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Comment.js      | 24 ++++++++++++++----------
 components/CommonScript.js | 18 +++++++++---------
 components/Cusdis.js       | 30 ------------------------------
 package.json               |  1 +
 4 files changed, 24 insertions(+), 49 deletions(-)
 delete mode 100644 components/Cusdis.js

diff --git a/components/Comment.js b/components/Comment.js
index a1cc1c04..9b47d752 100644
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -3,6 +3,8 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import 'gitalk/dist/gitalk.css'
 import Tabs from '@/components/Tabs'
+import { ReactCusdis } from 'react-cusdis'
+import { useGlobal } from '@/lib/global'
 
 const GitalkComponent = dynamic(
   () => {
@@ -16,26 +18,29 @@ const UtterancesComponent = dynamic(
   },
   { ssr: false }
 )
-const CusdisComponent = dynamic(
-  () => {
-    return import('@/components/Cusdis')
-  },
-  { ssr: false }
-)
 
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
+  const { locale } = useGlobal()
   return (
     <div className='comment mt-5 px-5 text-gray-800 dark:text-gray-300'>
       <Tabs>
         {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
-          <CusdisComponent id={frontMatter.id} url={BLOG.LINK + router.asPath} title={frontMatter.title} />
+          <ReactCusdis
+            lang={locale.LOCALE.toLowerCase()}
+            attrs={{
+              host: BLOG.COMMENT_CUSDIS_HOST,
+              appId: BLOG.COMMENT_CUSDIS_APP_ID,
+              pageId: frontMatter.id,
+              pageTitle: frontMatter.title,
+              pageUrl: BLOG.LINK + router.asPath
+            }}
+          />
         </div>)}
 
         {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
           <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-        </div>
-        )}
+        </div>)}
 
         {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent
@@ -51,7 +56,6 @@ const Comment = ({ frontMatter }) => {
             }}
           />
         </div>)}
-
       </Tabs>
     </div>
   )
diff --git a/components/CommonScript.js b/components/CommonScript.js
index c812f920..ae924fbd 100644
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -85,12 +85,12 @@ const CommonScript = () => {
 
     {/* 谷歌统计 */}
     {BLOG.ANALYTICS_GOOGLE_ID && (<>
-        <script async
-                src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
-        />
-        <script async
-                dangerouslySetInnerHTML={{
-                  __html: `
+      <script async
+              src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
+      />
+      <script async
+              dangerouslySetInnerHTML={{
+                __html: `
                     window.dataLayer = window.dataLayer || [];
                     function gtag(){dataLayer.push(arguments);}
                     gtag('js', new Date());
@@ -98,9 +98,9 @@ const CommonScript = () => {
                       page_path: window.location.pathname,
                     });
                   `
-                }}
-        />
-      </>)}
+              }}
+      />
+    </>)}
   </>)
 }
 
diff --git a/components/Cusdis.js b/components/Cusdis.js
deleted file mode 100644
index 5ff88319..00000000
--- a/components/Cusdis.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import BLOG from '@/blog.config'
-import { useEffect } from 'react'
-const Cusdis = ({ id, url, title }) => {
-  useEffect(() => {
-    const script = document.createElement('script')
-    const anchor = document.getElementById('comments-cusdis')
-    script.setAttribute(
-      'src',
-      BLOG.COMMENT_CUSDIS_SCRIPT_SRC
-    )
-    script.setAttribute('async', true)
-    script.setAttribute('defer', true)
-    anchor.appendChild(script)
-  })
-  return (
-    <div id="comments-cusdis">
-      <div
-        id="cusdis_thread"
-        data-host={BLOG.COMMENT_CUSDIS_HOST}
-        data-app-id={BLOG.COMMENT_CUSDIS_APP_ID}
-        data-page-id={id}
-        data-page-url={url}
-        data-page-title={title}
-        lang={BLOG.LANG.toLowerCase()}
-      />
-    </div>
-  )
-}
-
-export default Cusdis
diff --git a/package.json b/package.json
index 4e3a6dd3..172ff577 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "qrcode.react": "^1.0.1",
     "react": "17.0.2",
     "react-cookies": "^0.1.1",
+    "react-cusdis": "^2.1.3",
     "react-dom": "17.0.2",
     "react-notion-x": "4.14.2",
     "smoothscroll-polyfill": "^0.4.4",