fixup! assign a leader tab to fetch conversations and update talk-hash every 30 seconds only from one source

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

Author: Antreesy

src/App.vue

@@ -64,6 +64,7 @@ import Router from './router/router.js'
 import BrowserStorage from './services/BrowserStorage.js'
 import { EventBus } from './services/EventBus.js'
 import { leaveConversationSync } from './services/participantsService.js'
+import { useLeaderTabStore } from './stores/leaderTab.js'
 import { signalingKill } from './utils/webrtc/index.js'
 
 // Styles
@@ -94,7 +95,12 @@ export default {
 
 	setup() {
 		const isInCall = useIsInCall()
-		return { isInCall }
+		const leaderTabStore = useLeaderTabStore()
+
+		return {
+			isInCall,
+			leaderTabStore,
+		}
 	},
 
 	data() {
@@ -209,8 +215,8 @@ export default {
 			return OCP.Accessibility.disableKeyboardShortcuts()
 		},
 
-		isLeaderTab() {
-			return this.$store.getters.isCurrentTabLeader
+		isCurrentTabLeader() {
+			return this.leaderTabStore.isCurrentTabLeader
 		},
 	},
 
@@ -449,10 +455,10 @@ export default {
 			console.debug('Can not set current user because it\'s a guest')
 		}
 
-		this.$store.dispatch('requestTabLeadership')
+		this.leaderTabStore.requestTabLeadership()
 
 		talkBroadcastChannel.onmessage = (event) => {
-			if (this.isLeaderTab) {
+			if (this.isCurrentTabLeader) {
 				return
 			}
 

src/components/LeftSidebar/LeftSidebar.spec.js

@@ -1,6 +1,7 @@
 import { createLocalVue, mount } from '@vue/test-utils'
 import flushPromises from 'flush-promises' // TODO fix after migration to @vue/test-utils v2.0.0
 import { cloneDeep } from 'lodash'
+import { createPinia, setActivePinia } from 'pinia'
 import VueRouter from 'vue-router'
 import Vuex from 'vuex'
 
@@ -13,6 +14,7 @@ import router from '../../__mocks__/router.js'
 import { searchPossibleConversations, searchListedConversations } from '../../services/conversationsService.js'
 import { EventBus } from '../../services/EventBus.js'
 import storeConfig from '../../store/storeConfig.js'
+import { useLeaderTabStore } from '../../stores/leaderTab.js'
 import { findNcListItems, findNcActionButton } from '../../test-helpers.js'
 
 jest.mock('@nextcloud/initial-state', () => ({
@@ -32,7 +34,6 @@ describe('LeftSidebar.vue', () => {
 	let testStoreConfig
 	let loadStateSettings
 	let conversationsListMock
-	let isLeaderTabMock
 	let fetchConversationsAction
 	let addConversationAction
 	let createOneToOneConversationAction
@@ -54,7 +55,7 @@ describe('LeftSidebar.vue', () => {
 		})
 	}
 
-	beforeEach(() => {
+	beforeEach(async () => {
 		jest.useFakeTimers()
 
 		localVue = createLocalVue()
@@ -77,19 +78,23 @@ describe('LeftSidebar.vue', () => {
 
 		// note: need a copy because the Vue modifies it when sorting
 		conversationsListMock = jest.fn()
-		isLeaderTabMock = jest.fn()
 		fetchConversationsAction = jest.fn().mockReturnValue({ headers: {} })
 		addConversationAction = jest.fn()
 		createOneToOneConversationAction = jest.fn()
 		const getUserIdMock = jest.fn().mockReturnValue('current-user')
 		testStoreConfig.modules.actorStore.getters.getUserId = () => getUserIdMock
-		testStoreConfig.modules.talkHashStore.getters.isCurrentTabLeader = isLeaderTabMock
 		testStoreConfig.modules.conversationsStore.getters.conversationsList = conversationsListMock
 		testStoreConfig.modules.conversationsStore.actions.fetchConversations = fetchConversationsAction
 		testStoreConfig.modules.conversationsStore.actions.addConversation = addConversationAction
 		testStoreConfig.modules.conversationsStore.actions.createOneToOneConversation = createOneToOneConversationAction
 
 		store = new Vuex.Store(testStoreConfig)
+
+		setActivePinia(createPinia())
+		const leaderTabStore = useLeaderTabStore()
+		await leaderTabStore.requestTabLeadership()
+
+		// TODO add a unit test for sub-tabs
 	})
 
 	afterEach(() => {
@@ -125,7 +130,6 @@ describe('LeftSidebar.vue', () => {
 
 			// note: need a copy because the Vue modifies it when sorting
 			conversationsListMock.mockImplementation(() => cloneDeep(conversationsList))
-			isLeaderTabMock.mockReturnValue(true)
 		})
 
 		test('fetches and renders conversation list initially', async () => {
@@ -193,22 +197,6 @@ describe('LeftSidebar.vue', () => {
 			// note: debounce was short-circuited so no delay needed
 			expect(fetchConversationsAction).toHaveBeenCalled()
 		})
-
-		test('doesn\'t fetch conversations if not a leader tab', async () => {
-			isLeaderTabMock.mockReturnValue(false)
-			const wrapper = mountComponent()
-			expect(wrapper.exists()).toBeTruthy()
-			expect(fetchConversationsAction).not.toHaveBeenCalled()
-
-			fetchConversationsAction.mockClear()
-
-			// move past async call
-			await flushPromises()
-			expect(fetchConversationsAction).not.toHaveBeenCalled()
-
-			jest.advanceTimersByTime(30000)
-			expect(fetchConversationsAction).not.toHaveBeenCalled()
-		})
 	})
 
 	describe('search results', () => {
@@ -293,7 +281,6 @@ describe('LeftSidebar.vue', () => {
 			// note: need a copy because the Vue modifies it when sorting
 			conversationsListMock.mockImplementation(() => cloneDeep(conversationsList))
 			fetchConversationsAction.mockResolvedValue()
-			isLeaderTabMock.mockReturnValue(true)
 		})
 
 		/**

src/components/LeftSidebar/LeftSidebar.vue

@@ -261,6 +261,7 @@ import {
 	searchListedConversations,
 } from '../../services/conversationsService.js'
 import { EventBus } from '../../services/EventBus.js'
+import { useLeaderTabStore } from '../../stores/leaderTab.js'
 import CancelableRequest from '../../utils/cancelableRequest.js'
 
 export default {
@@ -300,11 +301,13 @@ export default {
 		const searchBox = ref(null)
 
 		const { initializeNavigation } = useArrowNavigation(leftSidebar, searchBox)
+		const leaderTabStore = useLeaderTabStore()
 
 		return {
 			initializeNavigation,
 			leftSidebar,
 			searchBox,
+			leaderTabStore,
 		}
 	},
 
@@ -404,13 +407,13 @@ export default {
 			}
 		},
 
-		isLeaderTab() {
-			return this.$store.getters.isCurrentTabLeader
+		isCurrentTabLeader() {
+			return this.leaderTabStore.isCurrentTabLeader
 		},
 	},
 
 	watch: {
-		isLeaderTab: {
+		isCurrentTabLeader: {
 			immediate: true,
 			handler(value) {
 				if (!value) {

src/store/talkHashStore.js

@@ -22,24 +22,18 @@
 
 import { showError, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
 
-import { onTalkLeaderTab } from '../utils/talkLeader.js'
-
 const talkBroadcastChannel = new BroadcastChannel('nextcloud:talk')
 
 const state = {
 	initialNextcloudTalkHash: '',
 	isNextcloudTalkHashDirty: false,
 	maintenanceWarningToast: null,
-	isCurrentTabLeader: false,
 }
 
 const getters = {
 	isNextcloudTalkHashDirty: (state) => {
 		return state.isNextcloudTalkHashDirty
 	},
-	isCurrentTabLeader: (state) => {
-		return state.isCurrentTabLeader
-	},
 }
 
 const mutations = {
@@ -71,15 +65,6 @@ const mutations = {
 	setMaintenanceWarningToast(state, maintenanceWarningToast) {
 		state.maintenanceWarningToast = maintenanceWarningToast
 	},
-
-	/**
-	 * Mark the current Tab as a leader
-	 *
-	 * @param {object} state current store state
-	 */
-	setCurrentTabLeader: (state) => {
-		state.isCurrentTabLeader = true
-	},
 }
 
 const actions = {
@@ -132,12 +117,6 @@ const actions = {
 			context.commit('setMaintenanceWarningToast', null)
 		}
 	},
-
-	requestTabLeadership(context) {
-		onTalkLeaderTab().then(() => {
-			context.commit('setCurrentTabLeader')
-		})
-	},
 }
 
 export default { state, mutations, getters, actions }

src/stores/leaderTab.js

@@ -0,0 +1,39 @@
+/**
+ * @copyright Copyright (c) 2023 Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @author Maksim Sukharev <antreesy.web@gmail.com>
+ *
+ * @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/>.
+ *
+ */
+
+import { defineStore } from 'pinia'
+import Vue from 'vue'
+
+import { onTalkLeaderTab } from '../utils/talkLeader.js'
+
+export const useLeaderTabStore = defineStore('leaderTab', {
+	state: () => ({
+		isCurrentTabLeader: false,
+	}),
+
+	actions: {
+		async requestTabLeadership() {
+			await onTalkLeaderTab()
+			Vue.set(this, 'isCurrentTabLeader', true)
+		},
+	},
+})