refactor: 完成评论列表的重构

src/App.js

@@ -33,6 +33,7 @@ class App extends Component {
     this.sCreateComment = this.sCreateComment.bind(this);
     this.sCreateReply = this.sCreateReply.bind(this);
     this.sCommentFavor = this.sCommentFavor.bind(this);
+    this.sReplyFavor = this.sReplyFavor.bind(this);
     this.sOssSts = this.sOssSts.bind(this);
   }
 
@@ -102,28 +103,34 @@ class App extends Component {
     axios
       .get(`${API}/replies?comment_id=${commentId}&page=${page}&limit=${LIMIT}`)
       .then(response => {
-        const { list: replies } = response.data;
-        if (!replies) {
+        // const { list: replies, total, page } = response.data;
+        if (!response.data.list) {
           message.info("没有更多数据了！");
         }
         const list = this.state.list.map(item => {
           if (item.id === commentId) {
             if (!item.replies) item.replies = [];
-            if (replies) {
+            if (response.data.list) {
               if (page === 1) {
                 // 如果当前页数为第一页，则清空当前所有的 replies
                 // 并将获取到的 replies 存放在 state
-                item.replies = replies;
+                item.replies = response.data.list;
               } else {
-                item.replies = item.replies.concat(replies);
+                item.replies = item.replies
+                  .filter(o => !o.isTemporary)
+                  .concat(response.data.list);
                 // 如果当前页数非第一页，则合并 replies
               }
+              item.reply_count = response.data.total;
+              item.reply_page = response.data.page;
             } else {
               item.isNoMoreReply = true;
             }
           }
           return item;
         });
+        console.log("list: ", list);
+
         this.setState({ list });
       })
       .catch(error => {
@@ -185,6 +192,8 @@ class App extends Component {
    * @param {object} data { comment_id, content, [reply_id] }
    */
   sCreateReply(data, cb) {
+    console.log("list: ", this.state.list);
+
     if (!data.content) return message.error("回复内容不能为空 ");
     this.handleChangeLoading("sCreateReply", true);
     const { API } = this.props;
@@ -194,19 +203,23 @@ class App extends Component {
       withCredentials: true
     })
       .then(response => {
-        // // 将该条数据插入到 list 中
-        // const list = this.state.list.map(item => {
-        //   if (item.id === data.comment_id) {
-        //     if (!item.replies) item.replies = [];
-        //     item.reply_count += 1
-        //     item.replies.unshift(response.data);
-        //   }
-        //   return item;
-        // });
-        // this.setState({ list });
-        this.sGetReply({ commentId: data.comment_id });
         message.success("回复成功！");
         if (isFunction(cb)) cb();
+        // 将数据写入到 list 中
+        // 临时插入
+        // 等到获取数据之后，删除临时数据
+        const list = this.state.list.map(item => {
+          if (item.id === data.comment_id) {
+            if (!item.replies) item.replies = [];
+            item.replies.push({
+              ...response.data,
+              isTemporary: true // 临时的数据
+            });
+            item.reply_count += 1;
+          }
+          return item;
+        });
+        this.setState({ list });
       })
       .catch(error => {
         if (error.response && error.response.data && error.response.data.msg) {
@@ -221,7 +234,7 @@ class App extends Component {
   }
 
   /**
-   * 点赞/取消点赞
+   * 评论 点赞/取消点赞
    * @param {string} commentId { commentId }
    * @param {boolean} favored   是否已经点过赞
    */
@@ -256,6 +269,47 @@ class App extends Component {
       });
   }
 
+  /**
+   * 回复 点赞/取消点赞
+   * @param {string} replyId  replyId
+   * @param {string} commentId  commentId
+   * @param {boolean} favored   是否已经点过赞
+   */
+  sReplyFavor(replyId, commentId, favored) {
+    this.handleChangeLoading("sReplyFavor", true);
+    console.log("replyId, commentId ", replyId, commentId);
+
+    const { API } = this.props;
+    axios(`${API}/replies/${replyId}/favor`, {
+      method: favored ? "delete" : "put",
+      withCredentials: true
+    })
+      .then(response => {
+        console.log("response: ", response);
+
+        message.success(favored ? "取消点赞成功！" : "点赞成功！");
+        // // 更新 list 中的该项数据的 favored
+        // const list = this.state.list.map(item => {
+        //   if (item.id === replyId) {
+        //     item.favored = !favored;
+        //     item.favor_count += favored ? -1 : 1;
+        //   }
+        //   return item;
+        // });
+        // this.setState({ list });
+      })
+      .catch(error => {
+        if (error.response && error.response.data && error.response.data.msg) {
+          message.error(lang[error.response.data.msg] || ERROR_DEFAULT);
+          return;
+        }
+        message.error(lang[error.message] || ERROR_DEFAULT);
+      })
+      .finally(() => {
+        this.handleChangeLoading("sReplyFavor", false);
+      });
+  }
+
   /**
    * 获取 OSS 上传的参数
    */
@@ -287,6 +341,7 @@ class App extends Component {
       sCreateComment: this.sCreateComment,
       sGetComment: this.sGetComment,
       sCommentFavor: this.sCommentFavor,
+      sReplyFavor: this.sReplyFavor,
       sCreateReply: this.sCreateReply,
       sGetReply: this.sGetReply,
       sOssSts: this.sOssSts

src/components/CommentBox/index.js

@@ -57,7 +57,7 @@ class CommentBox extends Component {
                   replyId={item.id}
                   key={item.id}
                   content={item}
-                  type="replyToReply" // 回复的回复
+                  action="replyToReply" // 回复的回复
                 />,
                 <div className="moreBox" key="show_more_button">
                   {!isNoMoreReply &&
@@ -85,7 +85,7 @@ class CommentBox extends Component {
                 replyId={item.id}
                 key={item.id}
                 content={item}
-                type="reply" // 评论的回复
+                action="replyToReply" // 评论的回复
               />
             );
           })}
@@ -105,7 +105,7 @@ class CommentBox extends Component {
           onShowReply={this.handleToggleReply}
           showReply={showReply}
           commentId={content.id}
-          action="comment" // 回复
+          action="reply" // 评论的回复
         />
         {this.renderReplies(
           content.replies,

src/components/CommentInput/index.js

@@ -12,6 +12,8 @@ class CommentInput extends Component {
   handleSubmit(value) {
     console.log("handleSubmit comment input value: ", value);
     const { action, commentId, replyId, callback } = this.props;
+    console.log(" action, commentId, replyId, callback: ", this.props);
+
     if (action === "comment") {
       this.props.app.sCreateComment({
         content: value
@@ -42,34 +44,16 @@ class CommentInput extends Component {
         // 默认使用 CommentInput 的 onSubmit 来提交评论
         // 但也可以使用 Editor 的 props 来覆盖 onSubmit
         onSubmit: this.handleSubmit,
-        ...child.props
+        ...child.props,
+        // 如果当前的编辑器不是“评论”，则编辑器高度减小一些
+        rows:
+          this.props.action === "comment"
+            ? child.props.rows
+            : child.props.rows - 1
       });
     });
 
-    return (
-      <div>
-        {/* {type === "normal" ? (
-          <div>
-            <span
-              style={{
-                border: "1px solid #CECECE",
-                color: "#666",
-                padding: "2px 3px",
-              }}
-            >
-              回复
-            </span>
-            <span style={{ marginLeft: "20px", color: "#5198EB" }}>
-              口碑
-              <span style={{ marginLeft: "20px", color: "#666666" }}>
-                (全站挑出毛病或提出合理建议，奖励10到100元红包)
-              </span>
-            </span>
-          </div>
-        ) : null} */}
-        <div style={{ marginTop: 40 }}>{childrenWithProps}</div>
-      </div>
-    );
+    return <div>{childrenWithProps}</div>;
   }
 }
 

src/components/CommentList/index.js

@@ -24,10 +24,13 @@ class CommentList extends Component {
       sGetComment
     } = this.props.app;
 
-    const spinning = Boolean(loading.sGetComment || loading.sCommentFavor);
+    const spinning = Boolean(
+      loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
+    );
     return (
       <div>
         <Spin spinning={spinning}>
+          <div>共{total} 条评论</div>
           {list.map(item => (
             <CommentBox content={item} key={item.id} commentId={item.id} />
           ))}

src/components/ContentItem/index.css

@@ -9,7 +9,7 @@
   margin-left: 10px;
 }
 .box {
-  margin: 10px;
+  margin: 10px 0;
   padding: 15px 5px;
   border-top: 1px solid #eee;
 }

src/components/ContentItem/index.js

@@ -4,7 +4,7 @@ import { Avatar, Icon } from "antd";
 import dayjs from "dayjs";
 import Comment from "../../Comment";
 import CommentInput from "../CommentInput";
-// import Editor from "../Editor";
+import avatar from "../../avatar";
 import { renderContent } from "../../helper";
 import "./index.css";
 
@@ -46,15 +46,14 @@ class CommentItem extends Component {
       onShowReply,
       app
     } = this.props;
+    console.log("this.props: ", this.props);
 
     const { isShowInput } = this.state;
-    console.log("isShowInput ", isShowInput);
 
-    const isComment = action === "comment";
     return (
       <div className="box">
         <div className="left">
-          <Avatar src={content.user_avatar} size="large" />
+          <Avatar src={content.user_avatar || avatar} size="large" />
         </div>
         <div className="right">
           <div className="name">
@@ -75,19 +74,18 @@ class CommentItem extends Component {
             }}
           />
           <div className="bottom">
-            {isComment &&
-              content.reply_count && (
-                <div>
-                  <a
-                    className="itemLeft"
-                    onClick={onShowReply}
-                    style={{ userSelect: "none" }}
-                  >
-                    {content.reply_count} 条回复
-                    {showReply ? <Icon type="up" /> : <Icon type="down" />}
-                  </a>
-                </div>
-              )}
+            {content.reply_count ? (
+              <div>
+                <a
+                  className="itemLeft"
+                  onClick={onShowReply}
+                  style={{ userSelect: "none" }}
+                >
+                  {content.reply_count} 条回复
+                  {showReply ? <Icon type="up" /> : <Icon type="down" />}
+                </a>
+              </div>
+            ) : null}
 
             <a onClick={this.handleToggleInput} className="itemRight">
               &nbsp; 回复
@@ -95,7 +93,14 @@ class CommentItem extends Component {
             <div
               className="itemRight"
               style={{ cursor: "pointer" }}
-              onClick={() => app.sCommentFavor(content.id, content.favored)}
+              onClick={() => {
+                if (replyId) {
+                  // 如果有 replyId，则说明是评论的回复
+                  app.sReplyFavor(content.id, commentId, content.favored);
+                  return;
+                }
+                app.sCommentFavor(content.id, content.favored);
+              }}
             >
               <Icon
                 type="like-o"
@@ -104,17 +109,17 @@ class CommentItem extends Component {
               &nbsp;{content.favor_count}
             </div>
           </div>
-
-          {/* {isShowInput && (
-            <CommentInput
-              action={action}
-              replyId={replyId}
-              commentId={commentId}
-              callback={this.handleToggleInput}
-            />
-          )} */}
-          {isShowInput && <CommentInput content={app.children} />}
         </div>
+
+        {isShowInput && (
+          <CommentInput
+            content={app.children}
+            action={action}
+            replyId={replyId}
+            commentId={commentId}
+            callback={this.handleToggleInput}
+          />
+        )}
       </div>
     );
   }

src/components/Editor/index.js

@@ -8,18 +8,18 @@ import Emoji from "./Emoji";
 import "./index.css";
 
 const { TextArea } = Input;
-// 设置 Editor 组件的默认值
-// 不能在 Editor.defaultProps 中设置
-// 因为 Editor 在 ComponentInput 中调用
-// 在 ComponentInput 中，需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
-const EditorDefaultProps = {
-  rows: 5,
-  placeholder: "说点什么吧...",
-  showEmoji: true,
-  showUpload: true,
-  submitText: "发表",
-  onChange: () => {}
-};
+// // 设置 Editor 组件的默认值
+// // 不能在 Editor.defaultProps 中设置
+// // 因为 Editor 在 ComponentInput 中调用
+// // 在 ComponentInput 中，需要使用 Editor 的 props 覆盖 ComponentInput 传入的 props
+// const EditorDefaultProps = {
+//   rows: 5,
+//   placeholder: "说点什么吧...",
+//   showEmoji: true,
+//   showUpload: true,
+//   submitText: "发表",
+//   onChange: () => {},
+// };
 
 class Editor extends React.Component {
   constructor(props) {
@@ -107,34 +107,10 @@ class Editor extends React.Component {
       });
     }
     this.props.onSubmit(value);
-
-    // const { type, commentId, replyId, handleToggleInput } = this.props;
-    // if (type === "normal") {
-    //   this.props.app.sCreateComment({
-    //     content: value,
-    //   });
-    // } else if (type === "comment") {
-    //   this.props.app.sCreateReply(
-    //     {
-    //       comment_id: commentId,
-    //       content: value,
-    //     },
-    //     () => handleToggleInput()
-    //   );
-    // } else if (type === "reply") {
-    //   this.props.app.sCreateReply(
-    //     {
-    //       comment_id: commentId,
-    //       content: value,
-    //       reply_id: replyId,
-    //     },
-    //     () => handleToggleInput()
-    //   );
-    // }
   }
 
   render() {
-    const props = { ...EditorDefaultProps, ...this.props };
+    // const props = { ...EditorDefaultProps, ...this.props };
     const {
       value,
       onChange,
@@ -148,7 +124,8 @@ class Editor extends React.Component {
       showEmoji,
       showUpload,
       submitText
-    } = props;
+    } = this.props;
+    // console.log("editor: ", this.props);
 
     return (
       <div className="editor">
@@ -248,4 +225,12 @@ Editor.propTypes = {
   onChange: PropTypes.func
 };
 
+Editor.defaultProps = {
+  rows: 5,
+  placeholder: "说点什么吧...",
+  showEmoji: true,
+  showUpload: true,
+  submitText: "发表"
+};
+
 export default Editor;

src/constant.js

@@ -11,3 +11,5 @@ export const OSS_LINK = "http://links-comment.oss-cn-beijing.aliyuncs.com";
 export const MAX_UPLOAD_NUMBER = 4;
 
 export const REGEXP = /\[.+?\]/g;
+
+export const AVATAR = "";