feat: 完成评论框的回复与点赞

src/components/CommentBox/index.css

@@ -2,14 +2,14 @@
   color: #4a90e2;
   text-align: center;
   width: 100px;
-  background-color: #f8f8f8;
+  /* background-color: #f8f8f8; */
   cursor: pointer;
-  padding: 10px;
+  /* padding: 10px; */
   margin: 0 auto;
   transition: all 0.3s;
 }
 .comment-show-more:hover {
-  background-color: #f5f5f5;
+  /* background-color: #f5f5f5; */
   color: #1890ff;
 }
 .comment-more-box {

src/components/CommentBox/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Icon } from "antd";
-import intl from "react-intl-universal";
+import { Icon, AutoComplete } from "antd";
+// import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import ContentItem from "./../ContentItem";
 import ReplyItem from "./../ReplyItem";
@@ -12,14 +12,12 @@ class CommentBox extends Component {
     super(props);
     this.state = {
       showReply: true,
-      page: 1,
-      isShowOver3: false
+      page: 1
     };
 
     this.handleToggleReply = this.handleToggleReply.bind(this);
     this.handleGetMoreReply = this.handleGetMoreReply.bind(this);
     this.renderReplies = this.renderReplies.bind(this);
-    this.handleClickCollapse = this.handleClickCollapse.bind(this);
   }
 
   /**
@@ -29,14 +27,6 @@ class CommentBox extends Component {
     this.setState({ showReply: !this.state.showReply });
   }
 
-  /**
-   * 点击收起按钮的时候只展示最多三条留言
-   */
-  handleClickCollapse() {
-    this.setState({ isShowOver3: !this.state.isShowOver3 });
-    console.log("this.isMore", this.state.isShowOver3);
-  }
-
   /**
    * 获取更多评论
    * @param {string} commentId comment id
@@ -116,14 +106,9 @@ class CommentBox extends Component {
    * @param {boolean} isNoMoreReply 是否没有更多回复
    */
   renderReplies(replies, replyCount, isNoMoreReply) {
-    console.log("this.isMore3", this.state.isShowOver3);
     const { commentId } = this.props;
     const { showReply } = this.state;
-    console.log("replies", replies);
-    console.log("replyCount", replyCount);
-    console.log("isNoMoreReply", isNoMoreReply);
     if (showReply && replies && replies.length) {
-      console.log("showReply", showReply);
       const len = replies.length;
       return (
         <div
@@ -131,52 +116,46 @@ class CommentBox extends Component {
             marginLeft: 50,
             borderTop: "1px solid #e3e3e3",
             paddingTop: 15,
-            marginTop: -5
+            marginTop: 10,
+            overflow: "auto"
           }}
         >
           {replies.map((item, index) => {
             if (index === len - 1) {
               return [
-                <ReplyItem replyItem={item} key={item.id} />,
+                <ReplyItem
+                  replyItem={item}
+                  key={item.id}
+                  commentId={commentId}
+                  action="replyToReply"
+                />,
                 <div key="show_more_button">
                   {!isNoMoreReply && replyCount !== len && (
                     <span
-                      // className="comment-show-more"
+                      className="comment-show-more"
                       onClick={() => this.handleGetMoreReply(commentId)}
                     >
                       展开更多评论
                       <Icon type="down" />
                     </span>
                   )}
-                  {replyCount === len && (
-                    <span
-                      // className="comment-show-more"
-                      onClick={() => this.handleClickCollapse()}
-                    >
-                      收起
-                      <Icon type="up" />
-                    </span>
-                  )}
-
-                  {/* <a
+                  <a
                     style={{ float: "right" }}
                     onClick={this.handleToggleReply}
                   >
-                    <Icon type="up" /> {intl.get("reply.collapse")}
-                  </a> */}
+                    <Icon type="up" /> 收起
+                  </a>
                 </div>
               ];
             }
-            if (this.state.isShowOver3) {
-              console.log("11111");
-              return <ReplyItem replyItem={item} key={item.id} />;
-            }
-            if (!this.state.isShowOver3 && index < 3) {
-              console.log("222222");
-              return <ReplyItem replyItem={item} key={item.id} />;
-            }
-            console.log("3333");
-            return null;
+            return (
+              <ReplyItem
+                replyItem={item}
+                key={item.id}
+                commentId={commentId}
+                action="replyToReply"
+              />
+            );
           })}
         </div>
       );

src/components/CommentList/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Spin, Pagination } from "antd";
-import intl from "react-intl-universal";
+// import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import CommentBox from "../CommentBox";
 import "./index.css";
@@ -44,7 +44,8 @@ class CommentList extends Component {
               onPageChange(page + 1);
             }}
           >
