Extract CommentsList component

- this allows to Query for comments by Post

webapp/components/CommentForm/index.vue

@@ -91,7 +91,7 @@ export default {
           }
         })
         .then(res => {
-          this.$emit('addComment', res.data.CreateComment)
+          this.$root.$emit('addComment', res.data.CreateComment)
           this.$refs.editor.clear()
           this.$toast.success(this.$t('post.comment.submitted'))
         })

webapp/components/CommentList/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <h3 style="margin-top: -10px;">
+      <span>
+        <ds-icon name="comments" />
+        <ds-tag
+          v-if="comments"
+          style="margin-top: -4px; margin-left: -12px; position: absolute;"
+          color="primary"
+          size="small"
+          round
+        >{{ comments.length }}</ds-tag>&nbsp; Comments
+      </span>
+    </h3>
+    <ds-space margin-bottom="large" />
+    <div
+      v-if="comments && comments.length"
+      id="comments"
+      class="comments"
+    >
+      <comment
+        v-for="comment in comments"
+        :key="comment.id"
+        :comment="comment"
+      />
+    </div>
+    <hc-empty
+      v-else
+      icon="messages"
+    />
+  </div>
+</template>
+<script>
+import Comment from '~/components/Comment.vue'
+import HcEmpty from '~/components/Empty.vue'
+
+export default {
+  components: {
+    Comment,
+    HcEmpty
+  },
+  props: {
+    post: { type: Object, default: () => {} }
+  },
+  data() {
+    return {
+      comments: null
+    }
+  },
+  watch: {
+    Post(post) {
+      this.comments = post[0].comments || {}
+    }
+  },
+  mounted() {
+    this.$root.$on('addComment', comment => {
+      this.addComment(comment)
+    })
+  },
+  methods: {
+    addComment(comment) {
+      this.$apollo.queries.Post.refetch()
+    }
+  },
+  apollo: {
+    Post: {
+      query() {
+        return require('~/graphql/PostCommentsQuery.js').default(this)
+      },
+      variables() {
+        return {
+          slug: this.post.slug
+        }
+      },
+      fetchPolicy: 'cache-and-network'
+    }
+  }
+}
+</script>

webapp/graphql/PostCommentsQuery.js

@@ -0,0 +1,40 @@
+import gql from 'graphql-tag'
+
+export default app => {
+  const lang = app.$i18n.locale().toUpperCase()
+  return gql(`
+    query Post($slug: String!) {
+      Post(slug: $slug) {
+        commentsCount
+        comments(orderBy: createdAt_asc) {
+          id
+          contentExcerpt
+          createdAt
+          disabled
+          deleted
+          author {
+            id
+            slug
+            name
+            avatar
+            disabled
+            deleted
+            shoutedCount
+            contributionsCount
+            commentsCount
+            followedByCount
+            followedByCurrentUser
+            location {
+              name: name${lang}
+            }
+            badges {
+              id
+              key
+              icon
+            }
+          }
+        }
+      }
+    }
+  `)
+}

webapp/pages/post/_id/_slug/index.vue

@@ -96,39 +96,9 @@
       <ds-space margin="small" />
       <!-- Comments -->
       <ds-section slot="footer">
-        <h3 style="margin-top: -10px;">
-          <span>
-            <ds-icon name="comments" />
-            <ds-tag
-              v-if="comments"
-              style="margin-top: -4px; margin-left: -12px; position: absolute;"
-              color="primary"
-              size="small"
-              round
-            >{{ comments.length }}</ds-tag>&nbsp; Comments
-          </span>
-        </h3>
+        <hc-comment-list :post="post" />
         <ds-space margin-bottom="large" />
-        <div
-          v-if="comments && comments.length"
-          id="comments"
-          class="comments"
-        >
-          <comment
-            v-for="comment in comments"
-            :key="comment.id"
-            :comment="comment"
-          />
-        </div>
-        <hc-empty
-          v-else
-          icon="messages"
-        />
-        <ds-space margin-bottom="large" />
-        <hc-comment-form
-          :post="post"
-          @addComment="addComment"
-        />
+        <hc-comment-form :post="post" />
       </ds-section>
     </ds-card>
   </transition>
@@ -142,9 +112,8 @@ import HcTag from '~/components/Tag'
 import ContentMenu from '~/components/ContentMenu'
 import HcUser from '~/components/User'
 import HcShoutButton from '~/components/ShoutButton.vue'
-import HcEmpty from '~/components/Empty.vue'
 import HcCommentForm from '~/components/CommentForm'
-import Comment from '~/components/Comment.vue'
+import HcCommentList from '~/components/CommentList'
 
 export default {
   transition: {
@@ -156,10 +125,9 @@ export default {
     HcCategory,
     HcUser,
     HcShoutButton,
-    HcEmpty,
-    Comment,
     ContentMenu,
-    HcCommentForm
+    HcCommentForm,
+    HcCommentList
   },
   head() {
     return {
@@ -169,7 +137,6 @@ export default {
   data() {
     return {
       post: null,
-      comments: null,
       ready: false,
       title: 'loading'
     }
@@ -178,9 +145,6 @@ export default {
     Post(post) {
       this.post = post[0] || {}
       this.title = this.post.title
-    },
-    Comment(comments) {
-      this.comments = comments || []
     }
   },
   async asyncData(context) {
@@ -289,22 +253,6 @@ export default {
   methods: {
     isAuthor(id) {
       return this.$store.getters['auth/user'].id === id
-    },
-    addComment(comment) {
-      this.$apollo.queries.Comment.refetch()
-    }
-  },
-  apollo: {
-    Comment: {
-      query() {
-        return require('~/graphql/CommentQuery.js').default(this)
-      },
-      variables() {
-        return {
-          postId: this.post.id
-        }
-      },
-      fetchPolicy: 'cache-and-network'
     }
   }
 }