From 055b79bfe224a3ab994a666989981ec418c1aa7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 17 Apr 2019 01:46:29 +0200
Subject: [PATCH] RemoveLinks is better suited as a filter

Unfortunately with `v-html` you cannot use filters directly in
handlebars.
See: https://github.com/nuxt/nuxt.js/issues/231

I also fixed the tests even **without** mocking vue-filters.js plugin :+1:
---
 webapp/components/PostCard/index.vue              |  3 +--
 webapp/components/PostCard/spec.js                |  2 ++
 .../notifications/Notification/index.vue          | 13 ++++++-------
 .../components/notifications/Notification/spec.js |  2 ++
 .../notifications/NotificationList/spec.js        |  2 ++
 .../notifications/NotificationMenu/spec.js        |  2 ++
 webapp/mixins/removeLinks.js                      | 15 ---------------
 webapp/plugins/vue-filters.js                     | 13 ++++++++++++-
 8 files changed, 27 insertions(+), 25 deletions(-)
 delete mode 100644 webapp/mixins/removeLinks.js

diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index 6cf5b5d7c..acddba5d6 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -76,7 +76,6 @@
 import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 import { randomBytes } from 'crypto'
-import RemoveLinks from '~/mixins/removeLinks.js'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -96,7 +95,7 @@ export default {
       user: 'auth/user'
     }),
     excerpt() {
-      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
+      return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     isAuthor() {
       const { author } = this.post
diff --git a/webapp/components/PostCard/spec.js b/webapp/components/PostCard/spec.js
index cb1be45ee..1914733c0 100644
--- a/webapp/components/PostCard/spec.js
+++ b/webapp/components/PostCard/spec.js
@@ -2,11 +2,13 @@ import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
 import PostCard from '.'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.use(Filters)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'
diff --git a/webapp/components/notifications/Notification/index.vue b/webapp/components/notifications/Notification/index.vue
index 14f660ed6..40b7d9405 100644
--- a/webapp/components/notifications/Notification/index.vue
+++ b/webapp/components/notifications/Notification/index.vue
@@ -2,11 +2,11 @@
   <ds-space margin-bottom="x-small">
     <no-ssr>
       <ds-space margin-bottom="x-small">
-      <hc-user
-        :user="post.author"
-        :date-time="post.createdAt"
-        :trunc="35"
-      />
+        <hc-user
+          :user="post.author"
+          :date-time="post.createdAt"
+          :trunc="35"
+        />
       </ds-space>
       <ds-text color="soft">
         {{ $t("notifications.menu.mentioned") }}
@@ -38,7 +38,6 @@
 
 <script>
 import HcUser from '~/components/User'
-import RemoveLinks from '~/mixins/removeLinks'
 
 export default {
   name: 'Notification',
@@ -53,7 +52,7 @@ export default {
   },
   computed: {
     excerpt() {
-      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
+      return this.$filters.removeLinks(this.post.contentExcerpt)
     },
     post() {
       return this.notification.post || {}
diff --git a/webapp/components/notifications/Notification/spec.js b/webapp/components/notifications/Notification/spec.js
index c65f0ba3c..c55ea7bdc 100644
--- a/webapp/components/notifications/Notification/spec.js
+++ b/webapp/components/notifications/Notification/spec.js
@@ -1,10 +1,12 @@
 import { config, mount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
 import Notification from '.'
 import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
+localVue.use(Filters)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 
diff --git a/webapp/components/notifications/NotificationList/spec.js b/webapp/components/notifications/NotificationList/spec.js
index a4c129620..c433abd80 100644
--- a/webapp/components/notifications/NotificationList/spec.js
+++ b/webapp/components/notifications/NotificationList/spec.js
@@ -9,6 +9,7 @@ import NotificationList from '.'
 import Notification from '../Notification'
 import Vue from 'vue'
 import Vuex from 'vuex'
+import Filters from '~/plugins/vue-filters'
 
 import Styleguide from '@human-connection/styleguide'
 
@@ -16,6 +17,7 @@ const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
diff --git a/webapp/components/notifications/NotificationMenu/spec.js b/webapp/components/notifications/NotificationMenu/spec.js
index a9f89f31f..4c9dd9d43 100644
--- a/webapp/components/notifications/NotificationMenu/spec.js
+++ b/webapp/components/notifications/NotificationMenu/spec.js
@@ -2,10 +2,12 @@ import { config, shallowMount, createLocalVue } from '@vue/test-utils'
 import NotificationMenu from '.'
 
 import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Styleguide)
+localVue.use(Filters)
 localVue.filter('truncate', string => string)
 
 config.stubs['dropdown'] = '<span class="dropdown"><slot /></span>'
diff --git a/webapp/mixins/removeLinks.js b/webapp/mixins/removeLinks.js
deleted file mode 100644
index e9a2de6b8..000000000
--- a/webapp/mixins/removeLinks.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  methods: {
-    removeLinks(content) {
-      if (!content) return ''
-      // remove all links from excerpt to prevent issues with the surrounding link
-      let excerpt = content.replace(/<a.*>(.+)<\/a>/gim, '$1')
-      // do not display content that is only linebreaks
-      if (excerpt.replace(/<br>/gim, '').trim() === '') {
-        excerpt = ''
-      }
-
-      return excerpt
-    }
-  }
-}
diff --git a/webapp/plugins/vue-filters.js b/webapp/plugins/vue-filters.js
index 93fa1f50b..bf59a7dba 100644
--- a/webapp/plugins/vue-filters.js
+++ b/webapp/plugins/vue-filters.js
@@ -6,7 +6,7 @@ import formatRelative from 'date-fns/formatRelative'
 import addSeconds from 'date-fns/addSeconds'
 import accounting from 'accounting'
 
-export default ({ app }) => {
+export default ({ app = {} }) => {
   const locales = {
     en: enUS,
     de: de,
@@ -88,6 +88,17 @@ export default ({ app }) => {
           return index === 0 ? letter.toUpperCase() : letter.toLowerCase()
         })
         .replace(/\s+/g, '')
+    },
+    removeLinks: content => {
+      if (!content) return ''
+      // remove all links from excerpt to prevent issues with the surrounding link
+      let excerpt = content.replace(/<a.*>(.+)<\/a>/gim, '$1')
+      // do not display content that is only linebreaks
+      if (excerpt.replace(/<br>/gim, '').trim() === '') {
+        excerpt = ''
+      }
+
+      return excerpt
     }
   })