implemented upvoting and downvoting of comments

Author: ksraj123

src/user/Admin/Tickets/TicketDiscussion/Discussion/Discussion.js

@@ -11,6 +11,8 @@ import EditButton from "@material-ui/icons/EditOutlined";
 import CancelButton from "@material-ui/icons/ClearOutlined";
 import SendOutlinedIcon from "@material-ui/icons/SendOutlined";
 import userIcon2 from "../../../../../assets/images/userIcon2.jpg";
+import ThumbDownOutlinedIcon from "@material-ui/icons/ThumbDownOutlined";
+import ThumbUpAltOutlinedIcon from "@material-ui/icons/ThumbUpAltOutlined";
 
 class Discussion extends Component {
   constructor(props) {
@@ -176,6 +178,30 @@ class Discussion extends Component {
                       <ReactMarkdown source={ele.content} />
                     </div>
                   </div>
+                  <div className="comment-footer">
+                    <div
+                      className={
+                        ele.votes.upVotes.user.indexOf(currentUser.id) === -1
+                          ? ""
+                          : "selected"
+                      }
+                      onClick={() => this.props.upVoteComment(ele._id)}
+                    >
+                      <ThumbUpAltOutlinedIcon />
+                      <span>{ele.votes.upVotes.user.length}</span>
+                    </div>
+                    <div
+                      className={
+                        ele.votes.downVotes.user.indexOf(currentUser.id) === -1
+                          ? ""
+                          : "selected"
+                      }
+                      onClick={() => this.props.downVoteComment(ele._id)}
+                    >
+                      <ThumbDownOutlinedIcon />
+                      <span>{ele.votes.downVotes.user.length}</span>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>

src/user/Admin/Tickets/TicketDiscussion/TicketDiscussion.scss

@@ -140,6 +140,27 @@
               margin: 3px;
               /* identical to box height */
             }
+            .comment-footer {
+              display: flex;
+              div {
+                width: 50px;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                span {
+                  margin-left: 5px;
+                }
+                svg {
+                  color: rgba(0,0,0,0.5);
+                }
+              }
+              .selected{
+                background-color: #F5F5F5;
+                svg {
+                  color: #1a73e8;
+                }
+              }
+            }
             small {
               font-family: Inter;
               font-style: normal;
@@ -240,7 +261,7 @@
           cursor: pointer;
         }
       }
-      .dropdown-toggle{
+      .dropdown-toggle {
         display: flex;
         align-items: center;
       }

src/user/Admin/Tickets/TicketDiscussion/TicketDiscussions.js

@@ -76,6 +76,36 @@ class TicketDiscussions extends Component {
     }
   };
 
+  handleCommentUpvote = async (commentId) => {
+    try {
+      const newTicket = (
+        await Axios.put(
+          `${BASE_URL}/ticket/${this.state.ticket._id}/comment/${commentId}/upvote`
+        )
+      ).data.ticket;
+      this.setState({
+        ticket: newTicket,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  handleCommentDownvote = async (commentId) => {
+    try {
+      const newTicket = (
+        await Axios.put(
+          `${BASE_URL}/ticket/${this.state.ticket._id}/comment/${commentId}/downvote`
+        )
+      ).data.ticket;
+      this.setState({
+        ticket: newTicket,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
   handleAddTag = async (tagName) => {
     if (this.state.ticket.tags.indexOf(tagName) !== -1) {
       toast.error("Tag already present");
@@ -143,6 +173,8 @@ class TicketDiscussions extends Component {
                 sendComment={this.sendComment}
                 editsAllowed={this.editsAllowed}
                 updateTicket={this.handleUpdateTicket}
+                upVoteComment={this.handleCommentUpvote}
+                downVoteComment={this.handleCommentDownvote}
               />
             )}
             {this.state.view === "history" && (