Messages are now properly displayed and formatted

src/components/ChatSettingsComponent.vue

@@ -11,7 +11,7 @@
         <q-card-section>
           <div class="text-h5">Mitglieder</div>
           <table>
-            <tr v-for="user in props.chat!.members">
+            <tr v-for="user in members">
               <td>
                 <ProfileCardComponent :user="user" :selected="false"></ProfileCardComponent>
               </td>
@@ -67,7 +67,7 @@
   import { computed, ref } from 'vue';
   import ProfileCardComponent from './ProfileCardComponent.vue';
 import { useUserStore } from 'src/stores/user-store';
-import { profilePicture, responseModel } from 'src/models';
+import { profilePicture, ptpUser, responseModel } from 'src/models';
 import { useChatStore } from 'src/stores/chat-store';
 import { useQuasar } from 'quasar';
 import { sendNotification } from 'src/utils';
@@ -96,11 +96,23 @@ import { sendNotification } from 'src/utils';
   }
 
   const $q = useQuasar();
+  const members = ref([] as ptpUser[]);
+
+  members.value = props.chat!.members;
 
   const removeUser = (keycloakID : string) => {
     chatStore.removeUserFromChat(keycloakID, props.chat!.id).then((response : responseModel) => {
       reloadChats();
       sendNotification(response.message, response.success);
+      if(response.success) {
+        members.value = members.value.filter((user) => user.id != keycloakID);
+      }
+
+      if(members.value.length == 1) {
+        sendNotification("Es ist ein kritischer Fehler aufgetreten", false);
+      } else if(members.value.length == 2) {
+        closeDialog();
+      }
     });
   }
 

src/pages/IndexPage.vue

@@ -149,20 +149,15 @@
 
       <div v-if="selectedChat.id != null" style="padding: 75px 25px 0 25px;overflow-y: auto;height: 90%;display: flex;flex-direction: column-reverse;"> 
         <div v-for="(message, index) in (messageStore.messages[selectedChat.id])" :key="index">
-          <MessageComponent
-            v-if="message.gif"
-            :url="message.content"
-            :timestamp="message.timestamp"
-            :own-message="message.isOwn"
-            gif
-          ></MessageComponent>
 
           <MessageComponent
-            v-if="!message.gif && message.link"
+            v-if="message.gif || message.link"
             :url="message.content"
             :timestamp="message.timestamp"
-            :own-message="message.isOwn"
+            :own-message="message.sender.id == userStore.user!.id"
-            link
+            :link="message.link"
+            :gif="message.gif"
+            :showSender="selectedChat.members.length > 2 && (index == messageStore.messages[selectedChat.id].length - 1 || messageStore.messages[selectedChat.id][index+1].sender!.id != message.sender.id)"
           ></MessageComponent>
 
           <MessageComponent

src/stores/message-store.ts

@@ -10,19 +10,45 @@ export const useMessageStore = defineStore('messageStore', {
   }),
   actions: {
     async sendMessage(chatId : number, senderId : string, content : string)  {
-      await api.post("/messages/"+chatId+"/"+senderId+"/"+content).then((result) => {
+      const config = { headers: {'Content-Type': 'application/json'} };
+      await api.post("/messages/"+chatId+"/"+senderId, content, config).then((result) => {
         this.loadMessagesByChatID(chatId);
       });
     },
 
     loadMessagesByChatID(chatID : number) {
       this.getAllMessagesByChatID(chatID).then((messages) => {
+        messages.forEach((message : message) => {
+          message.content = message.content.substring(1, message.content.length-1);
+          if (isUrl(message.content)) {
+            if (isTenorGifUrl(message.content)) {
+              message.gif = true;
+            } else {
+              message.link = true;
+            }
+          }
+        });
+
         this.messages[chatID] = messages;
       });
     },
 
     async getAllMessagesByChatID(chatID : number) {
-      return (await api.get("/messages/chat/"+chatID)).data;
+      return (await api.get("/messages/"+chatID)).data;
     },
   },
 });
+
+function isUrl(url : string) {
+  try {
+    new URL(url);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+
+function isTenorGifUrl(url : string) {
+  return url.startsWith("https://media.tenor.com/") && url.endsWith(".gif");
+
+}

src/utils.ts

@@ -1,9 +1,4 @@
 import { Notify } from "quasar";
-import { responseModel } from "./models";
-
-export const sendRestResponseAsNotification = (response : responseModel) => {
-  
-}
 
 export const sendNotification = (message : string, successful : Boolean) => {
   Notify.create({