Removed some old models and adjusted the component accordingly

src/models.ts

@@ -3,17 +3,8 @@ export interface ptpUser {
   firstName: string;
   lastName: string;
   username: string;
-  status?: string;
+  status: string;
-  profilePictureUrl?: string;
+  profilepicture: string;
-}
-
-export interface ptpTestUser {
-  id: string;
-  firstName: string;
-  lastName: string;
-  username: string;
-  status?: string;
-  profilePictureUrl?: string;
 }
 
 export interface responseModel {
@@ -27,20 +18,14 @@ export interface chat{
   members: ptpUser[];
   messages: message[];
   displayName: string;
-}
+  profilepicture: string;
-
+  profilepictureAsString: string;
-export interface user{
-  id: string;
-  firstName: string;
-  lastName: string;
-  username: string;
-  chats: chat[];
 }
 
 export interface message {
   id: number;
   chat: chat;
-  sender:user;
+  sender:ptpUser;
   content: string;
   timestamp: string;
   isOwn: boolean;

src/pages/IndexPage.vue

@@ -28,11 +28,11 @@
         <div v-if="userStore.usersLoaded && userStore.userLoaded && searchQuery.length > 0 && searchQuery.replace(/\s/g, '').length" style="margin-top: 20px;">
           <ProfileCardComponent
             v-for="user in userStore.users.filter(u => (u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.trimStart().toLocaleLowerCase()) || searchQuery == '*') && u.id != userStore.id && searchQuery.replace(/\s/g, '').length)" :displayName="user.firstName +  ' ' + user.lastName" :username="user.username"
-            :profilePictureUrl="user.profilePictureUrl"
+            :profilePictureUrl="user.profilepicture"
             :status="user.status"
             :user="user"
             :selected="selectedUser.id == user.id"
-            @click="selectUser(user as ptpTestUser)"
+            @click="selectUser(user as ptpUser)"
           ></ProfileCardComponent>
           <div v-if="userStore.users.filter(u => u.username.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()) || (u.firstName + ' ' + u.lastName).toLocaleLowerCase().includes(searchQuery.trimStart().toLocaleLowerCase()) || searchQuery == '*').length == 0 || !searchQuery.replace(/\s/g, '').length" style="text-align: center;">
             <img src="https://media.tenor.com/KOZLvzU0o4kAAAAd/no-results.gif" style="border-radius: 1rem;" alt="No search results found">
@@ -67,7 +67,7 @@
               v-else
               :user="userStore.users.find((user) => user.id === chat.members.find((member) => member.id !== userStore.user!.id)?.id)"
               :selected="selectedUser.id == chat.members[0].id"
-              @click="selectUser(chat.members[0] as ptpTestUser)"
+              @click="selectUser(chat.members[0] as ptpUser)"
             ></ProfileCardComponent>-->
           </div>
         </div>
@@ -111,7 +111,7 @@
         round 
         flat 
         v-if="userStore.userLoaded"
-        :style="{'background-image' : 'url('+userStore.user!.profilePictureUrl+')' }"
+        :style="{'background-image' : 'url('+userStore.user!.profilepicture+')' }"
         style="background-size: cover;background-position: center;position: fixed; left:1rem; bottom: 1rem;"
         title="Profil und Einstellungen" 
         @click="settingsDialog = true"
@@ -126,13 +126,13 @@
         <HeaderInfoContainerComponent 
           v-if="selectedUser.id != null" 
           :displayName="selectedUser.firstName + ' ' + selectedUser.lastName"
-          :image="selectedUser.profilePictureUrl"
+          :image="selectedUser.profilepicture"
         ></HeaderInfoContainerComponent>
 
         <div v-if="selectedChat.id != null" style="display: flex;">
           <HeaderInfoContainerComponent  
             :displayName="selectedChat.displayName"
-            image="https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg"
+            :image="selectedChat.profilepictureAsString"
           ></HeaderInfoContainerComponent>
 
           <div>
@@ -259,8 +259,8 @@
   import ProfileCardComponent from 'components/ProfileCardComponent.vue';
   import ChatCardComponent from 'components/ChatCardComponent.vue';
   import HeaderInfoContainerComponent from 'components/HeaderInfoContainerComponent.vue';
-  import {message, ptpTestUser} from 'src/models';
+  import {message} from 'src/models';
-  import type {chat} from 'src/models';
+  import type {chat, ptpUser} from 'src/models';
   import {useUserStore} from 'stores/user-store';
   import { useChatStore } from 'stores/chat-store';
   import SettingsPopUp from 'src/components/SettingsPopUp.vue';
@@ -381,6 +381,15 @@ import { useMessageStore } from 'src/stores/message-store';
     changed.value = true;
   }
 
+  function getMessages() {
+    if(selectedChat.value.id != null) {
+      messageStore.loadMessagesByChatID(selectedChat.value.id);
+    }
+    
+  }
+
+  setInterval(getMessages, 2000);
+
 
   setInterval(getGifs, 500);
 
@@ -390,17 +399,17 @@ import { useMessageStore } from 'src/stores/message-store';
     await chatStore.loadChatsByUser();
   };
 
-  const selectedUser = ref({} as ptpTestUser);
+  const selectedUser = ref({} as ptpUser);
   const selectedChat = ref({} as chat);
 
-  function selectUser(user : ptpTestUser) {
+  function selectUser(user : ptpUser) {
     selectedUser.value = user;
     selectedChat.value = {} as chat;
   }
 
   function selectChat(chat : chat) {
     selectedChat.value = chat;
-    selectedUser.value = {} as ptpTestUser;
+    selectedUser.value = {} as ptpUser;
 
     if(messageStore.messages[chat.id] == null) {
       messageStore.messages[chat.id] = [] as message[];