gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: message grouping when messages are received from websocket

Browse source
This commit is contained in:
SauceyRed 2025-05-31 15:28:33 +02:00
parent 4da2ede58a
commit 04af2be87f
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 19 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

28
components/MessageArea.vue
View file

@ -28,17 +28,14 @@ const props = defineProps<{ channelUrl: string, amount?: number, offset?: number
const messageTimestamps = ref<Record<string, number>>({}); const messageTimestamps = ref<Record<string, number>>({});
const messagesType = ref<Record<string, "normal" | "grouped">>({}); const messagesType = ref<Record<string, "normal" | "grouped">>({});
const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
const messagesRes: MessageResponse[] | undefined = await fetchWithApi( const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
`${props.channelUrl}/messages`, `${props.channelUrl}/messages`,
{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } } { query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
); );
if (messagesRes) { function groupMessage(message: MessageResponse) {
messagesRes.reverse();
console.log("messages res:", messagesRes.map(msg => msg.message));
const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
for (const message of messagesRes) {
messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid); messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
console.log("message:", message.message); console.log("message:", message.message);
@ -50,7 +47,7 @@ if (messagesRes) {
firstMessageByUsers.value[message.user.uuid] = message; firstMessageByUsers.value[message.user.uuid] = message;
console.log("RETURNING FALSE"); console.log("RETURNING FALSE");
messagesType.value[message.uuid] = "normal"; messagesType.value[message.uuid] = "normal";
continue; return;
} }
} else { } else {
console.log("first by user doesn't exist"); console.log("first by user doesn't exist");
@ -58,9 +55,9 @@ if (messagesRes) {
firstMessageByUsers.value[message.user.uuid] = message; firstMessageByUsers.value[message.user.uuid] = message;
console.log("RETURNING FALSE"); console.log("RETURNING FALSE");
messagesType.value[message.uuid] = "normal"; messagesType.value[message.uuid] = "normal";
continue; return;
} }
const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference;
const prevTimestamp = messageTimestamps.value[firstByUser.uuid]; const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
const timestamp = messageTimestamps.value[message.uuid]; const timestamp = messageTimestamps.value[message.uuid];
console.log("first message timestamp:", prevTimestamp); console.log("first message timestamp:", prevTimestamp);
@ -75,10 +72,18 @@ if (messagesRes) {
console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`) console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
firstMessageByUsers.value[message.user.uuid] = message; firstMessageByUsers.value[message.user.uuid] = message;
messagesType.value[message.uuid] = "normal"; messagesType.value[message.uuid] = "normal";
continue; return;
} }
console.log("RETURNING " + lessThanMax.toString().toUpperCase()); console.log("RETURNING " + lessThanMax.toString().toUpperCase());
messagesType.value[message.uuid] = "grouped"; messagesType.value[message.uuid] = "grouped";
}
const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
if (messagesRes) {
messagesRes.reverse();
console.log("messages res:", messagesRes.map(msg => msg.message));
for (const message of messagesRes) {
groupMessage(message);
} }
} }
@ -116,7 +121,10 @@ if (accessToken && apiBase) {
console.log("event data:", event.data); console.log("event data:", event.data);
console.log("message uuid:", event.data.uuid); console.log("message uuid:", event.data.uuid);
const parsedData = JSON.parse(event.data); const parsedData = JSON.parse(event.data);
messageTimestamps.value[parsedData.uuid] = uuidToTimestamp(parsedData.uuid);
groupMessage(parsedData);
console.log("parsed message type:", messagesType.value[parsedData.uuid]);
console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
messages.value.push(parsedData); messages.value.push(parsedData);
await nextTick(); await nextTick();
if (messagesElement.value) { if (messagesElement.value) {