덧글추가 + uuid 설치

package.json

@@ -19,6 +19,7 @@
     "md5": "^2.2.1",
     "nuxt": "^2.0.0",
     "slugify": "^1.3.6",
+    "uuid": "^3.3.3",
     "vue-material": "^1.0.0-beta-11",
     "vuelidate": "^0.7.4"
   },

pages/headlines/_slug.vue

@@ -1,43 +1,86 @@
 <template>
   <div class="md-layout md-alignment-center" style="margin: 5em 0">
-    <!--Headline Markup-->
-    <md-card class="md-layout-item md-size-75 md-small-size-80 md-xsmall-size-100">
-      <md-card-media style="height: 300px" md-ratio="16:9">
-        <img :src="headline.urlToImage" :alt="headline.title">
-      </md-card-media>
+    <div class="md-layout-item md-size-75 md-small-size-80 md-xsmall-size-100">
+      <!--Headline Markup-->
+      <md-card>
+        <md-card-media style="height: 300px" md-ratio="16:9">
+          <img :src="headline.urlToImage" :alt="headline.title">
+        </md-card-media>
 
-      <md-card-header>
-        <div class="md-title">
-          <a :href="headline.url" target="_blank">{{ headline.title }}</a>
-        </div>
-        <div>
-          {{ headline.source.name }}
-          <md-icon>book</md-icon>
-        </div>
-        <span class="md-subhead">
-          {{ headline.author }}
-          <md-icon>face</md-icon>
-        </span>
-      </md-card-header>
-      <md-card-content>{{ headline.content }}</md-card-content>
-    </md-card>
+        <md-card-header>
+          <div class="md-title">
+            <a :href="headline.url" target="_blank">{{ headline.title }}</a>
+          </div>
+          <div>
+            {{ headline.source.name }}
+            <md-icon>book</md-icon>
+          </div>
+          <span class="md-subhead">
+            {{ headline.author }}
+            <md-icon>face</md-icon>
+          </span>
+        </md-card-header>
+        <md-card-content>{{ headline.content }}</md-card-content>
+      </md-card>
 
-    <!-- Back Button -->
-    <md-button @click="$router.go(-1)" class="md-fixed md-fab-bottom-right md-fab md-primary">
-      <md-icon>arrow_back</md-icon>
-    </md-button>
+      <!-- Comment Form -->
+      <form @submit.prevent="sendComment">
+        <md-field>
+          <label for="">Enter Your Comment</label>
+          <md-textarea v-model="text" :disabled="loading || !user" />
+          <md-icon>description</md-icon>
+        </md-field>
+        <md-button :disabled="loading || !user" class="md-primary md-raised" type="submit">
+          Send Comment
+        </md-button>
+      </form>
+
+      <!-- Back Button -->
+      <md-button @click="$router.go(-1)" class="md-fixed md-fab-bottom-right md-fab md-primary">
+        <md-icon>arrow_back</md-icon>
+      </md-button>
+    </div>
   </div>
 </template>
 
 <script>
+import uuidv4 from 'uuid/v4'
+
 export default {
+  data: () => ({
+    text: ''
+  }),
   computed: {
     headline () {
       return this.$store.getters.headline
+    },
+    user () {
+      return this.$store.getters.user
+    },
+    loading () {
+      return this.$store.getters.loading
     }
   },
   async fetch ({ store, params }) {
     await store.dispatch('loadHeadline', params.slug)
+  },
+  methods: {
+    async sendComment () {
+      const comment = {
+        id: uuidv4(),
+        text: this.text,
+        user: this.getCommentUserData(),
+        publishedAt: Date.now(),
+        likes: 0
+      }
+      await this.$store.dispatch('sendComment', comment)
+      this.text = ''
+    },
+    getCommentUserData () {
+      const commentUserData = { ...this.user }
+      commentUserData.username = commentUserData.email.split('@')[0]
+      return commentUserData
+    }
   }
 }
 </script>

store/index.js

@@ -103,6 +103,23 @@ const createStore = () => {
           }
         })
       },
+      async sendComment ({ commit, state }, comment) {
+        const commentRef = db.collection(`headlines/${state.headline.slug}/comments`)
+
+        commit('setLoading', true)
+        await commentRef.doc(comment.id).set(comment)
+        await commentRef.get().then((querySnapshot) => {
+          // eslint-disable-next-line prefer-const
+          let comments = []
+
+          querySnapshot.forEach((doc) => {
+            comments.push(doc.data())
+            const updateHeadline = { ...state.headline, comments }
+            commit('setHeadline', updateHeadline)
+          })
+        })
+        commit('setLoading', false)
+      },
       async saveHeadline (context, headline) {
         const headlineRef = db.collection('headlines').doc(headline.slug)