1- import React , { useEffect } from 'react' ;
1+ import React , { createRef , useEffect , useRef } from 'react' ;
22
33const src = 'https://utteranc.es/client.js' ;
44const branch = 'master' ;
55
6- export const Utterances = ( { repo, theme } ) => {
7- const rootElm = React . createRef ( ) ;
6+ export const Utterances = ( { repo, path } ) => {
7+ const rootElm = createRef ( ) ;
8+ const isUtterancesLoaded = useRef ( false ) ;
89
910 useEffect ( ( ) => {
10- if ( ! rootElm . current || rootElm . current . childNodes . length !== 0 ) return ;
11+ if ( ! rootElm . current || isUtterancesLoaded . current ) return ;
12+ const storedIsDarkMode = localStorage . getItem ( 'isDarkMode' ) ;
13+ 1114 const utterances = document . createElement ( 'script' ) ;
1215 const utterancesConfig = {
1316 src,
1417 repo,
1518 branch,
16- theme : theme === 'light' ? 'github-light ' : 'photon-dark ' ,
19+ theme : JSON . parse ( storedIsDarkMode ) ? 'photon-dark ' : 'github-light ' ,
1720 label : 'comment' ,
1821 async : true ,
1922 'issue-term' : 'pathname' ,
@@ -24,7 +27,8 @@ export const Utterances = ({ repo, theme }) => {
2427 utterances . setAttribute ( configKey , utterancesConfig [ configKey ] ) ;
2528 } ) ;
2629 rootElm . current . appendChild ( utterances ) ;
27- } , [ repo , rootElm , theme ] ) ;
30+ isUtterancesLoaded . current = true ;
31+ } , [ repo , rootElm , path ] ) ;
2832
2933 return < div className = "utterances" ref = { rootElm } /> ;
3034} ;
0 commit comments