From e239e69ff73a39fcf4c20c34665bb61e714456b1 Mon Sep 17 00:00:00 2001 From: joschuatonn Date: Sun, 16 Jun 2024 18:03:33 +0200 Subject: [PATCH] User is now able to start a new dm chat with another user, optimized message loading --- src/models.ts | 2 + src/pages/IndexPage.vue | 119 ++++++++++++++++++++++-------------- src/stores/message-store.ts | 51 ++++++++++++++-- 3 files changed, 122 insertions(+), 50 deletions(-) diff --git a/src/models.ts b/src/models.ts index 25593e8..dea6c4a 100644 --- a/src/models.ts +++ b/src/models.ts @@ -5,6 +5,7 @@ export interface ptpUser { username: string; status: string; profilepicture: string; + isPrivate: boolean; } export interface responseModel { @@ -20,6 +21,7 @@ export interface chat{ displayName: string; profilepicture: string; profilepictureAsString: string; + isGroupChat: boolean; } export interface message { diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue index 7abdc04..1642d64 100644 --- a/src/pages/IndexPage.vue +++ b/src/pages/IndexPage.vue @@ -53,6 +53,7 @@ :selected="chat.id == selectedChat.id" :chat="chat" @click="selectChat(chat as chat)" + :lastMessage="getChatPreviewMessage(chat.id)" > - -

- {{ member.id }}
 -

+ + @@ -92,7 +98,7 @@ :image="selectedChat.members.find((member) => member.id !== userStore.user!.id)?.profilepicture" > -
+

- Du, + Du + , @{{ user.username }}{{ index < selectedChat.members.length - 2 ? ", " : "" }}

@@ -113,37 +120,13 @@
-
+

Das ist der Beginn deines Chats mit {{selectedUser.firstName}} {{selectedUser.lastName}}

+

Du hast schonmal mit dem geschrieben wie schön

- -
- - - - - -
@@ -173,7 +156,7 @@
- + @@ -219,7 +202,7 @@ import ProfileCardComponent from 'components/ProfileCardComponent.vue'; import ChatCardComponent from 'components/ChatCardComponent.vue'; import HeaderInfoContainerComponent from 'components/HeaderInfoContainerComponent.vue'; - import {message} from 'src/models'; + import type {message} from 'src/models'; import type {chat, ptpUser} from 'src/models'; import {useUserStore} from 'stores/user-store'; import { useChatStore } from 'stores/chat-store'; @@ -257,6 +240,31 @@ import { useMessageStore } from 'src/stores/message-store'; let messages : message[] = [ ]; + const getChatPreviewMessage = (chatId : number) => { + const messageArray : message[] = messageStore.messages[chatId]; + + + if(messageArray && messageArray.length > 0) { + const newestMessage = messageArray[0]; + + let messageContent = newestMessage.content; + let userDescriptor = newestMessage.sender.firstName; + + if(isTenorGifUrl(newestMessage.content)) { + messageContent = "GIF"; + } + + if(newestMessage.sender.id == userStore.user!.id) { + userDescriptor = "Du"; + } + + return userDescriptor + ": " + messageContent; + + } else { + return "Der Chat wurde erstellt"; + } + } + function isUrl(url : string) { try { new URL(url); @@ -292,7 +300,7 @@ import { useMessageStore } from 'src/stores/message-store'; function getGifs() { - let query = gifSearch.value != "" ? gifSearch.value : "shrek"; + let query = gifSearch.value != "" ? gifSearch.value : "the office"; if(changed.value) { tenorStore.getGifsBySearchTerm(query, loadedGifsAmount); @@ -309,7 +317,16 @@ import { useMessageStore } from 'src/stores/message-store'; } function sendMessage() { - messageStore.sendMessage(selectedChat.value.id, userStore.user!.id, message.value); + if(selectedChat.value.id != -1) { + messageStore.sendMessage(selectedChat.value.id, userStore.user!.id, message.value); + } else { + messageStore.createChatAndSendFirstMessage(selectedUser.value.id,userStore.user!.id, message.value).then((response) => { + reloadChats().then(() => { + activeMenu.value = 'chats'; + selectChat(chatStore.chats.find((chat) => chat.id == response)!); + }); + }); + } message.value = ""; } @@ -325,13 +342,17 @@ import { useMessageStore } from 'src/stores/message-store'; } function getMessages() { - if(selectedChat.value.id != null) { - messageStore.loadMessagesByChatID(selectedChat.value.id); + for(let chat of chatStore.chats) { + messageStore.loadMessagesByChatID(chat.id); } } - setInterval(getMessages, 2000); + const reloadChats = async() => { + await chatStore.loadChatsByUser(); + }; + + setInterval(getMessages, 5000); setInterval(getGifs, 500); @@ -347,7 +368,18 @@ import { useMessageStore } from 'src/stores/message-store'; function selectUser(user : ptpUser) { selectedUser.value = user; - selectedChat.value = {} as chat; + //selectedChat.value = {} as chat; + // CHECKEN, OB ES SCHON EINEN CHAT GIBT + const exampleChat: chat = { + id: -1, + members: [user, userStore.user!], + messages: [], + displayName: user.firstName + " " + user.lastName, + profilepicture: user.profilepicture, + profilepictureAsString: user.profilepicture, + isGroupChat: false + }; + selectedChat.value = exampleChat; } function selectChat(chat : chat) { @@ -365,22 +397,19 @@ import { useMessageStore } from 'src/stores/message-store'; // Hier wird geprüft, ob es ein Chat mit einem bestimmten anderen Nutzer existiert const chatExists = chatStore.chats.find((chat) => chat.members.length === 2 && chat.members.find((member) => member.id === id)); - if(chatExists) return true; - - return false; + return Boolean(chatExists); } // Init methods + loadChats(); const user = ref(); onMounted(() => { - //alert("mounted"); user.value = userStore.user; - //alert(user.value.firstName); }) diff --git a/src/stores/message-store.ts b/src/stores/message-store.ts index cfc81d7..1b485fa 100644 --- a/src/stores/message-store.ts +++ b/src/stores/message-store.ts @@ -2,11 +2,14 @@ import { defineStore } from 'pinia'; import { api } from 'src/boot/axios'; import { message, ptpUser, responseModel } from 'src/models'; import Keycloak, { KeycloakInitOptions, KeycloakLoginOptions } from 'keycloak-js'; +import { useNotificationStore } from './notification-store'; +import { useUserStore } from './user-store'; export const useMessageStore = defineStore('messageStore', { state: () => ({ messages: [[]] as [message[]], + loadedMessagesForChats: [] as number[], }), actions: { async sendMessage(chatId : number, senderId : string, content : string) { @@ -16,9 +19,28 @@ export const useMessageStore = defineStore('messageStore', { }); }, + async createChatAndSendFirstMessage(receiverId : string, senderId : string, content : string) { + const config = { headers: {'Content-Type': 'application/json'} }; + return (await api.post("/messages/dm/"+senderId+"/"+receiverId, content, config).then((response) => { + console.info("LET ME IN"); + console.info(response.data); + console.info(response.data.id); + this.loadMessagesByChatID(response.data.id); + + return response.data.id; + + })); + }, + loadMessagesByChatID(chatID : number) { - this.getAllMessagesByChatID(chatID).then((messages) => { - messages.forEach((message : message) => { + const notificationStore = useNotificationStore(); + const userStore = useUserStore(); + const messagesTemp : message[] = []; + + const initialLoad = !this.loadedMessagesForChats.includes(chatID); + + this.getAllMessagesByChatID(chatID).then((responseBody) => { + responseBody.response.forEach((message : message) => { message.content = message.content.substring(1, message.content.length-1); if (isUrl(message.content)) { if (isTenorGifUrl(message.content)) { @@ -27,14 +49,33 @@ export const useMessageStore = defineStore('messageStore', { message.link = true; } } - }); - this.messages[chatID] = messages; + if(!this.loadedMessagesForChats.includes(chatID)){ + this.messages[chatID] = []; + this.loadedMessagesForChats.push(chatID); + } + if(!initialLoad){ + if(message.sender.id !== userStore.user!.id) { + notificationStore.sendNotificationIfAllowed(message.sender.profilepicture, message.sender.username, message.content); + } + } + + this.messages[chatID].unshift(message); + + + + }); }); }, async getAllMessagesByChatID(chatID : number) { - return (await api.get("/messages/"+chatID)).data; + //const timestamp = !this.messages[chatID] ? 0 : this.messages[chatID][0].timestamp; + let timestamp = "0"; + if(this.loadedMessagesForChats.includes(chatID)){ + timestamp = this.messages[chatID][0].timestamp; + } + //console.log("Timestamp: "+timestamp); + return (await api.get("/messages/"+chatID+"/"+timestamp)).data; }, }, });