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

package/lib/constants/index.ts

@@ -14,6 +14,7 @@ import {
 } from "date-fns/locale";
 
 import packageJson from "../../package.json";
+import { type GitalkProps } from "../gitalk";
 import { type Lang } from "../i18n";
 
 export const VERSION = packageJson.version;
@@ -23,6 +24,11 @@ export const DEFAULT_LANG: Lang = "en";
 export const DEFAULT_LABELS = ["Gitalk"];
 export const DEFAULT_AVATAR =
   "https://cdn.jsdelivr.net/npm/gitalk@1/src/assets/icon/github.svg";
+export const DEFAULT_USER: GitalkProps["defaultUser"] = {
+  avatar_url: "//avatars1.githubusercontent.com/u/29697133?s=50",
+  login: "null",
+  html_url: "",
+};
 
 export const ACCESS_TOKEN_KEY = "GT_ACCESS_TOKEN";
 export const STORED_COMMENTS_KEY = "GT_COMMENT";

package/lib/gitalk.tsx

@@ -23,6 +23,7 @@ import {
   ACCESS_TOKEN_KEY,
   DATE_FNS_LOCALE_MAP,
   DEFAULT_LABELS,
+  DEFAULT_USER,
   HOMEPAGE,
   VERSION,
 } from "./constants";
@@ -72,14 +73,12 @@ export interface GitalkProps
    * The unique id of the page.
    * Length must less than 50.
    *
-   * @default location.href
+   * @default location.host + location.pathname
    */
   id?: string;
   /**
    * The issue ID of the page.
    * If the number attribute is not defined, issue will be located using id.
-   *
-   * @default -1
    */
   number?: number;
   /**
@@ -184,6 +183,12 @@ export interface GitalkProps
    * @param count comments number
    */
   updateCountCallback?: (count: number) => void;
