From 8409e0b751e67aea25250716180db84c1752789a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 24 Oct 2022 16:45:26 +0200
Subject: [PATCH] linkify messages as component

---
 .../ContributionMessagesListItem.vue          | 23 ++++++++-----------
 .../ContributionMessages/LinkifyMessage.vue   | 20 ++++++++++++++++
 2 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/components/ContributionMessages/LinkifyMessage.vue

diff --git a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
index 0ad57e4f1..dbcf2fbb6 100644
--- a/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
+++ b/frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
@@ -4,33 +4,28 @@
       <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>
-      <div class="mt-2">
-        <span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
-          <b-link v-if="type === 'link'" :to="text">{{ text }}</b-link>
-          <span v-else>{{ text }}</span>
-        </span>
-      </div>
+      <linkify-message :linkifiedMessage="linkifiedMessage"></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>
-      <div class="mt-2">
-        <span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
-          <b-link v-if="type === 'link'" :to="text">{{ text }}</b-link>
-          <span v-else>{{ text }}</span>
-        </span>
-      </div>
+      <linkify-message :linkifiedMessage="linkifiedMessage"></linkify-message>
     </div>
   </div>
 </template>
 
 <script>
-const PATTERN = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/i
+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: {
+    LinkifyMessage,
+  },
   props: {
     message: {
       type: Object,
@@ -51,7 +46,7 @@ export default {
       const linkified = []
       let string = this.message.message
       let match
-      while ((match = string.match(PATTERN))) {
+      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] })
diff --git a/frontend/src/components/ContributionMessages/LinkifyMessage.vue b/frontend/src/components/ContributionMessages/LinkifyMessage.vue
new file mode 100644
index 000000000..cea0a30a1
--- /dev/null
+++ b/frontend/src/components/ContributionMessages/LinkifyMessage.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="mt-2">
+    <span v-for="({ type, text }, index) in linkifiedMessage" :key="index">
+      <b-link v-if="type === 'link'" :to="text">{{ text }}</b-link>
+      <span v-else>{{ text }}</span>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LinkifyMessage',
+  props: {
+    linkifiedMessage: {
+      type: Array,
+      required: true,
+    },
+  },
+}
+</script>