assign a leader tab to fetch conversations only once in 30 seconds

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

Author: Antreesy

src/components/LeftSidebar/LeftSidebar.spec.js

@@ -26,6 +26,13 @@ jest.mock('../../services/conversationsService', () => ({
 // short-circuit debounce
 jest.mock('debounce', () => jest.fn().mockImplementation(fn => fn))
 
+window.navigator.locks = {
+	request: jest.fn().mockImplementation((name, callback) => {
+		callback()
+		return new Promise(() => {})
+	}),
+}
+
 describe('LeftSidebar.vue', () => {
 	let store
 	let localVue
@@ -38,8 +45,8 @@ describe('LeftSidebar.vue', () => {
 
 	const SEARCH_TERM = 'search'
 
-	const mountComponent = () => {
-		return mount(LeftSidebar, {
+	const mountComponent = async () => {
+		const wrapper = mount(LeftSidebar, {
 			localVue,
 			router,
 			store,
@@ -51,6 +58,8 @@ describe('LeftSidebar.vue', () => {
 				NcModal: true,
 			},
 		})
+		await flushPromises()
+		return wrapper
 	}
 
 	beforeEach(() => {
@@ -129,7 +138,7 @@ describe('LeftSidebar.vue', () => {
 			EventBus.$once('conversations-received', conversationsReceivedEvent)
 			fetchConversationsAction.mockResolvedValueOnce()
 
-			const wrapper = mountComponent()
+			const wrapper = await mountComponent()
 
 			expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), expect.anything())
 			expect(conversationsListMock).toHaveBeenCalled()
@@ -138,14 +147,10 @@ describe('LeftSidebar.vue', () => {
 			expect(conversationListItems).toHaveLength(conversationsList.length)
 
 			expect(wrapper.vm.searchText).toBe('')
-			expect(wrapper.vm.initialisedConversations).toBeFalsy()
+			expect(wrapper.vm.initialisedConversations).toBeTruthy()
 
-			expect(conversationsReceivedEvent).not.toHaveBeenCalled()
+			expect(conversationsReceivedEvent).toHaveBeenCalled()
 
-			// move on past the fetchConversation call
-			await flushPromises()
-
-			expect(wrapper.vm.initialisedConversations).toBeTruthy()
 			expect(conversationListItems.at(0).props('item')).toStrictEqual(conversationsList[2])
 			expect(conversationListItems.at(1).props('item')).toStrictEqual(conversationsList[0])
 			expect(conversationListItems.at(2).props('item')).toStrictEqual(conversationsList[1])
@@ -156,7 +161,7 @@ describe('LeftSidebar.vue', () => {
 		})
 
 		test('re-fetches conversations every 30 seconds', async () => {
-			const wrapper = mountComponent()
+			const wrapper = await mountComponent()
 			expect(wrapper.exists()).toBeTruthy()
 			expect(fetchConversationsAction).toHaveBeenCalled()
 
@@ -174,7 +179,7 @@ describe('LeftSidebar.vue', () => {
 		})
 
 		test('re-fetches conversations when receiving bus event', async () => {
-			const wrapper = mountComponent()
+			const wrapper = await mountComponent()
 			expect(wrapper.exists()).toBeTruthy()
 			expect(fetchConversationsAction).toHaveBeenCalled()
 
@@ -301,7 +306,7 @@ describe('LeftSidebar.vue', () => {
 				loadStateSettings = loadStateSettingsOverride
 			}
 
-			const wrapper = mountComponent()
+			const wrapper = await mountComponent()
 
 			expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), expect.anything())
 			expect(conversationsListMock).toHaveBeenCalled()
@@ -704,18 +709,18 @@ describe('LeftSidebar.vue', () => {
 			conversationsListMock.mockReturnValue([])
 			fetchConversationsAction.mockResolvedValueOnce()
 		})
-		test('shows new conversation button if user can start conversations', () => {
+		test('shows new conversation button if user can start conversations', async () => {
 			loadStateSettings.start_conversations = true
 
-			const wrapper = mountComponent()
+			const wrapper = await mountComponent()
 			const newConversationbutton = findNcActionButton(wrapper, 'Create a new conversation')
 			expect(newConversationbutton.exists()).toBeTruthy()
 
 		})
-		test('does not show new conversation button if user cannot start conversations', () => {
+		test('does not show new conversation button if user cannot start conversations', async () => {
 			loadStateSettings.start_conversations = false
 
-			const wrapper = mountComponent()
+			const wrapper = await mountComponent()
 			const newConversationbutton = findNcActionButton(wrapper, 'Create a new conversation')
 			expect(newConversationbutton.exists()).toBeFalsy()
 		})
@@ -725,7 +730,7 @@ describe('LeftSidebar.vue', () => {
 		conversationsListMock.mockImplementation(() => [])
 		const eventHandler = jest.fn()
 		subscribe('show-settings', eventHandler)
-		const wrapper = mountComponent()
+		const wrapper = await mountComponent()
 
 		const button = wrapper.find('.settings-button')
 		expect(button.exists()).toBeTruthy()

src/components/LeftSidebar/LeftSidebar.vue

@@ -262,6 +262,9 @@ import {
 } from '../../services/conversationsService.js'
 import { EventBus } from '../../services/EventBus.js'
 import CancelableRequest from '../../utils/cancelableRequest.js'
+import { onTalkLeaderTab } from '../../utils/talkLeader.js'
+
+const talkBroadcastChannel = new BroadcastChannel('nextcloud:talk')
 
 export default {
 
@@ -331,6 +334,8 @@ export default {
 			preventFindingUnread: false,
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
+			isFetchingConversations: false,
+			isLeaderTab: false,
 			isFocused: false,
 			isFiltered: null,
 		}
@@ -412,19 +417,28 @@ export default {
 
 		// Restore last fetched conversations from browser storage,
 		// before updated ones come from server
-		this.$store.dispatch('restoreConversations')
-
-		this.fetchConversations()
-	},
+		this.restoreConversations()
 
-	mounted() {
-		// Refreshes the conversations every 30 seconds
-		this.refreshTimer = window.setInterval(() => {
-			if (!this.isFetchingConversations) {
+		onTalkLeaderTab().then(() => {
+			this.isLeaderTab = true
+			this.fetchConversations()
+			// Refreshes the conversations list every 30 seconds
+			this.refreshTimer = window.setInterval(() => {
 				this.fetchConversations()
+			}, 30000)
+		})
+
+		talkBroadcastChannel.onmessage = (event) => {
+			if (!this.isLeaderTab && event.data.message === 'talk:update-conversations') {
+				this.$store.dispatch('patchConversations', {
+					conversations: event.data.conversations,
+					withRemoving: event.data.withRemoving,
+				})
 			}
-		}, 30000)
+		}
+	},
 
+	mounted() {
 		EventBus.$on('should-refresh-conversations', this.handleShouldRefreshConversations)
 		EventBus.$once('conversations-received', this.handleUnreadMention)
 		EventBus.$on('route-change', this.onRouteChange)
@@ -634,12 +648,14 @@ export default {
 		},
 
 		debounceFetchConversations: debounce(function() {
-			if (!this.isFetchingConversations) {
-				this.fetchConversations()
-			}
+			this.fetchConversations()
 		}, 3000),
 
 		async fetchConversations() {
+			if (this.isFetchingConversations) {
+				return
+			}
+
 			this.isFetchingConversations = true
 			if (this.forceFullRoomListRefreshAfterXLoops === 0) {
 				this.roomListModifiedBefore = 0
@@ -672,16 +688,24 @@ export default {
 				 * Emits a global event that is used in App.vue to update the page title once the
 				 * ( if the current route is a conversation and once the conversations are received)
 				 */
-				EventBus.$emit('conversations-received', {
-					singleConversation: false,
-				})
+				EventBus.$emit('conversations-received', { singleConversation: false })
 				this.isFetchingConversations = false
 			} catch (error) {
 				console.debug('Error while fetching conversations: ', error)
 				this.isFetchingConversations = false
 			}
 		},
 
+		async restoreConversations() {
+			try {
+				await this.$store.dispatch('restoreConversations')
+				this.initialisedConversations = true
+				EventBus.$emit('conversations-received', { singleConversation: false })
+			} catch (error) {
+				console.debug('Error while restoring conversations: ', error)
+			}
+		},
+
 		// Checks whether the conversations list is scrolled all the way to the top
 		// or not
 		handleScroll() {

src/store/conversationsStore.js

@@ -64,6 +64,8 @@ import {
 	stopCallRecording,
 } from '../services/recordingService.js'
 
+const talkBroadcastChannel = new BroadcastChannel('nextcloud:talk')
+
 const DUMMY_CONVERSATION = {
 	token: '',
 	displayName: '',
@@ -766,6 +768,12 @@ const actions = {
 
 			dispatch('cacheConversations')
 
+			// Inform other tabs about successful fetch
+			talkBroadcastChannel.postMessage({
+				message: 'talk:update-conversations',
+				conversations: response.data.ocs.data,
+				withRemoving: modifiedSince === 0,
+			})
 			return response
 		} catch (error) {
 			if (error?.response) {

src/test-setup.js

@@ -98,6 +98,10 @@ function myArrayBuffer() {
 
 global.Blob.prototype.arrayBuffer = Blob.prototype.arrayBuffer || myArrayBuffer
 
+global.BroadcastChannel = jest.fn(() => ({
+	postMessage: jest.fn(),
+}))
+
 const originalConsoleError = console.error
 console.error = function(error) {
 	if (error?.message?.includes('Could not parse CSS stylesheet')) {

src/utils/talkLeader.js

@@ -0,0 +1,51 @@
+/**
+ * @copyright Copyright (c) 2023 Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @author Maksim Sukharev <antreesy.web@gmail.com>
+ * @author Grigorii Shartsev <me@shgk.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/**
+ * Assign the first window, which requested that, a 'fetching leader'.
+ * It will fetch conversations with defined interval and cache to BrowserStorage
+ * Other will update list with defined interval from the BrowserStorage
+ * Once 'leader' is closed, next requested tab will be assigned, and so on
+ */
+const onTalkLeaderTab = async () => {
+	return new Promise((resolve) => {
+		// Locks are supported only with HTTPS protocol,
+		// so we don't lock anything for another cases
+		if (window.location.protocol !== 'https:') {
+			resolve()
+			return
+		}
+
+		window.navigator.locks.request('talk:leader', () => {
+			// resolve a promise for the first requested tab
+			resolve()
+
+			// return an infinity promise, resource is blocked until 'leader' tab is closed
+			return new Promise(() => {})
+		})
+	})
+}
+
+export {
+	onTalkLeaderTab,
+}