gitalk-react 1.0.0-beta.5 → 1.0.0-beta.6

package/lib/gitalk.tsx

@@ -267,7 +267,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     () => (propsPerPage > 100 ? 100 : propsPerPage < 0 ? 10 : propsPerPage),
     [propsPerPage],
   );
-  const [commentsLoaded, setCommentsLoaded] = useState<boolean>(false);
+  /** Current sort order, have effect when user is logged */
   const [commentsPagerDirection, setCommentsPagerDirection] =
     useState(pagerDirection);
   const defaultUser = useMemo(
@@ -490,6 +490,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
   const {
     data: comments = [],
     mutate: setComments,
+    run: runGetComments,
     loading: getCommentsLoading,
   } = useRequest(
     async (): Promise<CommentType[]> => {
@@ -500,7 +501,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
       if (user) {
         // Get comments via GraphQL, witch requires being logged and able to sort
         const query = getIssueCommentsQL({
-          pagerDirection,
+          pagerDirection: commentsPagerDirection,
         });
 
         const getIssueCommentsRes: IssueCommentsQLResponse =
@@ -540,11 +541,14 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
             _comments,
           );
 
-          if (_comments.length < commentsPerPage) {
-            setCommentsLoaded(true);
-          }
+          const commentsPageInfo =
+            getIssueCommentsRes.repository.issue.comments.pageInfo;
+          const commentsPageCursor =
+            commentsPageInfo.startCursor || commentsPageInfo.endCursor || "";
+          setCommentsCursor(commentsPageCursor);
 
-          if (pagerDirection === "last") return [..._comments, ...comments];
+          if (commentsPagerDirection === "last")
+            return [..._comments, ...comments];
           else return [...comments, ..._comments];
         } else {
           setAlert(
@@ -589,9 +593,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
             _comments,
           );
 
-          if (_comments.length < commentsPerPage) {
-            setCommentsLoaded(true);
-          }
+          setCommentsPage((prev) => prev + 1);
 
           return [...comments, ..._comments];
         } else {
@@ -608,8 +610,8 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
       return comments;
     },
     {
-      ready: !!owner && !!repo && !!issue && !getUserLoading && !commentsLoaded,
-      refreshDeps: [commentsPage, issue, user, pagerDirection],
+      manual: true,
+      ready: !!owner && !!repo && !!issue && !getUserLoading,
     },
   );
 
@@ -649,6 +651,8 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
         logger.s(`Create issue comment successfully.`);
 
         setInputComment("");
+        setCommentsCount((prev) => prev + 1);
+
         onCreateComment?.(createdIssueComment);
 
         return localComments.concat([createdIssueComment]);
@@ -666,34 +670,50 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
 
   useEffect(() => {
     setComments([]);
-    setCommentsCount(0);
+    setCommentsCount(issue?.comments ?? 0);
     setCommentsCursor("");
     setCommentsPage(1);
-    setCommentsLoaded(false);
     setLocalComments([]);
 
-    if (issue) {
-      setCommentsCount(issue.comments);
-    }
-  }, [issue, user, pagerDirection, setComments, setLocalComments]);
+    setTimeout(() => {
+      runGetComments();
+    });
+  }, [issue, runGetComments, setComments, setLocalComments]);
+
+  useEffect(() => {
+    setComments([]);
+    setCommentsCursor("");
+    setCommentsPage(1);
+
+    setTimeout(() => {
+      runGetComments();
+    });
+  }, [user, commentsPagerDirection, setComments, runGetComments]);
 
   /** sorted all comments */
-  const allComments = useMemo(() => {
-    const _allComments = comments.concat(localComments);
+  const loadedComments = useMemo(() => {
+    const _loadedComments: CommentType[] = [];
+
+    // filter duplicate comments if exist
+    const commentIdsSet = new Set();
+    for (const comment of comments.concat(localComments)) {
+      if (!commentIdsSet.has(comment.id)) {
+        commentIdsSet.add(comment.id);
+        _loadedComments.push(comment);
+      }
+    }
 
-    if (commentsPagerDirection === "last" && !!user) {
+    if (!!user && commentsPagerDirection === "last") {
       // sort comments by date DESC
-      _allComments.reverse();
+      _loadedComments.reverse();
     }
 
-    return _allComments;
+    return _loadedComments;
   }, [comments, commentsPagerDirection, localComments, user]);
 
-  const allCommentsCount = commentsCount + (localComments ?? []).length;
-
   useEffect(() => {
-    updateCountCallback?.(allCommentsCount);
-  }, [allCommentsCount, updateCountCallback]);
+    updateCountCallback?.(commentsCount);
+  }, [commentsCount, updateCountCallback]);
 
   const {
     data: commentHtml = "",
@@ -1127,20 +1147,20 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     return (
       <div className="gt-comments" key="comments">
         <FlipMove {...flipMoveOptions}>
-          {allComments.map((comment) => (
+          {loadedComments.map((comment) => (
             <CommentWithForwardedRef key={comment.id} comment={comment} />
           ))}
         </FlipMove>
-        {!allCommentsCount && (
+        {!commentsCount && (
           <p className="gt-comments-null">
             {polyglot.t("first-comment-person")}
           </p>
         )}
-        {!commentsLoaded && allCommentsCount ? (
+        {commentsCount > loadedComments.length ? (
           <div className="gt-comments-controls">
             <Button
               className="gt-btn-loadmore"
-              onClick={() => setCommentsPage((prev) => prev + 1)}
+              onClick={runGetComments}
               isLoading={getCommentsLoading}
               text={polyglot.t("load-more")}
             />
@@ -1159,8 +1179,8 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
           className="gt-counts"
           dangerouslySetInnerHTML={{
             __html: polyglot.t("counts", {
-              counts: `<a class="gt-link gt-link-counts" href="${issue?.html_url}" target="_blank" rel="noopener noreferrer">${allCommentsCount}</a>`,
-              smart_count: allCommentsCount,
+              counts: `<a class="gt-link gt-link-counts" href="${issue?.html_url}" target="_blank" rel="noopener noreferrer">${commentsCount}</a>`,
+              smart_count: commentsCount,
             }),
           }}
         />

package/lib/i18n/index.ts

@@ -13,7 +13,7 @@ import RU from "./ru.json";
 import ZHCN from "./zh-CN.json";
 import ZHTW from "./zh-TW.json";
 
-const i18nMap = {
+export const i18nMap = {
   zh: ZHCN,
   "zh-CN": ZHCN,
   "zh-TW": ZHTW,

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "gitalk-react",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "private": false,
   "author": {
     "name": "LolipopJ",
     "email": "mail@towind.fun",
     "url": "https://github.com/LolipopJ"
   },
-  "homepage": "https://github.com/LolipopJ/gitalk-react",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LolipopJ/gitalk-react.git"
+  },
+  "homepage": "https://lolipopj.github.io/gitalk-react",
   "license": "MIT",
   "type": "module",
   "files": [