Minor improvements

README.md

@@ -35,6 +35,13 @@ If you're using giscus, consider [starring 🌟 giscus on GitHub][repo] and addi
 
 If you've previously used other systems that utilize GitHub Issues (e.g. [utterances][utterances], [gitalk][gitalk]), you can [convert the existing issues into discussions][convert]. After the conversion, just make sure that the mapping between the discussion titles and the pages are correct, then giscus will automatically use the discussions.
 
+## sites using giscus
+
+- [laymonage.com][laymonage-website]
+- [Stats and R][statsandr]
+- [Tech Debt Burndown Podcast][techdebtburndown]
+- [**and many more!**][giscus-topic]
+
 ## contributing
 
 See [CONTRIBUTING.md][contributing]
@@ -45,4 +52,7 @@ See [CONTRIBUTING.md][contributing]
 [utterances]: https://github.com/utterance/utterances
 [gitalk]: https://github.com/gitalk/gitalk
 [convert]: https://docs.github.com/en/discussions/managing-discussions-for-your-community/moderating-discussions#converting-an-issue-to-a-discussion
+[laymonage-website]: https://laymonage.com/posts/giscus
+[statsandr]: https://statsandr.com
+[techdebtburndown]: https://techdebtburndown.com
 [contributing]: https://github.com/laymonage/giscus/blob/main/CONTRIBUTING.md

components/Widget.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Giscus from '../components/Giscus';
 import { AuthContext, ConfigContext, getLoginUrl } from '../lib/context';
 import { createDiscussion } from '../services/giscus/createDiscussion';
@@ -30,7 +30,6 @@ export default function Widget({
   reactionsEnabled,
 }: IWidgetProps) {
   const [token, setToken] = useState('');
-  const [isFetchingToken, setIsFetchingToken] = useState(false);
 
   const handleDiscussionCreateRequest = async () =>
     createDiscussion(repo, {
@@ -47,17 +46,15 @@ export default function Widget({
     [origin],
   );
 
-  if (!isFetchingToken && session && !token) {
-    setIsFetchingToken(true);
-    getToken(session)
-      .then((token) => {
-        setToken(token);
-        setIsFetchingToken(false);
-      })
-      .catch((err) => handleError(err?.message));
-  }
+  useEffect(() => {
+    if (session && !token) {
+      getToken(session)
+        .then(setToken)
+        .catch((err) => handleError(err?.message));
+    }
+  }, [handleError, session, token]);
 
-  const ready = (!session || token) && !isFetchingToken && repo && (term || number);
+  const ready = (!session || token) && repo && (term || number);
 
   return ready ? (
     <AuthContext.Provider value={{ token, origin, getLoginUrl }}>

pages/widget.tsx

@@ -1,31 +1,31 @@
 import Head from 'next/head';
-import { NextRouter, useRouter } from 'next/router';
-import { useContext } from 'react';
+import { useRouter } from 'next/router';
+import { useContext, useEffect, useState } from 'react';
 import Widget from '../components/Widget';
 import { ThemeContext } from '../lib/context';
 import { useIsMounted } from '../lib/hooks';
 
-function popSession(router: NextRouter) {
-  const session = router.query.session as string;
-  if (session) {
-    const query = { ...router.query };
-    delete query.session;
-    const url = { pathname: router.pathname, query };
-    const options = { scroll: false, shallow: true };
-    router.replace(url, undefined, options);
-  }
-  return session || '';
-}
-
 export default function WidgetPage() {
   const router = useRouter();
   const isMounted = useIsMounted();
   const { theme } = useContext(ThemeContext);
-
-  if (!router.isReady) return null;
+  const [session, setSession] = useState('');
 
   const origin = (router.query.origin as string) || (isMounted ? location.href : '');
-  const session = popSession(router);
+
+  useEffect(() => {
+    if (router.query.session && !session) {
+      const { session: querySession, ...query } = router.query;
+      setSession(querySession as string);
+
+      const url = { pathname: router.pathname, query };
+      const options = { scroll: false, shallow: true };
+
+      router.replace(url, undefined, options);
+    }
+  }, [router, session]);
+
+  if (!router.isReady || (router.query.session && !session)) return null;
 
   const repo = router.query.repo as string;
   const term = router.query.term as string;