Merge Notification with NotificationPostCard

cc @mattwr18 Please don't see this as a revert of your work. Your
structure of the `notification-post-card` component was helpful and showed
the redundancy with `hc-post-card`. I reused a lot of the code, but
because I merged both components it now *looks* as if I authored all the code.

webapp/components/notifications/Notification/NotificationPostCard.vue

@@ -1,81 +0,0 @@
-<template>
-  <ds-card
-    :header="post.title"
-    :image="post.image"
-    :class="{'post-card': true, 'disabled-content': post.disabled}"
-    hover
-    space="x-small"
-  >
-    <nuxt-link
-      class="post-link"
-      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
-    >
-      {{ post.title }}
-    </nuxt-link>
-    <ds-space margin-bottom="x-small" />
-    <no-ssr>
-      <hc-user
-        :user="post.author"
-        :trunc="35"
-      />
-    </no-ssr>
-    <ds-space margin-bottom="x-small" />
-    <!-- eslint-disable vue/no-v-html -->
-    <!-- TODO: replace editor content with tiptap render view -->
-    <div
-      class="hc-editor-content"
-      v-html="excerpt"
-    />
-    <!-- eslint-enable vue/no-v-html -->
-  </ds-card>
-</template>
-
-<script>
-import HcUser from '~/components/User'
-
-export default {
-  name: 'HcPostCard',
-  components: {
-    HcUser
-  },
-  props: {
-    post: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    excerpt() {
-      const { contentExcerpt } = this.post
-      if (!contentExcerpt) return ''
-      // remove all links from excerpt to prevent issues with the sorrounding link
-      let excerpt = contentExcerpt.replace(/<a.*>(.+)<\/a>/gim, '$1')
-      // do not display content that is only linebreaks
-      if (excerpt.replace(/<br>/gim, '').trim() === '') {
-        excerpt = ''
-      }
-
-      return excerpt
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.post-card {
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-
-  .post-link {
-    margin: 15px;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-indent: -999999px;
-  }
-}
-</style>

webapp/components/notifications/Notification/index.vue

@@ -1,21 +1,48 @@
 <template>
-  <nuxt-link
+  <ds-space margin-bottom="x-small">
-    :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
+    <no-ssr>
-    @click.native="$emit('read')"
+      <ds-space margin-bottom="x-small">
-  >
+      <hc-user
-    <ds-space margin-bottom="x-small">
+        :user="post.author"
-      <hc-notification-post-card :post="post" />
+        :trunc="35"
-    </ds-space>
+      />
-  </nuxt-link>
+      </ds-space>
+      <ds-text color="soft">
+        {{ $t("notifications.menu.mentioned") }}
+      </ds-text>
+    </no-ssr>
+    <ds-space margin-bottom="x-small" />
+    <nuxt-link
+      class="notification-mention-post"
+      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
+      @click.native="$emit('read')"
+    >
+      <ds-space margin-bottom="x-small">
+        <ds-card
+          :header="post.title"
+          :image="post.image"
+          :class="{'post-card': true, 'disabled-content': post.disabled}"
+          hover
+          space="x-small"
+        >
+          <ds-space margin-bottom="x-small" />
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-html="excerpt" />
+        <!-- eslint-enable vue/no-v-html -->
+        </ds-card>
+      </ds-space>
+    </nuxt-link>
+  </ds-space>
 </template>
 
 <script>
-import HcNotificationPostCard from './NotificationPostCard.vue'
+import HcUser from '~/components/User'
+import RemoveLinks from '~/mixins/removeLinks'
 
 export default {
   name: 'Notification',
   components: {
-    HcNotificationPostCard
+    HcUser
   },
   props: {
     notification: {
@@ -24,8 +51,11 @@ export default {
     }
   },
   computed: {
+    excerpt() {
+      return RemoveLinks.methods.removeLinks(this.post.contentExcerpt)
+    },
     post() {
-      return this.notification.post
+      return this.notification.post || {}
     }
   }
 }

webapp/components/notifications/Notification/spec.js

@@ -11,9 +11,13 @@ config.stubs['no-ssr'] = '<span><slot /></span>'
 describe('Notification', () => {
   let wrapper
   let stubs
+  let mocks
   let propsData
   beforeEach(() => {
     propsData = {}
+    mocks = {
+      $t: jest.fn()
+    }
     stubs = {
       NuxtLink: RouterLinkStub
     }
@@ -22,6 +26,7 @@ describe('Notification', () => {
   const Wrapper = () => {
     return mount(Notification, {
       stubs,
+      mocks,
       propsData,
       localVue
     })

webapp/components/notifications/NotificationList/spec.js

@@ -114,7 +114,7 @@ describe('NotificationList.vue', () => {
     describe('click on a notification', () => {
       beforeEach(() => {
         wrapper
-          .findAll(Notification)
+          .findAll('.notification-mention-post')
           .at(1)
           .trigger('click')
       })

webapp/locales/de.json

@@ -18,6 +18,11 @@
     "commented": "Kommentiert",
     "socialMedia": "Wo sonst finde ich"
   },
+  "notifications": {
+    "menu": {
+       "mentioned": "hat dich in einem Beitrag erwähnt"
+    }
+  },
   "search": {
     "placeholder": "Suchen",
     "hint": "Wonach suchst du?",

webapp/locales/en.json

@@ -18,6 +18,11 @@
     "commented": "Commented",
     "socialMedia": "Where else can I find"
   },
+  "notifications": {
+    "menu": {
+      "mentioned": "has mentioned you in a post"
+    }
+  },
   "search": {
     "placeholder": "Search",
     "hint": "What are you searching for?",