Introduce a constant and simplify the logic

Signed-off-by: Joas Schilling <coding@schilljs.com>

4 files changed, 27 insertions, 12 deletions

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 91bfb171d..92c8c58e1 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -75,7 +75,10 @@ import MessagesGroup from './MessagesGroup/MessagesGroup.vue'
 import Axios from '@nextcloud/axios'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import isInLobby from '../../mixins/isInLobby.js'
-import { ATTENDEE } from '../../constants.js'
+import {
+	ATTENDEE,
+	CHAT,
+} from '../../constants.js'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus.js'
 import LoadingPlaceholder from '../LoadingPlaceholder.vue'
@@ -547,6 +550,7 @@ export default {
 					token: this.token,
 					lastKnownMessageId: this.$store.getters.getFirstKnownMessageId(this.token),
 					includeLastKnown,
+					minimumVisible: CHAT.MINIMUM_VISIBLE,
 				})
 
 				this.loadingOldMessages = false
diff --git a/src/constants.js b/src/constants.js
index bacf04c7d..b33c5de45 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -24,6 +24,10 @@ export const SIGNALING = {
 		CLUSTER_CONVERSATION: 'conversation_cluster',
 	},
 }
+export const CHAT = {
+	FETCH_LIMIT: 100,
+	MINIMUM_VISIBLE: 5,
+}
 export const CONVERSATION = {
 	START_CALL: {
 		EVERYONE: 0,
diff --git a/src/services/messagesService.js b/src/services/messagesService.js
index c135f71a0..587931957 100644
--- a/src/services/messagesService.js
+++ b/src/services/messagesService.js
@@ -33,14 +33,16 @@ import Hex from 'crypto-js/enc-hex.js'
  * @param {string} data.token the conversation token;
  * @param {string} data.lastKnownMessageId last known message id;
  * @param {boolean} data.includeLastKnown whether to include the last known message in the response;
+ * @param {number} data.limit Number of messages to load (default: 100)
  * @param {object} options options;
  */
-const fetchMessages = async function({ token, lastKnownMessageId, includeLastKnown }, options) {
+const fetchMessages = async function({ token, lastKnownMessageId, includeLastKnown, limit }, options) {
 	return axios.get(generateOcsUrl('apps/spreed/api/v1/chat/{token}', { token }), Object.assign(options, {
 		params: {
 			setReadMarker: 0,
 			lookIntoFuture: 0,
 			lastKnownMessageId,
+			limit: limit || 100,
 			includeLastKnown: includeLastKnown ? 1 : 0,
 		},
 	}))
diff --git a/src/store/messagesStore.js b/src/store/messagesStore.js
index 55f2d76b4..16b25ac77 100644
--- a/src/store/messagesStore.js
+++ b/src/store/messagesStore.js
@@ -37,6 +37,7 @@ import CancelableRequest from '../utils/cancelableRequest.js'
 import { showError } from '@nextcloud/dialogs'
 import {
 	ATTENDEE,
+	CHAT,
 } from '../constants.js'
 
 /**
@@ -732,9 +733,12 @@ const actions = {
 	 * @param {string} data.token the conversation token;
 	 * @param {object} data.requestOptions request options;
 	 * @param {string} data.lastKnownMessageId last known message id;
+	 * @param {number} data.minimumVisible Minimum number of chat messages we want to load
 	 * @param {boolean} data.includeLastKnown whether to include the last known message in the response;
 	 */
-	async fetchMessages(context, { token, lastKnownMessageId, includeLastKnown, requestOptions }) {
+	async fetchMessages(context, { token, lastKnownMessageId, includeLastKnown, requestOptions, minimumVisible }) {
+		minimumVisible = minimumVisible || CHAT.MINIMUM_VISIBLE
+
 		context.dispatch('cancelFetchMessages')
 
 		// Get a new cancelable request function and cancel function pair
@@ -746,6 +750,7 @@ const actions = {
 			token,
 			lastKnownMessageId,
 			includeLastKnown,
+			limit: CHAT.FETCH_LIMIT,
 		}, requestOptions)
 
 		let newestKnownMessageId = 0
@@ -758,8 +763,6 @@ const actions = {
 			})
 		}
 
-		let invisibleMessages = 0
-
 		// Process each messages and adds it to the store
 		response.data.ocs.data.forEach(message => {
 			if (message.actorType === ATTENDEE.ACTOR_TYPE.GUESTS) {
@@ -769,12 +772,12 @@ const actions = {
 			context.dispatch('processMessage', message)
 			newestKnownMessageId = Math.max(newestKnownMessageId, message.id)
 
-			if (message.systemMessage === 'reaction'
-				|| message.systemMessage === 'reaction_deleted'
-				|| message.systemMessage === 'reaction_revoked'
-				|| message.systemMessage === 'poll_voted'
+			if (message.systemMessage !== 'reaction'
+				&& message.systemMessage !== 'reaction_deleted'
+				&& message.systemMessage !== 'reaction_revoked'
+				&& message.systemMessage !== 'poll_voted'
 			) {
-				invisibleMessages++
+				minimumVisible--
 			}
 		})
 
@@ -798,12 +801,14 @@ const actions = {
 
 		context.commit('loadedMessagesOfConversation', { token })
 
-		if (invisibleMessages > 95) {
-			// If there are more than 95 invisible messages we load another chunk
+		if (minimumVisible > 0) {
+			// There are not yet enough visible messages loaded, so fetch another chunk.
+			// This can happen when a lot of reactions or poll votings happen
 			return await context.dispatch('fetchMessages', {
 				token,
 				lastKnownMessageId: context.getters.getFirstKnownMessageId(token),
 				includeLastKnown,
+				minimumVisible,
 			})
 		}