support liking a comment

Author: imsun

src/gitment.js

@@ -79,6 +79,7 @@ class Gitment {
       meta: {},
       comments: undefined,
       reactions: [],
+      commentReactions: {},
       currentPage: 1,
     })
 
@@ -133,7 +134,10 @@ class Gitment {
 
   update() {
     return Promise.all([this.loadMeta(), this.loadUserInfo()])
-      .then(() => Promise.all([this.loadComments(), this.loadReactions()]))
+      .then(() => Promise.all([
+        this.loadComments().then(() => this.loadCommentReactions()),
+        this.loadReactions(),
+      ]))
       .catch(e => this.state.error = e)
   }
 
@@ -212,7 +216,10 @@ class Gitment {
   }
 
   loadReactions() {
-    if (!this.accessToken) return Promise.resolve([])
+    if (!this.accessToken) {
+      this.state.reactions = []
+      return Promise.resolve([])
+    }
 
     return this.getIssue()
       .then((issue) => {
@@ -225,6 +232,31 @@ class Gitment {
       })
   }
 
+  loadCommentReactions() {
+    if (!this.accessToken) {
+      this.state.commentReactions = {}
+      return Promise.resolve([])
+    }
+
+    const comments = this.state.comments
+    const comentReactions = {}
+
+    return Promise.all(comments.map((comment) => {
+      if (!comment.reactions.heart) return []
+
+      const { owner, repo } = this
+      return http.get(`/repos/${owner}/${repo}/issues/comments/${comment.id}/reactions`, { content: 'heart' })
+    }))
+      .then(reactionsArray => {
+        comments.forEach((comment, index) => {
+          comentReactions[comment.id] = reactionsArray[index]
+        })
+        this.state.commentReactions = comentReactions
+
+        return comentReactions
+      })
+  }
+
   login() {
     window.location.href = this.loginLink
   }
@@ -270,6 +302,39 @@ class Gitment {
         this.state.meta.reactions.heart--
       })
   }
+
+  likeAComment(commentId) {
+    if (!this.accessToken) {
+      alert('Login to Like')
+      return Promise.reject()
+    }
+
+    const { owner, repo } = this
+    const comment = this.state.comments.find(comment => comment.id === commentId)
+
+    return http.post(`/repos/${owner}/${repo}/issues/comments/${commentId}/reactions`, {
+      content: 'heart',
+    })
+      .then(reaction => {
+        this.state.commentReactions[commentId].push(reaction)
+        comment.reactions.heart++
+      })
+  }
+
+  unlikeAComment(commentId) {
+    if (!this.accessToken) return Promise.reject()
+
+    const reactions = this.state.commentReactions[commentId]
+    const comment = this.state.comments.find(comment => comment.id === commentId)
+    const { user } = this.state
+    const index = reactions.findIndex(reaction => reaction.user.login === user.login)
+
+    return http.delete(`/reactions/${reactions[index].id}`)
+      .then(() => {
+        reactions.splice(index, 1)
+        comment.reactions.heart--
+      })
+  }
 }
 
 module.exports = Gitment

src/theme/default.js

@@ -38,7 +38,7 @@ function renderHeader({ meta, user, reactions }, instance) {
   return container
 }
 
-function renderComments({ meta, comments, currentPage, user, error }, instance) {
+function renderComments({ meta, comments, commentReactions, currentPage, user, error }, instance) {
   const container = document.createElement('div')
   container.className = 'gitment-container gitment-comments-container'
 
@@ -104,10 +104,21 @@ function renderComments({ meta, comments, currentPage, user, error }, instance)
             ? ` • <span title="comment was edited at ${updateDate}">edited</span>`
             : ''
           }
+          <div class="gitment-comment-like-btn">${heartIcon} ${comment.reactions.heart || ''}</div>
         </div>
         <div class="gitment-comment-body gitment-markdown">${comment.body_html}</div>
       </div>
     `
+    const likeButton = commentItem.querySelector('.gitment-comment-like-btn')
+    const likedReaction = commentReactions[comment.id]
+      && commentReactions[comment.id].find(reaction => reaction.user.login === user.login)
+    if (likedReaction) {
+      likeButton.classList.add('liked')
+      likeButton.onclick = () => instance.unlikeAComment(comment.id)
+    } else {
+      likeButton.classList.remove('liked')
+      likeButton.onclick = () => instance.likeAComment(comment.id)
+    }
     commentsList.appendChild(commentItem)
   })
 

style/default.css

@@ -58,16 +58,27 @@
   border-bottom: 2px solid #e6ebf1;
 }
 
-.gitment-header-like-btn {
+.gitment-header-like-btn,
+.gitment-comment-like-btn {
   cursor: pointer;
 }
 
+.gitment-comment-like-btn {
+  float: right;
+}
+
 .gitment-header-like-btn svg {
   vertical-align: middle;
   height: 30px;
 }
 
-.gitment-header-like-btn.liked svg {
+.gitment-comment-like-btn svg {
+  vertical-align: middle;
+  height: 20px;
+}
+
+.gitment-header-like-btn.liked svg,
+.gitment-comment-like-btn.liked svg {
   fill: #f05f70;
 }
 
@@ -416,6 +427,7 @@ a.gitment-editor-footer-tip:hover {
 }
 
 .gitment-footer-container {
+  margin: 19px 0;
   text-align: right;
 }