From 47770ed7151ad0ba1cd8b77eb52590edd9ce9737 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Wed, 17 Feb 2021 10:16:58 +0200 Subject: [PATCH] get rid of older messages when scrolling down in chat to keep it from bloating dom --- src/components/chat/chat.js | 1 + src/modules/chats.js | 6 ++++++ src/services/chat_service/chat_service.js | 17 +++++++++++++++++ 3 files changed, 24 insertions(+) diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js index e57fcb91..f446f25b 100644 --- a/src/components/chat/chat.js +++ b/src/components/chat/chat.js @@ -241,6 +241,7 @@ const Chat = { this.fetchChat({ maxId: this.currentChatMessageService.minId }) } else if (this.bottomedOut(JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET)) { this.jumpToBottomButtonVisible = false + this.$store.dispatch('cullOlderMessages', this.currentChatMessageService.chatId) if (this.newMessageCount > 0) { // Use a delay before marking as read to prevent situation where new messages // arrive just as you're leaving the view and messages that you didn't actually diff --git a/src/modules/chats.js b/src/modules/chats.js index 0a373d88..69d683bd 100644 --- a/src/modules/chats.js +++ b/src/modules/chats.js @@ -115,6 +115,9 @@ const chats = { }, handleMessageError ({ commit }, value) { commit('handleMessageError', { commit, ...value }) + }, + cullOlderMessages ({ commit }, chatId) { + commit('cullOlderMessages', chatId) } }, mutations: { @@ -227,6 +230,9 @@ const chats = { handleMessageError (state, { chatId, fakeId, isRetry }) { const chatMessageService = state.openedChatMessageServices[chatId] chatService.handleMessageError(chatMessageService, fakeId, isRetry) + }, + cullOlderMessages (state, chatId) { + chatService.cullOlderMessages(state.openedChatMessageServices[chatId]) } } } diff --git a/src/services/chat_service/chat_service.js b/src/services/chat_service/chat_service.js index e653ebc1..92ff689d 100644 --- a/src/services/chat_service/chat_service.js +++ b/src/services/chat_service/chat_service.js @@ -48,6 +48,22 @@ const deleteMessage = (storage, messageId) => { } } +const cullOlderMessages = (storage) => { + const maxIndex = storage.messages.length + const minIndex = maxIndex - 50 + if (maxIndex <= 50) return + + storage.messages = _.sortBy(storage.messages, ['id']) + storage.minId = storage.messages[minIndex].id + for (const message of storage.messages) { + if (message.id < storage.minId) { + delete storage.idIndex[message.id] + delete storage.idempotencyKeyIndex[message.idempotency_key] + } + } + storage.messages = storage.messages.slice(minIndex, maxIndex) +} + const handleMessageError = (storage, fakeId, isRetry) => { if (!storage) { return } const fakeMessage = storage.idIndex[fakeId] @@ -201,6 +217,7 @@ const ChatService = { empty, getView, deleteMessage, + cullOlderMessages, resetNewMessageCount, clear, handleMessageError