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

package/lib/components/comment-textarea.tsx

@@ -0,0 +1,164 @@
+import { useRequest } from "ahooks";
+import type { Octokit } from "octokit";
+import React, { forwardRef, useContext, useRef, useState } from "react";
+
+import Github from "../assets/github.svg?raw";
+import Tip from "../assets/tip.svg?raw";
+import I18nContext from "../contexts/I18nContext";
+import type { User } from "../interfaces";
+import Avatar from "./avatar";
+import Button from "./button";
+import Svg from "./svg";
+
+interface CommentTextareaProps
+  extends React.DetailedHTMLProps<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+  > {
+  value: string;
+  octokit: Octokit;
+  user?: User;
+  onLogin: () => void;
+  onCreateComment: (comment: string) => Promise<void>;
+  createCommentLoading: boolean;
+  onPreviewError: (error: unknown) => void;
+}
+
+const CommentTextarea = forwardRef<HTMLTextAreaElement, CommentTextareaProps>(
+  (props, ref) => {
+    const {
+      value: inputComment,
+      octokit,
+      user,
+      onLogin,
+      onCreateComment,
+      createCommentLoading,
+      onPreviewError,
+      ...restProps
+    } = props;
+
+    const { polyglot } = useContext(I18nContext);
+
+    const [isPreviewComment, setIsPreviewComment] = useState<boolean>(false);
+
+    const prevInputCommentRef = useRef<string>();
+
+    const {
+      data: commentHtml = "",
+      loading: getCommentHtmlLoading,
+      run: runGetCommentHtml,
+    } = useRequest(
+      async (): Promise<string> => {
+        if (prevInputCommentRef.current === inputComment) return commentHtml;
+
+        const getPreviewedHtmlRes = await octokit.request("POST /markdown", {
+          text: inputComment,
+        });
+
+        if (getPreviewedHtmlRes.status === 200) {
+          prevInputCommentRef.current = inputComment;
+
+          const _commentHtml = getPreviewedHtmlRes.data;
+          return _commentHtml;
+        } else {
+          onPreviewError(getPreviewedHtmlRes);
+          return "";
+        }
+      },
+      {
+        manual: true,
+      },
+    );
+
+    const onCommentInputPreview: React.MouseEventHandler<
+      HTMLButtonElement
+    > = () => {
+      if (isPreviewComment) {
+        setIsPreviewComment(false);
+      } else {
+        setIsPreviewComment(true);
+        runGetCommentHtml();
+      }
+    };
+
+    return (
+      <div className="gt-header" key="header">
+        {user ? (
+          <Avatar
+            className="gt-header-avatar"
+            src={user.avatar_url}
+            alt={user.login}
+            href={user.html_url}
+          />
+        ) : (
+          <a className="gt-avatar-github" onClick={onLogin}>
+            <Svg className="gt-ico-github" icon={Github} />
+          </a>
+        )}
+        <div className="gt-header-comment">
+          <textarea
+            {...restProps}
+            ref={ref}
+            value={inputComment}
+            className="gt-header-textarea"
+            style={{ display: isPreviewComment ? "none" : undefined }}
+          />
+          <div
+            className="gt-header-preview markdown-body"
+            style={{ display: isPreviewComment ? undefined : "none" }}
+            dangerouslySetInnerHTML={{
+              __html: getCommentHtmlLoading
+                ? "<span>Loading preview...</span>"
+                : commentHtml,
+            }}
+          />
+          <div className="gt-header-controls">
+            <a
+              className="gt-header-controls-tip"
+              href="https://guides.github.com/features/mastering-markdown/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Svg
+                className="gt-ico-tip"
+                icon={Tip}
+                text={polyglot.t("support-markdown")}
+              />
+            </a>
+
+            <Button
+              className="gt-btn-preview gt-btn--secondary"
+              onClick={onCommentInputPreview}
+              text={
+                isPreviewComment ? polyglot.t("edit") : polyglot.t("preview")
+              }
+              isLoading={getCommentHtmlLoading}
+              disabled={false}
+            />
+
+            {user ? (
+              <Button
+                className="gt-btn-public"
+                onClick={async () => {
+                  await onCreateComment(inputComment);
+                  setIsPreviewComment(false);
+                }}
+                text={polyglot.t("comment")}
+                isLoading={createCommentLoading}
+                disabled={createCommentLoading || !inputComment}
+              />
+            ) : (
+              <Button
+                className="gt-btn-login"
+                onClick={onLogin}
+                text={polyglot.t("login-with-github")}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+export default CommentTextarea;

package/lib/components/comment.tsx

@@ -1,12 +1,13 @@
 import { formatDistanceToNow, parseISO } from "date-fns";
-import React, { useContext, useEffect, useMemo, useRef } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 
+import ArrowDown from "../assets/arrow-down.svg?raw";
 import Edit from "../assets/edit.svg?raw";
 import Heart from "../assets/heart.svg?raw";
 import HeartFilled from "../assets/heart-filled.svg?raw";
 import Reply from "../assets/reply.svg?raw";
 import I18nContext from "../contexts/I18nContext";
-import type { Comment as CommentType } from "../interfaces";
+import type { Comment as CommentType, GitalkProps } from "../interfaces";
 import Avatar from "./avatar";
 import Svg from "./svg";
 
@@ -21,6 +22,7 @@ export interface CommentProps
   onReply: (comment: CommentType) => void;
   onLike: (like: boolean, comment: CommentType) => void;
   likeLoading: boolean;
+  collapsedHeight?: GitalkProps["collapsedHeight"];
 }
 
 const Comment: React.FC<CommentProps> = ({
@@ -30,11 +32,14 @@ const Comment: React.FC<CommentProps> = ({
   onReply,
   onLike,
   likeLoading,
+  collapsedHeight,
   className = "",
   ...restProps
 }) => {
   const ref = useRef<HTMLDivElement>(null);
 
+  const [collapsed, setCollapsed] = useState<boolean>(false);
+
   const { language, polyglot, dateFnsLocaleMap } = useContext(I18nContext);
 
   const { body_html, created_at, user, reactionsHeart, html_url } = comment;
@@ -72,6 +77,17 @@ const Comment: React.FC<CommentProps> = ({
     return () => {};
   }, []);
 
+  useEffect(() => {
+    const commentElement = ref.current;
+
+    if (commentElement && collapsedHeight) {
+      const commentElementHeight = commentElement.clientHeight;
+      if (commentElementHeight > collapsedHeight) {
+        setCollapsed(true);
+      }
+    }
+  }, [collapsedHeight]);
+
   return (
     <div
       ref={ref}
@@ -85,7 +101,12 @@ const Comment: React.FC<CommentProps> = ({
         href={user?.html_url}
       />
 
-      <div className="gt-comment-content">
+      <div
+        className="gt-comment-content"
+        style={
+          collapsed ? { maxHeight: collapsedHeight, overflow: "hidden" } : {}
+        }
+      >
         <div className="gt-comment-header">
           <a
             className="gt-comment-username"
@@ -96,12 +117,15 @@ const Comment: React.FC<CommentProps> = ({
             {user?.login}
           </a>
           <div className="gt-comment-date" title={created_at}>
-            {polyglot.t("commented") +
-              " " +
-              formatDistanceToNow(parseISO(created_at), {
+            <span className="gt-comment-date__prefix">
+              {polyglot.t("commented")}
+            </span>
+            <span className="gt-comment-date__time">
+              {formatDistanceToNow(parseISO(created_at), {
                 addSuffix: true,
                 locale: dateFnsLocaleMap[language],
               })}
+            </span>
           </div>
           <div className="gt-comment-actions">
             <a
@@ -145,6 +169,14 @@ const Comment: React.FC<CommentProps> = ({
             __html: body_html ?? "",
           }}
         />
+        {collapsed && (
+          <div
+            className="gt-comment-collapse"
+            onClick={() => setCollapsed(false)}
+          >
+            <Svg className="gt-ico-collapse" icon={ArrowDown} />
+          </div>
+        )}
       </div>
     </div>
   );

package/lib/components/comments-list.tsx

@@ -0,0 +1,106 @@
+import React, { forwardRef, useContext } from "react";
+import FlipMove from "react-flip-move";
+
+import I18nContext from "../contexts/I18nContext";
+import type { Comment as CommentType, GitalkProps, User } from "../interfaces";
+import Button from "./button";
+import Comment, { type CommentProps } from "./comment";
+
+interface CommentWithForwardedRefProps
+  extends Pick<
+    CommentProps,
+    "comment" | "onReply" | "likeLoading" | "collapsedHeight"
+  > {
+  onLike: (like: boolean, commentId: number, heartReactionId?: number) => void;
+  user?: User;
+  admin: GitalkProps["admin"];
+}
+
+// Why forwardRef? https://www.npmjs.com/package/react-flip-move#usage-with-functional-components
+const CommentWithForwardedRef = forwardRef<
+  HTMLDivElement,
+  CommentWithForwardedRefProps
+>(({ comment, user, admin, onLike, ...restProps }, ref) => {
+  const {
+    id: commentId,
+    user: commentAuthor,
+    reactionsHeart: commentReactionsHeart,
+  } = comment;
+
+  const commentAuthorName = commentAuthor?.login;
+  const isAuthor =
+    !!user && !!commentAuthorName && user.login === commentAuthorName;
+  const isAdmin =
+    !!commentAuthorName &&
+    !!admin.find(
+      (username) => username.toLowerCase() === commentAuthorName.toLowerCase(),
+    );
+  const heartReactionId = commentReactionsHeart?.nodes.find(
+    (node) => node.user.login === user?.login,
+  )?.databaseId;
+
+  return (
+    <div ref={ref}>
+      <Comment
+        {...restProps}
+        comment={comment}
+        isAuthor={isAuthor}
+        isAdmin={isAdmin}
+        onLike={(like) => {
+          onLike(like, commentId, heartReactionId);
+        }}
+      />
+    </div>
+  );
+});
+
+interface CommentsListProps
+  extends Pick<GitalkProps, "flipMoveOptions">,
+    Omit<CommentWithForwardedRefProps, "comment"> {
+  comments: CommentType[];
+  commentsCount: number;
+  onGetComments: () => void;
+  getCommentsLoading: boolean;
+}
+
+const CommentsList: React.FC<CommentsListProps> = (props) => {
+  const {
+    comments,
+    commentsCount,
+    onGetComments,
+    getCommentsLoading,
+    flipMoveOptions,
+    ...restCommentProps
+  } = props;
+
+  const { polyglot } = useContext(I18nContext);
+
+  return (
+    <div className="gt-comments" key="comments">
+      <FlipMove {...flipMoveOptions}>
+        {comments.map((comment) => (
+          <CommentWithForwardedRef
+            {...restCommentProps}
+            key={comment.id}
+            comment={comment}
+          />
+        ))}
+      </FlipMove>
+      {!commentsCount && (
+        <p className="gt-comments-null">{polyglot.t("first-comment-person")}</p>
+      )}
+      {commentsCount > comments.length ? (
+        <div className="gt-comments-controls">
+          <Button
+            className="gt-btn-loadmore"
+            onClick={onGetComments}
+            isLoading={getCommentsLoading}
+            text={polyglot.t("load-more")}
+          />
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default CommentsList;

package/lib/components/meta.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useContext, useState } from "react";
+
+import ArrowDown from "../assets/arrow-down.svg?raw";
+import { HOMEPAGE, VERSION } from "../constants";
+import I18nContext from "../contexts/I18nContext";
+import type { GitalkProps, Issue, User } from "../interfaces";
+import { hasClassInParent } from "../utils/dom";
+import Action from "./action";
+import Svg from "./svg";
+
+interface MetaProps {
+  issue?: Issue;
+  user?: User;
+  commentsCount: number;
+  pagerDirection: GitalkProps["pagerDirection"];
+  onPagerDirectionChange: (
+    direction: NonNullable<GitalkProps["pagerDirection"]>,
+  ) => void;
+  onLogin: () => void;
+  onLogout: () => void;
+}
+
+const Meta: React.FC<MetaProps> = (props) => {
+  const {
+    issue,
+    user,
+    commentsCount,
+    pagerDirection,
+    onPagerDirectionChange,
+    onLogin,
+    onLogout,
+  } = props;
+
+  const { polyglot } = useContext(I18nContext);
+
+  const [showPopup, setShowPopup] = useState<boolean>(false);
+
+  const hidePopup = useCallback((e: MouseEvent) => {
+    const target = e.target as HTMLElement;
+    if (target && hasClassInParent(target, "gt-user", "gt-popup")) {
+      return;
+    }
+    document.removeEventListener("click", hidePopup);
+    setShowPopup(false);
+  }, []);
+
+  const onShowOrHidePopup: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setShowPopup((visible) => {
+      if (visible) {
+        document.removeEventListener("click", hidePopup);
+      } else {
+        document.addEventListener("click", hidePopup);
+      }
+      return !visible;
+    });
+  };
+
+  return (
+    <div className="gt-meta" key="meta">
+      <span
+        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">${commentsCount}</a>`,
+            smart_count: commentsCount,
+          }),
+        }}
+      />
+      {showPopup && (
+        <div className="gt-popup">
+          {user
+            ? [
+                <Action
+                  key="sort-asc"
+                  className={`gt-action-sortasc${pagerDirection === "first" ? " is--active" : ""}`}
+                  onClick={() => onPagerDirectionChange("first")}
+                  text={polyglot.t("sort-asc")}
+                />,
+                <Action
+                  key="sort-desc"
+                  className={`gt-action-sortdesc${pagerDirection === "last" ? " is--active" : ""}`}
+                  onClick={() => onPagerDirectionChange("last")}
+                  text={polyglot.t("sort-desc")}
+                />,
+              ]
+            : null}
+          {user ? (
+            <Action
+              className="gt-action-logout"
+              onClick={onLogout}
+              text={polyglot.t("logout")}
+            />
+          ) : (
+            <a className="gt-action gt-action-login" onClick={onLogin}>
+              {polyglot.t("login-with-github")}
+            </a>
+          )}
+          <div className="gt-copyright">
+            <a
+              className="gt-link gt-link-project"
+              href={HOMEPAGE}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitalkR
+            </a>
+            <span className="gt-version">{VERSION}</span>
+          </div>
+        </div>
+      )}
+      <div className="gt-user">
+        <div
+          className={`gt-user-inner${showPopup ? " is--poping" : ""}`}
+          onClick={onShowOrHidePopup}
+        >
+          <span className="gt-user-name">
+            {user?.login ?? polyglot.t("anonymous")}
+          </span>
+          <Svg className="gt-ico-arrdown" icon={ArrowDown} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Meta;

package/lib/constants/index.ts

@@ -14,14 +14,22 @@ import {
 } from "date-fns/locale";
 
 import packageJson from "../../package.json";
-import { type GitalkProps } from "../gitalk";
 import { type Lang } from "../i18n";
+import type { GitalkProps } from "../interfaces";
 
 export const VERSION = packageJson.version;
 export const HOMEPAGE = packageJson.homepage;
 
 export const DEFAULT_LANG: Lang = "en";
 export const DEFAULT_LABELS = ["Gitalk"];
+export const DEFAULT_FLIP_MOVE_OPTIONS: GitalkProps["flipMoveOptions"] = {
+  staggerDelayBy: 150,
+  appearAnimation: "accordionVertical",
+  enterAnimation: "accordionVertical",
+  leaveAnimation: "accordionVertical",
+};
+export const DEFAULT_PROXY =
+  "https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token";
 export const DEFAULT_AVATAR =
   "https://cdn.jsdelivr.net/npm/gitalk@1/src/assets/icon/github.svg";
 export const DEFAULT_USER: GitalkProps["defaultUser"] = {

package/lib/contexts/I18nContext.ts

@@ -5,11 +5,13 @@ import { createContext } from "react";
 import { DATE_FNS_LOCALE_MAP, DEFAULT_LANG } from "../constants";
 import i18n, { type Lang } from "../i18n";
 
-export const I18nContext = createContext<{
+export interface I18nContextValue {
   language: Lang;
   polyglot: Polyglot;
   dateFnsLocaleMap: Record<string, Locale>;
-}>({
+}
+
+export const I18nContext = createContext<I18nContextValue>({
   language: DEFAULT_LANG,
   polyglot: i18n(DEFAULT_LANG),
   dateFnsLocaleMap: DATE_FNS_LOCALE_MAP,