+  /**
+   * Callback method invoked when a new issue is successfully created.
+   *
+   * @param issue created issue
+   */
+  onCreateIssue?: (issue: IssueType) => void;
   /**
    * Callback method invoked when a new comment is successfully created.
    *
@@ -201,14 +206,15 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     owner,
     repo,
     admin,
-    id: propsIssueId = location.href,
-    number: issueNumber = -1,
-    labels: issueBaseLabels = DEFAULT_LABELS,
+    id: propsIssueId = location.host + location.pathname,
+    number: propsIssueNumber,
+    labels: propsIssueLabels = DEFAULT_LABELS,
     title: issueTitle = document.title,
     body: issueBody = location.href +
-      document
+      "\n\n" +
+      (document
         ?.querySelector('meta[name="description"]')
-        ?.getAttribute("content") || "",
+        ?.getAttribute("content") ?? ""),
     language = navigator.language as Lang,
     perPage: propsPerPage = 10,
     pagerDirection = "last",
@@ -225,28 +231,23 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     defaultUser: propsDefaultUser,
     defaultAuthor: propsDefaultAuthor,
     updateCountCallback,
+    onCreateIssue,
     onCreateComment,
     className = "",
     ...restProps
   } = props;
-  const issueId = propsIssueId.slice(0, 50);
-  const commentsPerPage =
-    propsPerPage > 100 ? 100 : propsPerPage < 0 ? 10 : propsPerPage;
-  const defaultUser = propsDefaultUser
-    ? propsDefaultUser
-    : propsDefaultAuthor
-      ? {
-          avatar_url: propsDefaultAuthor.avatarUrl,
-          login: propsDefaultAuthor.login,
-          html_url: propsDefaultAuthor.url,
-        }
-      : {
-          avatar_url: "//avatars1.githubusercontent.com/u/29697133?s=50",
-          login: "null",
-          html_url: "",
-        };
 
-  logger.i("re-rendered.");
+  const [issue, setIssue] = useState<IssueType>();
+  const issueNumber = useMemo(
+    () =>
+      propsIssueNumber && propsIssueNumber > 0 ? propsIssueNumber : undefined,
+    [propsIssueNumber],
+  );
+  const issueId = useMemo(() => propsIssueId.slice(0, 50), [propsIssueId]);
+  const issueLabels = useMemo(
+    () => propsIssueLabels.concat([issueId]),
+    [propsIssueLabels, issueId],
+  );
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [inputComment, setInputComment] = useState<string>("");
@@ -256,9 +257,26 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
   const [commentsCount, setCommentsCount] = useState<number>(0);
   const [commentsCursor, setCommentsCursor] = useState("");
   const [commentsPage, setCommentsPage] = useState<number>(1);
+  const commentsPerPage = useMemo(
+    () => (propsPerPage > 100 ? 100 : propsPerPage < 0 ? 10 : propsPerPage),
+    [propsPerPage],
+  );
   const [commentsLoaded, setCommentsLoaded] = useState<boolean>(false);
   const [commentsPagerDirection, setCommentsPagerDirection] =
     useState(pagerDirection);
+  const defaultUser = useMemo(
+    () =>
+      propsDefaultUser
+        ? propsDefaultUser
+        : propsDefaultAuthor
+          ? {
+              avatar_url: propsDefaultAuthor.avatarUrl,
+              login: propsDefaultAuthor.login,
+              html_url: propsDefaultAuthor.url,
+            }
+          : DEFAULT_USER,
+    [propsDefaultAuthor, propsDefaultUser],
+  );
 
   const [showPopup, setShowPopup] = useState<boolean>(false);
 
@@ -336,12 +354,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     );
   }, [admin, user]);
 
-  const issueLabels = useMemo(
-    () => issueBaseLabels.concat([issueId]),
-    [issueBaseLabels, issueId],
-  );
-
-  const { loading: createIssueLoading, runAsync: runCreateIssue } = useRequest(
+  const { loading: createIssueLoading, run: runCreateIssue } = useRequest(
     async () => {
       logger.i(`Creating issue...`);
 
@@ -359,11 +372,13 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
       if (createIssueRes.status === 201) {
         const _issue = createIssueRes.data;
         logger.s(`Create issue successfully:`, _issue);
-        return _issue;
+
+        onCreateIssue?.(_issue);
+
+        setIssue(_issue);
       } else {
         setAlert(`Create issue failed: ${createIssueRes}`);
         logger.e(`Create issue failed:`, createIssueRes);
-        return undefined;
       }
     },
     {
@@ -373,11 +388,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     },
   );
 
-  const {
-    data: issue,
-    mutate: setIssue,
-    loading: getIssueLoading,
-  } = useRequest(
+  const { loading: getIssueLoading } = useRequest(
     async () => {
       if (issueNumber) {
         const getIssueRes = await octokit.request(
@@ -395,15 +406,14 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
             `Locate issue ${issueNumber} in repository ${owner}/${repo} successfully:`,
             _issue,
           );
-          return _issue;
+          setIssue(_issue);
         } else if (getIssueRes.status === 404) {
           logger.w(
             `Issue ${issueNumber} in repository ${owner}/${repo} was not found.`,
           );
 
           if (isAdmin && !createIssueManually) {
-            const _issue = await runCreateIssue();
-            return _issue;
+            runCreateIssue();
           }
         } else {
           setAlert(
@@ -433,15 +443,14 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
               `Locate issue with labels ${issueLabels} in repository ${owner}/${repo} successfully:`,
               _issue,
             );
-            return _issue;
+            setIssue(_issue);
           } else {
             logger.w(
               `Issue with labels ${issueLabels} in repository ${owner}/${repo} was not found.`,
             );
 
             if (isAdmin && !createIssueManually) {
-              const _issue = await runCreateIssue();
-              return _issue;
+              runCreateIssue();
             }
           }
         } else if (getIssuesStatus === 404) {
@@ -450,8 +459,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
           );
 
           if (isAdmin && !createIssueManually) {
-            const _issue = await runCreateIssue();
-            return _issue;
+            runCreateIssue();
           }
         } else {
           setAlert(
@@ -463,8 +471,6 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
           );
         }
       }
-
-      return undefined;
     },
     {
       ready: !!owner && !!repo && (!!issueNumber || !!issueId),
@@ -481,7 +487,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     loading: getCommentsLoading,
   } = useRequest(
     async (): Promise<CommentType[]> => {
-      const { number: issueNumber } = issue as IssueType;
+      const { number: currentIssueNumber } = issue as IssueType;
       const from = (commentsPage - 1) * commentsPerPage + 1;
       const to = commentsPage * commentsPerPage;
 
@@ -495,7 +501,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
           await octokit.graphql(query, {
             owner,
             repo,
-            id: issueNumber,
+            id: currentIssueNumber,
             pageSize: commentsPerPage,
             ...(commentsCursor ? { cursor: commentsCursor } : {}),
           });
@@ -550,7 +556,7 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
           {
             owner,
             repo,
-            issue_number: issueNumber,
+            issue_number: currentIssueNumber,
             page: commentsPage,
             per_page: commentsPerPage,
             headers: {
@@ -608,14 +614,14 @@ const Gitalk: React.FC<GitalkProps> = (props) => {
     run: runCreateIssueComment,
   } = useRequest(
     async (): Promise<CommentType[]> => {
-      const { number: issueNumber } = issue as IssueType;
+      const { number: currentIssueNumber } = issue as IssueType;
 
       const createIssueCommentRes = await octokit.request(
         "POST /repos/{owner}/{repo}/issues/{issue_number}/comments",
         {
           owner,
           repo,
-          issue_number: issueNumber,
+          issue_number: currentIssueNumber,
           body: inputComment,
           headers: {
             accept: "application/vnd.github.v3.full+json",

package/lib/utils/logger.ts

@@ -6,10 +6,20 @@ enum LogLevel {
   NO_LOG = Infinity,
 }
 
-class Logger {
+export class Logger {
   prefix = "Gitalk";
   logLevel = import.meta.env.PROD ? LogLevel.WARNING : LogLevel.INFO;
 
+  constructor({ prefix, logLevel }: { prefix?: string; logLevel?: LogLevel }) {
+    if (prefix) {
+      this.prefix = prefix;
+    }
+    if (logLevel !== undefined) {
+      this.logLevel = logLevel;
+    }
+    return this;
+  }
+
   i(...infos: unknown[]) {
     if (this.logLevel > LogLevel.INFO) return;
 
@@ -51,6 +61,6 @@ class Logger {
   }
 }
 
-const logger = new Logger();
+const logger = new Logger({});
 
 export default logger;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitalk-react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "private": false,
   "author": {
     "name": "LolipopJ",