From 6a50ef6134a240d5725df87c039908d937bb846d Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Wed, 16 Oct 2019 00:50:43 +0200
Subject: [PATCH] fix: storybook story of Comment.vue

This is the best solution that I can think of right now. Sure, it's not
so great to pass a property down from the page component. But at least
it fixes the storybook story, which is something.
---
 webapp/components/Comment/Comment.spec.js         |  3 ---
 webapp/components/Comment/Comment.vue             | 12 ++++--------
 webapp/components/CommentList/CommentList.spec.js |  3 ---
 webapp/components/CommentList/CommentList.vue     |  2 ++
 webapp/pages/post/_id/_slug/index.vue             |  2 +-
 5 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/webapp/components/Comment/Comment.spec.js b/webapp/components/Comment/Comment.spec.js
index 31ce8a40e..59e3f6c5a 100644
--- a/webapp/components/Comment/Comment.spec.js
+++ b/webapp/components/Comment/Comment.spec.js
@@ -32,9 +32,6 @@ describe('Comment.vue', () => {
         truncate: a => a,
         removeHtml: a => a,
       },
-      $route: {
-        hash: '',
-      },
       $scrollTo: jest.fn(),
       $apollo: {
         mutate: jest.fn().mockResolvedValue({
diff --git a/webapp/components/Comment/Comment.vue b/webapp/components/Comment/Comment.vue
index a8b1576b9..abb1ff4eb 100644
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@@ -71,7 +71,7 @@ export default {
   mixins: [scrollToAnchor],
   data() {
     const anchor = `commentId-${this.comment.id}`
-    const isTarget = this.$route.hash === `#${anchor}`
+    const isTarget = this.routeHash === `#${anchor}`
 
     return {
       anchor,
@@ -87,13 +87,9 @@ export default {
     HcCommentForm,
   },
   props: {
-    post: { type: Object, default: () => {} },
-    comment: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
+    routeHash: { type: String, default: () => '' },
+    post: { type: Object, default: () => ({}) },
+    comment: { type: Object, default: () => ({}) },
     dateTime: { type: [Date, String], default: null },
   },
   computed: {
diff --git a/webapp/components/CommentList/CommentList.spec.js b/webapp/components/CommentList/CommentList.spec.js
index 16b284134..3287b7cd4 100644
--- a/webapp/components/CommentList/CommentList.spec.js
+++ b/webapp/components/CommentList/CommentList.spec.js
@@ -42,9 +42,6 @@ describe('CommentList.vue', () => {
           truncate: a => a,
           removeHtml: a => a,
         },
-        $route: {
-          hash: '',
-        },
         $scrollTo: jest.fn(),
         $apollo: {
           queries: {
diff --git a/webapp/components/CommentList/CommentList.vue b/webapp/components/CommentList/CommentList.vue
index f1cdf910b..b1a79fd21 100644
--- a/webapp/components/CommentList/CommentList.vue
+++ b/webapp/components/CommentList/CommentList.vue
@@ -22,6 +22,7 @@
         :key="comment.id"
         :comment="comment"
         :post="post"
+        :routeHash="routeHash"
         @deleteComment="updateCommentList"
         @updateComment="updateCommentList"
       />
@@ -38,6 +39,7 @@ export default {
     Comment,
   },
   props: {
+    routeHash: { type: String, default: () => '' },
     post: { type: Object, default: () => {} },
   },
   methods: {
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index 9a4d12c26..0cb26b62e 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -68,7 +68,7 @@
       </ds-space>
       <!-- Comments -->
       <ds-section slot="footer">
-        <hc-comment-list :post="post" />
+        <hc-comment-list :post="post" :routeHash="$route.hash" />
         <ds-space margin-bottom="large" />
         <hc-comment-form :post="post" @createComment="createComment" />
       </ds-section>