From d0417effab067259dd9719bafeec8898da0eff77 Mon Sep 17 00:00:00 2001
From: wjr <651969505@qq.com>
Date: Sun, 21 Aug 2022 21:07:39 +0800
Subject: [PATCH] feat: issue and jouranl support emoji

---
 src/forge/Order/Detail.js      | 104 +++++++++++++++++++++++++++++----
 src/forge/Order/order.css      |  18 ++++++
 src/forge/comments/comments.js | 103 ++++++++++++++++++++++++++++----
 3 files changed, 203 insertions(+), 22 deletions(-)

diff --git a/src/forge/Order/Detail.js b/src/forge/Order/Detail.js
index 4d1b47cfc..aa2c342a7 100644
--- a/src/forge/Order/Detail.js
+++ b/src/forge/Order/Detail.js
@@ -3,10 +3,11 @@ import { Link } from "react-router-dom";
 
 import axios from "axios";
 import { getImageUrl } from "educoder";
-import { Form, Popconfirm, Tag, Spin } from "antd";
+import { Form, Popconfirm, Tag, Spin, Popover, Icon, Button } from "antd";
 import Attachments from "../Upload/attachment";
 import RenderHtml from "../../components/render-html";
 import Comments from "../comments/comments";
+import update from 'immutability-helper'
 import "./order.css";
 
 class Detail extends Component {
@@ -50,6 +51,13 @@ class Detail extends Component {
       .get(url)
       .then((result) => {
         if (result) {
+          // todo 增加后台返回
+          result.data.emojiComment = {
+            "😀": {
+              "users": ["test"],
+              "total": 1
+            }
+          }
           this.setState({
             data: result.data,
             isSpins: false
@@ -190,7 +198,54 @@ class Detail extends Component {
 
   render() {
     const { projectsId, orderId, owner } = this.props.match.params;
+    const { current_user } = this.props
     const { data, isSpins } = this.state;
+    const emojiList = ["😀", "😅"];
+
+    const update_emoji_comment = (emoji) => {
+      // 无emoji评论
+      if (!data.emojiComment || !data.emojiComment[emoji] || data.emojiComment[emoji].users.length == 0) {
+        var emojiComment = data.emojiComment ? data.emojiComment : {}
+        emojiComment[emoji] = {
+          "users": [owner],
+          "total": 1
+        }
+        this.setState({
+          data: update(data, { emojiComment: { $set: emojiComment } })
+        })
+        return
+      }
+
+      // 有emoji评论
+      var userList = data.emojiComment[emoji].users
+      var addNewUser = true
+      for (var i = 0; i < userList.length; i++) {
+        if (userList[i] == owner) {
+          userList.splice(i, 1);
+          addNewUser = false
+          break
+        }
+      }
+      if (addNewUser) {
+        userList.push(owner)
+      }
+      var emojiComment = data.emojiComment
+      emojiComment[emoji] = {
+        "users": userList,
+        "total": userList.length
+      }
+      this.setState({
+        data: update(data, { emojiComment: { $set: emojiComment } })
+      })
+    }
+
+    const emojiComment = (
+      emojiList.map((emoji) => {
+        return <Button type="link" className="detail_emoji_comment_menu_item"
+          onClick={(e) => update_emoji_comment(emoji)} key={emoji}>{emoji}</Button>
+      })
+    );
+
     const get_color = (type) => {
       if (type === "高") {
         return "#e67e22";
@@ -233,7 +288,7 @@ class Detail extends Component {
                           : "合并请求"}
                         】
                       </span>
-                      <span className="font-16 fwb" style={{wordBreak:"break-all"}}>{data && data.subject}</span>
+                      <span className="font-16 fwb" style={{ wordBreak: "break-all" }}>{data && data.subject}</span>
                     </span>
 
                     {data && data.priority && (
@@ -279,8 +334,8 @@ class Detail extends Component {
                         </Link>
                       </span>
                     ) : (
-                        ""
-                      )}
+                      ""
+                    )}
                   </div>
                 </div>
               </div>
@@ -289,8 +344,8 @@ class Detail extends Component {
                   {data && data.description && data.description.length > 0 ? (
                     this.commentCtx(data.description)
                   ) : (
-                      <span className="color-grey-9 ml3 mr3">暂无描述</span>
-                    )}
+                    <span className="color-grey-9 ml3 mr3">暂无描述</span>
+                  )}
                 </div>
                 {data && data.attachments && data.attachments.length > 0 ? (
                   <Attachments
@@ -298,8 +353,37 @@ class Detail extends Component {
                     showNotification={this.props.showNotification}
                   />
                 ) : (
-                    ""
-                  )}
+                  ""
+                )}
+                <div className="detail_emoji_comment" >
+                  <style>
+                    {` 
+                      .ant-popover-inner-content {
+                        padding: 2px 5px;
+                      }
+                    `}
+                  </style>
+                  {current_user && current_user.login ? (
+                    <Popover content={emojiComment} trigger="click">
+                      <Button shape="circle"><Icon type="smile" theme="outlined" /></Button>
+                    </Popover>
+                  ) : ("")
+                  }
+                  {current_user && current_user.login && data && data.emojiComment ? (
+                    Object.keys(data.emojiComment).map(key => {
+                      const item = data.emojiComment[key]
+                      if (item.users.length == 0) {
+                        return
+                      }
+                      return <Popover className="detail_emoji_pop" content={item.users.join(",")} key={key}>
+                        <Button className="detail_emoji_button" shape="round" onClick={(e) => update_emoji_comment(key)}>
+                          {key}+{item.total}
+                        </Button>
+                      </Popover>
+                    })
+                  ) : ("")
+                  }
+                </div>
               </div>
             </div>
 
@@ -329,8 +413,8 @@ class Detail extends Component {
                       {data.issue_tags[0].name}
                     </span>
                   ) : (
-                      "--"
-                    )}
+                    "--"
+                  )}
                 </span>
               </p>
               <p className="grid-item-left pb15">
diff --git a/src/forge/Order/order.css b/src/forge/Order/order.css
index 0abd116f2..c9e21cdaf 100644
--- a/src/forge/Order/order.css
+++ b/src/forge/Order/order.css
@@ -44,6 +44,24 @@
   display: flex;
 }
 
+.detail_emoji_comment {
+  margin-top: 20px;
+}
+.detail_emoji_comment_menu {
+  padding: 5px;
+}
+.detail_emoji_comment_menu_item {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+.detail_emoji_pop {
+  margin-left: 10px;
+}
+.detail_emoji_button {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
 .detail_right {
   flex-grow: 1;
   text-align: right;
diff --git a/src/forge/comments/comments.js b/src/forge/comments/comments.js
index dca7581f2..aa8f9e673 100644
--- a/src/forge/comments/comments.js
+++ b/src/forge/comments/comments.js
@@ -5,14 +5,15 @@ import axios from "axios";
 import Upload from "../Upload/Index";
 import UploadImg from "../Images/upload.png";
 import { getImageUrl } from "educoder";
-import { List, Popconfirm, Pagination, Button, Tabs, Avatar } from "antd";
+import { List, Popconfirm, Pagination, Button, Tabs, Popover, Icon } from "antd";
 import Attachments from "../Upload/attachment";
 import MDEditor from "../../modules/tpm/challengesnew/tpm-md-editor";
 import RenderHtml from "../../components/render-html";
 import ChildrenComments from "./children_comments";
+import update from 'immutability-helper'
 import "../Order/order.css";
 const { TabPane } = Tabs;
-class comments extends Component { 
+class comments extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -94,7 +95,7 @@ class comments extends Component {
             this.setState({
               journal_spin: false
             });
-            if(result && result.data.status !== 411){
+            if (result && result.data.status !== 411) {
               this.props.showNotification(result.data.message);
             }
           })
@@ -202,7 +203,7 @@ class comments extends Component {
             </span>
             <span>
               {item.value && item.value.length > 0 ? (
-                item.detail === "标记"? (
+                item.detail === "标记" ? (
                   <span
                     className="issue-tag-show"
                     style={{ background: item.value[0].color }}
@@ -272,12 +273,12 @@ class comments extends Component {
   }
 
   commentCtx = (v) => {
-    return <RenderHtml className="break_word_comments imageLayerParent" value={v} url={this.props.history.location}/>;
+    return <RenderHtml className="break_word_comments imageLayerParent" value={v} url={this.props.history.location} />;
   };
-  Paginations = ()=>{
+  Paginations = () => {
     const { page, limit, search_count } = this.state;
-    if(search_count > limit){
-      return(
+    if (search_count > limit) {
+      return (
         <div className="pt30 mb50 edu-txt-center btp1">
           <Pagination
             simple
@@ -308,6 +309,62 @@ class comments extends Component {
       new_journal_id,
     } = this.state;
     const { current_user, only_show_content } = this.props;
+    const emojiList = ["😀", "😅"];
+
+    const update_emoji_comment = (item, emoji) => {
+      // 无emoji评论
+      if (!item.emojiComment || !item.emojiComment[emoji] || item.emojiComment[emoji].users.length == 0) {
+        const idx = journalsdata.issue_journals.findIndex(function (journal) {
+          return journal.id == item.id;
+        })
+        var emojiComment = item.emojiComment ? item.emojiComment : {}
+        emojiComment[emoji] = {
+          "users": [current_user.login],
+          "total": 1
+        }
+        var journal = journalsdata.issue_journals[idx]
+        journal.emojiComment = emojiComment
+        this.setState({
+          journalsdata: update(journalsdata, { issue_journals: { [idx]: { $set: journal } } })
+        })
+        return
+      }
+
+      // 有emoji评论
+      var userList = item.emojiComment[emoji].users
+      var addNewUser = true
+      for (var i = 0; i < userList.length; i++) {
+        if (userList[i] == current_user.login) {
+          userList.splice(i, 1);
+          addNewUser = false
+          break
+        }
+      }
+      if (addNewUser) {
+        userList.push(current_user.login)
+      }
+
+      const idx = journalsdata.issue_journals.findIndex(function (journal) {
+        return journal.id == item.id;
+      })
+      var emojiComment = item.emojiComment
+      emojiComment[emoji] = {
+        "users": userList,
+        "total": userList.length
+      }
+      var journal = journalsdata.issue_journals[idx]
+      journal.emojiComment = emojiComment
+      this.setState({
+        journalsdata: update(journalsdata, { issue_journals: { [idx]: { $set: journal } } })
+      })
+    };
+
+    const emojiComment = (item) => {
+      return emojiList.map((emoji) => {
+        return <Button type="link" className="detail_emoji_comment_menu_item"
+          onClick={(e) => update_emoji_comment(item, emoji)} key={emoji}>{emoji}</Button>
+      })
+    };
 
     const new_comment = (is_reply, item_id) => {
       return (
@@ -315,7 +372,7 @@ class comments extends Component {
           <Link
             to={`/${current_user && current_user.login}`}
             className="show-user-link mr10"
-          >
+          >1
             <img
               className="radius"
               src={getImageUrl(
@@ -416,11 +473,33 @@ class comments extends Component {
               ""
             )}
             <div className="grid-item mt5">
-              <span className="color-grey-8">{item.created_at}</span>
+              <div>
+                <span className="color-grey-8">{item.created_at}</span>
+                {current_user && current_user.login ? (
+                  <Popover content={emojiComment(item)} trigger="click" className="ml10">
+                    <Button shape="circle"><Icon type="smile" theme="outlined" /></Button>
+                  </Popover>
+                ) : ("")
+                }
+                {current_user && current_user.login && item.emojiComment ? (
+                  Object.keys(item.emojiComment).map(key => {
+                    const comments = item.emojiComment[key]
+                    if (comments.users.length == 0) {
+                      return
+                    }
+                    return <Popover className="detail_emoji_pop" content={comments.users.join(",")} key={key}>
+                      <Button className="detail_emoji_button" shape="round" onClick={(e) => update_emoji_comment(item, key)}>
+                        {key}+{comments.total}
+                      </Button>
+                    </Popover>
+                  })
+                ) : ("")
+                }
+              </div>
               <span className="text-right">
                 {current_user &&
-                (current_user.admin ||
-                  current_user.login === item.user_login) ? (
+                  (current_user.admin ||
+                    current_user.login === item.user_login) ? (
                   <Popconfirm
                     placement="bottom"
                     title={"确定要删除当前评论吗?"}