-            <span>{intl.get("comment.moreComment")}</span>
+            {/* <span>{intl.get("comment.moreComment")}</span> */}
+            <span>更多评论</span>
           </div>
         );
       } else {

src/components/ContentItem/index.css

@@ -20,10 +20,11 @@
 .comment-item-content {
   margin: 10px 0 20px 0;
   word-break: break-all;
+  margin-bottom: 10px;
 }
 
 .comment-item-bottom {
-  margin: 20px auto;
+  margin: 0px auto;
 }
 
 .comment-item-bottom-left {

src/components/ContentItem/index.js

@@ -5,7 +5,7 @@ import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
 // import 'dayjs/locale/es';
 import relativeTime from "dayjs/plugin/relativeTime";
-import intl from "react-intl-universal";
+// import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import CommentInput from "../CommentInput";
 import avatar from "../../avatar";
@@ -17,9 +17,9 @@ import ImagePreviewer from "../ImagePreviewer/ImagePreviewer";
 dayjs.locale("zh-cn");
 dayjs.extend(relativeTime);
 
-const LOCALES = {
-  "zh-CN": "zh-cn"
-};
+// const LOCALES = {
+//   "zh-CN": "zh-cn"
+// };
 
 class CommentItem extends Component {
   constructor(props) {
@@ -84,7 +84,7 @@ class CommentItem extends Component {
       app
     } = this.props;
 
-    const { locale } = this.props.app;
+    // const { locale } = this.props.app;
     const { showInput } = this.state;
 
     let newContent = content.content;
@@ -123,7 +123,8 @@ class CommentItem extends Component {
               {content.user_name || "暂无昵称"}
             </a> */}
             <strong style={{ color: "#75ACFF" }}>
-              {content.user_name || intl.get("comment.tourist")}
+              {/* {content.user_name || intl.get("comment.tourist")} */}
+              {content.user_name || "游客"}
             </strong>
             {/* <span style={{ marginLeft: 10 }}>
               <Tooltip
@@ -170,7 +171,7 @@ class CommentItem extends Component {
             {dayjs(content.created * 1000).format("MM-DD HH:mm:ss")}
           </div>
         </div>
-        <div>
+        <div style={{ overflow: "auto" }}>
           <div
             className="comment-item-content"
             dangerouslySetInnerHTML={{
@@ -227,7 +228,7 @@ class CommentItem extends Component {
               <div className="clearfix" />
             </div>
           )}
-          {/* <div className="comment-item-bottom">
+          <div className="comment-item-bottom">
             {content.reply_count ? (
               <div>
                 <a className="comment-item-bottom-left" onClick={onShowReply}>
@@ -236,7 +237,7 @@ class CommentItem extends Component {
                 </a>
               </div>
             ) : null}
-          </div> */}
+          </div>
           {/* <div className="comment-item-bottom">
             {content.reply_count ? (
               <div>

src/components/Editor/index.js

@@ -171,7 +171,7 @@ class Editor extends React.Component {
       // placeholder,
       rows,
       showEmoji,
-      showUpload,
+      // showUpload,
       closeUploadWhenBlur,
       maxUpload,
       // btnSubmitText,
@@ -183,6 +183,8 @@ class Editor extends React.Component {
       maxLength,
       autoFocus
     } = this.props;
+
+    const showUpload = false;
     let placeholder = this.props.placeholder || "快发表评论吧！";
     let btnSubmitText = this.props.placeholder || "发表评论";
     const handleSubmit = this.handleSubmit;

src/components/ReplyItem/index.js

@@ -19,7 +19,9 @@ class ReplyItem extends Component {
   }
 
   render() {
-    const { commentId, replyItem, replyId, action, app } = this.props;
+    const { commentId, replyItem, action, app } = this.props;
+    const replyId = replyItem.id;
+    // console.log('replyId', replyId);
 
     const { showInput } = this.state;
 
@@ -36,12 +38,12 @@ class ReplyItem extends Component {
             <Icon
               type="heart"
               onClick={() => {
-                if (replyId) {
-                  // 如果有 replyId，则说明是评论的回复
-                  app.sReplyFavor(replyItem.id, commentId, replyItem.favored);
-                  return;
-                }
-                app.sCommentFavor(replyItem.id, replyItem.favored);
+                // if (replyId) {
+                // 如果有 replyId，则说明是评论的回复
+                app.sReplyFavor(replyItem.id, commentId, replyItem.favored);
+                // return;
+                // }
+                // app.sCommentFavor(replyItem.id, replyItem.favored);
               }}
               className={
                 replyItem.favored