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

package/lib/gitalk.tsx

@@ -46,7 +46,13 @@ import logger from "./utils/logger";
 import { parseSearchQuery, stringifySearchQuery } from "./utils/query";
 
 export interface GitalkProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "title"> {
+  extends Omit<
+    React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLDivElement>,
+      HTMLDivElement
+    >,
+    "id" | "title"
+  > {
   /**
    * GitHub Application Client ID.
    */
@@ -113,7 +119,7 @@ export interface GitalkProps
   perPage?: number;
   /**
    * Comment sorting direction.
-   * Available values are last and first.
+   * Available values are `last` and `first`.
    *
    * @default "last"
    */
@@ -261,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(
@@ -484,6 +490,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
   const {
     data: comments = [],
     mutate: setComments,
+    run: runGetComments,
     loading: getCommentsLoading,
   } = useRequest(
     async (): Promise<CommentType[]> => {
@@ -494,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 =
@@ -534,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(
@@ -583,9 +593,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
             _comments,
           );
 
-          if (_comments.length < commentsPerPage) {
-            setCommentsLoaded(true);
-          }
+          setCommentsPage((prev) => prev + 1);
 
           return [...comments, ..._comments];
         } else {
@@ -602,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,
     },
   );
 
@@ -643,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]);
@@ -660,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 = "",
@@ -1121,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")}
             />
@@ -1153,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,
             }),
           }}
         />
@@ -1220,7 +1246,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
       value={{ language, polyglot, dateFnsLocaleMap: DATE_FNS_LOCALE_MAP }}
     >
       <div
-        className={`gt-container ${isInputFocused ? "gt-input-focused" : ""} ${className}`}
+        className={`gt-container${isInputFocused ? " gt-input-focused" : ""} ${className}`}
         {...restProps}
       >
         {alert && <div className="gt-error">{alert}</div>}

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/lib/themes/base.scss

@@ -568,7 +568,6 @@ $gt-breakpoint-mobile: 479px;
 
   &::after {
     position: fixed;
-    inset: 0 0 100%;
     content: '';
     opacity: 0;
   }
@@ -577,12 +576,11 @@ $gt-breakpoint-mobile: 479px;
     position: relative;
 
     &::after {
+      inset: 0;
       z-index: $gt-mask-z-index;
-      background: #000;
-      opacity: 0.6;
-      transition:
-        opacity 0.3s,
-        bottom 0s;
+      background: #171717;
+      opacity: 0.8;
+      transition: opacity ease 0.3s;
     }
 
     .gt-header-comment {

package/lib/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "gitalk-react",
-  "version": "1.0.0-beta.4",
+  "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": [
@@ -26,19 +30,22 @@
       "require": "./dist/gitalk.umd.cjs"
     },
     "./gitalk.css": "./dist/gitalk-light.css",
+    "./light.css": "./dist/gitalk-light.css",
     "./gitalk-light.css": "./dist/gitalk-light.css",
+    "./dark.css": "./dist/gitalk-dark.css",
     "./gitalk-dark.css": "./dist/gitalk-dark.css"
   },
   "types": "./dist/gitalk.d.ts",
   "scripts": {
-    "dev": "vite",
-    "build": "npm run build:ts && npm run build:scss",
+    "dev": "vite --config vite.config.preview.ts",
+    "build": "npm run build:lib && npm run build:preview",
+    "build:lib": "npm run build:ts && npm run build:scss",
     "build:ts": "tsc -b && vite build",
     "build:scss": "vite build --config vite.config.scss.ts",
+    "build:preview": "vite build --config vite.config.preview.ts",
     "lint": "npm run lint:ts && npm run lint:scss",
     "lint:ts": "eslint . --fix",
-    "lint:scss": "stylelint lib/**/*.scss --fix",
-    "preview": "vite preview"
+    "lint:scss": "stylelint **/*.scss --fix"
   },
   "dependencies": {
     "ahooks": "^3.0.0",