40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
import React, { useState } from 'react'
|
|
|
|
import siteMetadata from '@/data/siteMetadata'
|
|
|
|
const Utterances = ({ issueTerm }) => {
|
|
const [enableLoadComments, setEnabledLoadComments] = useState(true)
|
|
|
|
const COMMENTS_ID = 'comments-container'
|
|
|
|
function LoadComments() {
|
|
setEnabledLoadComments(false)
|
|
const script = document.createElement('script')
|
|
script.src = 'https://utteranc.es/client.js'
|
|
script.setAttribute('repo', siteMetadata.comment.utterancesConfig.repo)
|
|
script.setAttribute('issue-term', issueTerm)
|
|
script.setAttribute('label', siteMetadata.comment.utterancesConfig.label)
|
|
script.setAttribute('theme', siteMetadata.comment.utterancesConfig.theme)
|
|
script.setAttribute('crossorigin', 'anonymous')
|
|
script.async = true
|
|
|
|
const comments = document.getElementById(COMMENTS_ID)
|
|
if (comments) comments.appendChild(script)
|
|
|
|
return () => {
|
|
const comments = document.getElementById(COMMENTS_ID)
|
|
if (comments) comments.innerHTML = ''
|
|
}
|
|
}
|
|
|
|
// Added `relative` to fix a weird bug with `utterances-frame` position
|
|
return (
|
|
<div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
|
|
{enableLoadComments && <button onClick={LoadComments}>Load Comments</button>}
|
|
<div className="utterances-frame relative" id={COMMENTS_ID} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Utterances
|