fix(useGetMessages): extract watchers and lifecycle hooks

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/MessagesList/MessagesList.vue

@@ -66,7 +66,6 @@
 </template>
 
 <script>
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { n, t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
 import debounce from 'debounce'
@@ -136,13 +135,10 @@ export default {
 			loadingOldMessages,
 			isInitialisingMessages,
 			stopFetchingOldMessages,
-			chatIdentifier,
 			isChatBeginningReached,
 
-			handleStartGettingMessagesPreconditions,
 			getMessageContext,
 			getOldMessages,
-			pollNewMessages,
 		} = useGetMessages()
 
 		const isDocumentVisible = useDocumentVisibility()
@@ -158,13 +154,10 @@ export default {
 			loadingOldMessages,
 			isInitialisingMessages,
 			stopFetchingOldMessages,
-			chatIdentifier,
 			isChatBeginningReached,
 
-			handleStartGettingMessagesPreconditions,
 			getMessageContext,
 			getOldMessages,
-			pollNewMessages,
 		}
 	},
 
@@ -188,8 +181,6 @@ export default {
 
 			isFocusingMessage: false,
 
-			expirationInterval: null,
-
 			debounceUpdateReadMarkerPosition: () => {},
 
 			debounceHandleScroll: () => {},
@@ -281,19 +272,6 @@ export default {
 			}
 		},
 
-		chatIdentifier: {
-			immediate: true,
-			handler(newValue, oldValue) {
-				if (oldValue) {
-					this.$store.dispatch('cancelPollNewMessages', { requestId: oldValue })
-				}
-				this.handleStartGettingMessagesPreconditions(this.token)
-
-				// Remove expired messages when joining a room
-				this.removeExpiredMessagesFromStore()
-			},
-		},
-
 		token(newToken, oldToken) {
 			// Expire older messages when navigating to another conversation
 			this.$store.dispatch('easeMessageList', { token: oldToken })
@@ -351,19 +329,10 @@ export default {
 		EventBus.on('focus-message', this.focusMessage)
 		EventBus.on('route-change', this.onRouteChange)
 		EventBus.on('message-height-changed', this.onMessageHeightChanged)
-		subscribe('networkOffline', this.handleNetworkOffline)
-		subscribe('networkOnline', this.handleNetworkOnline)
 		window.addEventListener('focus', this.onWindowFocus)
 
 		this.resizeObserver = new ResizeObserver(this.updateSize)
 		this.resizeObserver.observe(this.$refs.scroller)
-
-		/**
-		 * Every 30 seconds we remove expired messages from the store
-		 */
-		this.expirationInterval = window.setInterval(() => {
-			this.removeExpiredMessagesFromStore()
-		}, 30000)
 	},
 
 	beforeUnmount() {
@@ -375,20 +344,10 @@ export default {
 		EventBus.off('focus-message', this.focusMessage)
 		EventBus.off('route-change', this.onRouteChange)
 		EventBus.off('message-height-changed', this.onMessageHeightChanged)
-		this.$store.dispatch('cancelPollNewMessages', { requestId: this.chatIdentifier })
-		this.destroying = true
-
-		unsubscribe('networkOffline', this.handleNetworkOffline)
-		unsubscribe('networkOnline', this.handleNetworkOnline)
 
 		if (this.resizeObserver) {
 			this.resizeObserver.disconnect()
 		}
-
-		if (this.expirationInterval) {
-			clearInterval(this.expirationInterval)
-			this.expirationInterval = null
-		}
 	},
 
 	methods: {
@@ -504,12 +463,6 @@ export default {
 				&& JSON.stringify(group2.messages[index]) === JSON.stringify(message))
 		},
 
-		removeExpiredMessagesFromStore() {
-			this.$store.dispatch('removeExpiredMessages', {
-				token: this.token,
-			})
-		},
-
 		/**
 		 * Compare two messages to decide if they should be grouped
 		 *
@@ -1040,16 +993,6 @@ export default {
 			return this.messagesList[0].id.toString()
 		},
 
-		handleNetworkOffline() {
-			console.debug('Canceling message request as we are offline')
-			this.$store.dispatch('cancelPollNewMessages', { requestId: this.chatIdentifier })
-		},
-
-		handleNetworkOnline() {
-			console.debug('Restarting polling of new chat messages')
-			this.pollNewMessages(this.token)
-		},
-
 		async onRouteChange({ from, to }) {
 			if (from.name === 'conversation' && to.name === 'conversation'
 				&& from.params.token === to.params.token) {

src/composables/useGetMessages.ts

@@ -10,7 +10,8 @@ import type {
 } from '../types/index.ts'
 
 import Axios from '@nextcloud/axios'
-import { computed, ref } from 'vue'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
 import { CHAT, MESSAGE } from '../constants.ts'
@@ -26,6 +27,7 @@ function isAxiosErrorResponse(exception: unknown): exception is AxiosError<strin
 }
 
 let isUnmounting = false
+let expirationInterval: NodeJS.Timeout | undefined
 
 /**
  * Composable to provide control logic for fetching messages list
@@ -67,6 +69,49 @@ export function useGetMessagesProvider() {
 			&& ['conversation_created', 'history_cleared'].includes(firstKnownMessage.value.systemMessage))
 	})
 
+	watch(chatIdentifier, (newValue, oldValue) => {
+		if (oldValue) {
+			store.dispatch('cancelPollNewMessages', { requestId: oldValue })
+		}
+		handleStartGettingMessagesPreconditions(currentToken.value)
+
+		/** Remove expired messages when joining a room */
+		store.dispatch('removeExpiredMessages', { token: currentToken.value })
+	}, { immediate: true })
+
+	subscribe('networkOffline', handleNetworkOffline)
+	subscribe('networkOnline', handleNetworkOnline)
+
+	/** Every 30 seconds we remove expired messages from the store */
+	expirationInterval = setInterval(() => {
+		store.dispatch('removeExpiredMessages', { token: currentToken.value })
+	}, 30_000)
+
+	onBeforeUnmount(() => {
+		unsubscribe('networkOffline', handleNetworkOffline)
+		unsubscribe('networkOnline', handleNetworkOnline)
+
+		store.dispatch('cancelPollNewMessages', { requestId: chatIdentifier.value })
+		isUnmounting = true
+		clearInterval(expirationInterval)
+	})
+
+	/**
+	 * Stop polling due to offline
+	 */
+	function handleNetworkOffline() {
+		console.debug('Canceling message request as we are offline')
+		store.dispatch('cancelPollNewMessages', { requestId: chatIdentifier.value })
+	}
+
+	/**
+	 * Resume polling, when back online
+	 */
+	function handleNetworkOnline() {
+		console.debug('Restarting polling of new chat messages')
+		pollNewMessages(currentToken.value)
+	}
+
 	/**
 	 * Initialize chat context borders and start fetching messages
 	 * @param token token of conversation where a method was called
@@ -259,13 +304,10 @@ export function useGetMessagesProvider() {
 		loadingOldMessages,
 		isInitialisingMessages,
 		stopFetchingOldMessages,
-		chatIdentifier,
 		isChatBeginningReached,
 
-		handleStartGettingMessagesPreconditions,
 		getMessageContext,
 		getOldMessages,
-		pollNewMessages,
 	}
 }