bilingo-ui/src/components/comment/common/ReplyCard.tsx

import React, { useState, useContext } from "react";
import { Divider } from "antd";
import ItemToolBar, { TOOL_ACTION_TYPE } from "./ItemToolBar";
import styles from "./ReplyCard.less";
import { CommentContext } from "../context";
import { getUserType } from "../utils";
import { toggleFavor } from "../utils/commentAjaxLogi";

export const ReplyCard = ({
  replyContent: {
    user_name,
    user_id,
    user_avatar,
    reply_target = null,
    id,
    favored = false,
    favor_count,
    created,
    content,
  },
  commentId,
  locale,
  renderTime = () => null,
  onChangeListItem,
}: {
  replyContent: {
    user_name: string;
    user_id: number;
    user_avatar: string;
    reply_target: null;
    id: string;
    favored: boolean;
    favor_count: number;
    created: number;
    content: string;
  };
  commentId: string;
  locale: "zh" | "en" | string;
  renderTime: (created: number) => any;
  onChangeListItem?({
    replyId,
    changeProps,
  }: {
    replyId: string;
    changeProps: any;
  }): Promise<boolean> | boolean;
}) => {
  const [showReplyEditor, setShowReplyEditor] = useState(false);
  const context = useContext(CommentContext);
  const { currentUser }: { currentUser: any } = context;

  return (
    <article className={styles.wrapper}>
      <div className={styles.avatar}>
        <div
          className={styles.avatarImg}
          style={{
            backgroundImage: `url(${user_avatar})`,
          }}
        />
      </div>
      <section className={styles.content}>
        <header>
          <h4>{user_name}</h4>
          {renderTime(created)}
        </header>
        <div>{content}</div>
        <ItemToolBar
          authType={getUserType(currentUser, user_id)}
          handleReplyClick={() => {
            return true;
          }}
          handleNormalClick={async (actionType: string) => {
            console.log("actionType: ", actionType);
            if (actionType === TOOL_ACTION_TYPE.REPLY) {
              setShowReplyEditor(!showReplyEditor);
            }
            if (actionType === TOOL_ACTION_TYPE.FAVOR) {
              const res = await toggleFavor({
                favored,
                id: commentId,
                commentId: id,
                userId: currentUser.id,
              });
              if (res && onChangeListItem) {
                onChangeListItem({
                  replyId: id,
                  changeProps: {
                    favor_count: res.favor_count,
                    favored: !favored,
                  },
                });
              }
            }
            return true;
          }}
          handlePrivateClick={(actionType: string) => {
            return true;
          }}
          replyCount={0}
          favorCount={favor_count}
          favored={favored}
        />
        {showReplyEditor ? (
          <div className={styles.replyEditorWrapper}>Editor</div>
        ) : null}
      </section>
    </article>
  );
};