From 5b9cfe5f28729ce467de00f67784aed6155a7b28 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 25 Oct 2022 02:58:09 +0200
Subject: [PATCH] computed for linkified message object in linkify message
 component

---
 .../ContributionMessagesListItem.vue          | 19 ++---------------
 .../ContributionMessages/LinkifyMessage.vue   | 21 +++++++++++++++++--
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index dbcf2fbb6..9c7a3a0f2 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -4,14 +4,14 @@
       <b-avatar variant="info"></b-avatar>
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
-      <linkify-message :linkifiedMessage="linkifiedMessage"></linkify-message>
+      <linkify-message :message="message.message"></linkify-message>
     </div>
     <div v-else class="is-moderator text-left">
       <b-avatar square variant="warning"></b-avatar>
       <span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
       <span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
       <small class="ml-4 text-success">{{ $t('community.moderator') }}</small>
-      <linkify-message :linkifiedMessage="linkifiedMessage"></linkify-message>
+      <linkify-message :message="message.message"></linkify-message>
     </div>
   </div>
 </template>
@@ -19,8 +19,6 @@
 <script>
 import LinkifyMessage from '@/components/ContributionMessages/LinkifyMessage.vue'
 
-const LINK_PATTERN = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
-
 export default {
   name: 'ContributionMessagesListItem',
   components: {
@@ -42,19 +40,6 @@ export default {
     isNotModerator() {
       return this.storeName === this.moderationName
     },
-    linkifiedMessage() {
-      const linkified = []
-      let string = this.message.message
-      let match
-      while ((match = string.match(LINK_PATTERN))) {
-        if (match.index > 0)
-          linkified.push({ type: 'text', text: string.substring(0, match.index) })
-        linkified.push({ type: 'link', text: match[0] })
-        string = string.substring(match.index + match[0].length)
-      }
-      if (string.length > 0) linkified.push({ type: 'text', text: string })
-      return linkified
-    },
   },
 }
 </script>
diff --git a/frontend/src/components/ContributionMessages/LinkifyMessage.vue b/frontend/src/components/ContributionMessages/LinkifyMessage.vue
index cea0a30a1..5d6ec34cb 100644
--- a/frontend/src/components/ContributionMessages/LinkifyMessage.vue
+++ b/frontend/src/components/ContributionMessages/LinkifyMessage.vue
@@ -8,13 +8,30 @@
 </template>
 
 <script>
+const LINK_REGEX_PATTERN = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
+
 export default {
   name: 'LinkifyMessage',
   props: {
-    linkifiedMessage: {
-      type: Array,
+    message: {
+      type: String,
       required: true,
     },
   },
+  computed: {
+    linkifiedMessage() {
+      const linkified = []
+      let string = this.message
+      let match
+      while ((match = string.match(LINK_REGEX_PATTERN))) {
+        if (match.index > 0)
+          linkified.push({ type: 'text', text: string.substring(0, match.index) })
+        linkified.push({ type: 'link', text: match[0] })
+        string = string.substring(match.index + match[0].length)
+      }
+      if (string.length > 0) linkified.push({ type: 'text', text: string })
+      return linkified
+    },
+  },
 }
 </script>