덧글 좋아요 및 덧글 정렬 추가

pages/headlines/_slug.vue

@@ -15,7 +15,7 @@
             {{ headline.source.name }}
             <md-icon>book</md-icon>
           </div>
-          <span class="md-subhead">
+          <span v-if="headline.author" class="md-subhead">
             {{ headline.author }}
             <md-icon>face</md-icon>
           </span>
@@ -46,7 +46,7 @@
           </div>
 
           <md-badge :md-content="comment.likes" class="md-primary" md-postion="bottom" />
-          <md-button :disabled="loading || !user" class="md-icon-button">
+          <md-button @click="likeComment(comment.id)" :disabled="loading || !user" class="md-icon-button">
             <md-icon>thumb_up</md-icon>
           </md-button>
         </md-list-item>
@@ -93,6 +93,9 @@ export default {
       await this.$store.dispatch('sendComment', comment)
       this.text = ''
     },
+    async likeComment (commentId) {
+      await this.$store.dispatch('likeComment', commentId)
+    },
     getCommentUserData () {
       const commentUserData = { ...this.user }
       commentUserData.username = commentUserData.email.split('@')[0]

store/index.js

@@ -95,7 +95,7 @@ const createStore = () => {
       },
       async loadHeadline ({ commit }, headlineSlug) {
         const headlineRef = db.collection('headlines').doc(headlineSlug)
-        const commentsRef = db.collection(`headlines/${headlineSlug}/comments`)
+        const commentsRef = db.collection(`headlines/${headlineSlug}/comments`).orderBy('likes', 'desc')
 
         let loadedHeadline = {}
         await headlineRef.get().then(async (doc) => {
@@ -124,7 +124,7 @@ const createStore = () => {
 
         commit('setLoading', true)
         await commentRef.doc(comment.id).set(comment)
-        await commentRef.get().then((querySnapshot) => {
+        await commentRef.orderBy('likes', 'desc').get().then((querySnapshot) => {
           // eslint-disable-next-line prefer-const
           let comments = []
 
@@ -136,6 +136,35 @@ const createStore = () => {
         })
         commit('setLoading', false)
       },
+      async likeComment ({ state, commit }, commentId) {
+        const commentsRef = db.collection(`headlines/${state.headline.slug}/comments`).orderBy('likes', 'desc')
+        const likedCommentRef = db.collection('headlines').doc(state.headline.slug).collection('comments').doc(commentId)
+
+        await likedCommentRef.get().then((doc) => {
+          if (doc.exists) {
+            const prevLikes = doc.data().likes
+            const currentLikes = prevLikes + 1
+
+            likedCommentRef.update({
+              likes: currentLikes
+            })
+          }
+        })
+
+        await commentsRef.onSnapshot((querySnapshot) => {
+          // eslint-disable-next-line prefer-const
+          let loadedComments = []
+
+          querySnapshot.forEach((doc) => {
+            loadedComments.push(doc.data())
+            const updateHeadline = {
+              ...state.headline,
+              comments: loadedComments
+            }
+            commit('setHeadline', updateHeadline)
+          })
+        })
+      },
       async saveHeadline (context, headline) {
         const headlineRef = db.collection('headlines').doc(headline.slug)