From b32599e6afb7f818ca114aa6332b8e0a67545e93 Mon Sep 17 00:00:00 2001
From: joschuatonn <joschua@francoismechanics.com>
Date: Thu, 30 May 2024 09:19:09 +0200
Subject: [PATCH] MessageComponent now displays the Display- and username of
 the sender

---
 src/components/MessageComponent.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/MessageComponent.vue b/src/components/MessageComponent.vue
index 00eaaf8..205c204 100644
--- a/src/components/MessageComponent.vue
+++ b/src/components/MessageComponent.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { decodedTextSpanIntersectsWith } from 'typescript';
 
   const props =  defineProps({
     ownMessage: Boolean,
     timestamp: String,
     message: String,
+    sender: Object,
     gif: Boolean,
     link: Boolean,
     url: String,
+    showSender: Boolean,
   })
 
   const date = new Date(Number(props.timestamp));
@@ -16,6 +17,10 @@ import { decodedTextSpanIntersectsWith } from 'typescript';
 
 <template>
   <div class="message" :class="{'sent' : props.ownMessage, 'received' : !props.ownMessage}">
+    <div v-if="props.showSender" style="display: flex; justify-content: space-between;">
+      <div class="text-body">{{ props.sender!.firstName }} {{ props.sender!.lastName }}</div>
+      <div class="text-body">@{{ props.sender!.username }}</div>
+    </div>
     <p v-if="!props.gif && !props.link" style="margin-bottom: 0;">{{props.message}}</p>
     <img v-if="props.gif" :src="props.url" alt="GIF" style="width: 100%;border-radius: 10px;" />
     <a v-if="props.link" :href="props.url" target="_blank">{{props.url}}</a>