Merge pull request #10203 from nextcloud/feat/noid/cache-conversations-to-storage

feat(conversationsStore) - cache conversations to BrowserStorage

Author: Antreesy

src/components/LeftSidebar/LeftSidebar.spec.js

@@ -14,6 +14,7 @@ import { searchPossibleConversations, searchListedConversations } from '../../se
 import { EventBus } from '../../services/EventBus.js'
 import storeConfig from '../../store/storeConfig.js'
 import { findNcListItems, findNcActionButton } from '../../test-helpers.js'
+import { requestTabLeadership } from '../../utils/requestTabLeadership.js'
 
 jest.mock('@nextcloud/initial-state', () => ({
 	loadState: jest.fn(),
@@ -131,6 +132,8 @@ describe('LeftSidebar.vue', () => {
 
 			const wrapper = mountComponent()
 
+			await requestTabLeadership()
+
 			expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), expect.anything())
 
 			expect(wrapper.vm.searchText).toBe('')
@@ -156,6 +159,9 @@ describe('LeftSidebar.vue', () => {
 
 		test('re-fetches conversations every 30 seconds', async () => {
 			const wrapper = mountComponent()
+
+			await requestTabLeadership()
+
 			expect(wrapper.exists()).toBeTruthy()
 			expect(fetchConversationsAction).toHaveBeenCalled()
 
@@ -174,6 +180,9 @@ describe('LeftSidebar.vue', () => {
 
 		test('re-fetches conversations when receiving bus event', async () => {
 			const wrapper = mountComponent()
+
+			await requestTabLeadership()
+
 			expect(wrapper.exists()).toBeTruthy()
 			expect(fetchConversationsAction).toHaveBeenCalled()
 
@@ -302,6 +311,8 @@ describe('LeftSidebar.vue', () => {
 
 			const wrapper = mountComponent()
 
+			await requestTabLeadership()
+
 			expect(fetchConversationsAction).toHaveBeenCalledWith(expect.anything(), expect.anything())
 
 			const searchBox = wrapper.findComponent({ name: 'SearchBox' })

src/components/LeftSidebar/LeftSidebar.vue

@@ -267,7 +267,9 @@ import {
 	searchListedConversations,
 } from '../../services/conversationsService.js'
 import { EventBus } from '../../services/EventBus.js'
+import { talkBroadcastChannel } from '../../services/talkBroadcastChannel.js'
 import CancelableRequest from '../../utils/cancelableRequest.js'
+import { requestTabLeadership } from '../../utils/requestTabLeadership.js'
 
 export default {
 
@@ -339,6 +341,8 @@ export default {
 			preventFindingUnread: false,
 			roomListModifiedBefore: 0,
 			forceFullRoomListRefreshAfterXLoops: 0,
+			isFetchingConversations: false,
+			isCurrentTabLeader: false,
 			isFocused: false,
 			isFiltered: null,
 		}
@@ -423,17 +427,44 @@ export default {
 			this.abortSearch()
 		})
 
-		this.fetchConversations()
-	},
+		// Restore last fetched conversations from browser storage,
+		// before updated ones come from server
+		this.restoreConversations()
 
-	mounted() {
-		// Refreshes the conversations every 30 seconds
-		this.refreshTimer = window.setInterval(() => {
-			if (!this.isFetchingConversations) {
+		requestTabLeadership().then(() => {
+			this.isCurrentTabLeader = true
+			this.fetchConversations()
+			// Refreshes the conversations list every 30 seconds
+			this.refreshTimer = window.setInterval(() => {
 				this.fetchConversations()
+			}, 30000)
+		})
+
+		talkBroadcastChannel.addEventListener('message', (event) => {
+			if (this.isCurrentTabLeader) {
+				switch (event.data.message) {
+				case 'force-fetch-all-conversations':
+					this.roomListModifiedBefore = 0
+					this.debounceFetchConversations()
+					break
+				}
+			} else {
+				switch (event.data.message) {
+				case 'update-conversations':
+					this.$store.dispatch('patchConversations', {
+						conversations: event.data.conversations,
+						withRemoving: event.data.withRemoving,
+					})
+					break
+				case 'update-nextcloud-talk-hash':
+					this.$store.dispatch('setNextcloudTalkHash', event.data.hash)
+					break
+				}
 			}
-		}, 30000)
+		})
+	},
 
+	mounted() {
 		EventBus.$on('should-refresh-conversations', this.handleShouldRefreshConversations)
 		EventBus.$once('conversations-received', this.handleUnreadMention)
 		EventBus.$on('route-change', this.onRouteChange)
@@ -623,7 +654,13 @@ export default {
 		 */
 		async handleShouldRefreshConversations(options) {
 			if (options?.all === true) {
-				this.roomListModifiedBefore = 0
+				if (this.isCurrentTabLeader) {
+					this.roomListModifiedBefore = 0
+				} else {
+					// Force leader tab to do a full fetch
+					talkBroadcastChannel.postMessage({ message: 'force-fetch-all-conversations' })
+					return
+				}
 			} else if (options?.token && options?.properties) {
 				await this.$store.dispatch('setConversationProperties', {
 					token: options.token,
@@ -635,12 +672,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
@@ -673,16 +712,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/services/talkBroadcastChannel.js

@@ -0,0 +1,31 @@
+/**
+ *
+ * @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/>.
+ *
+ */
+
+/**
+ * Broadcast channel to send messages between active tabs.
+ */
+const talkBroadcastChannel = new BroadcastChannel('nextcloud:talk')
+
+export {
+	talkBroadcastChannel,
+}

src/store/conversationsStore.js

@@ -31,6 +31,7 @@ import {
 	PARTICIPANT,
 	WEBINAR,
 } from '../constants.js'
+import BrowserStorage from '../services/BrowserStorage.js'
 import {
 	makePublic,
 	makePrivate,
@@ -62,6 +63,7 @@ import {
 	startCallRecording,
 	stopCallRecording,
 } from '../services/recordingService.js'
+import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
 
 const DUMMY_CONVERSATION = {
 	token: '',
@@ -329,8 +331,9 @@ const actions = {
 	 * @param {object} payload the payload
 	 * @param {object[]} payload.conversations new conversations list
 	 * @param {boolean} payload.withRemoving whether to remove conversations that are not in the new list
+	 * @param {boolean} payload.withCaching whether to cache conversations to BrowserStorage with patch
 	 */
-	patchConversations(context, { conversations, withRemoving = false }) {
+	patchConversations(context, { conversations, withRemoving = false, withCaching = false }) {
 		const currentConversations = context.state.conversations
 		const newConversations = Object.fromEntries(
 			conversations.map((conversation) => [conversation.token, conversation])
@@ -353,6 +356,45 @@ const actions = {
 				context.dispatch('updateConversationIfHasChanged', newConversation)
 			}
 		}
+
+		if (withCaching) {
+			context.dispatch('cacheConversations')
+		}
+	},
+
+	/**
+	 * Restores conversations from BrowserStorage and add them to the store state
+	 *
+	 * @param {object} context default store context
+	 */
+	restoreConversations(context) {
+		const cachedConversations = BrowserStorage.getItem('cachedConversations')
+		if (!cachedConversations?.length) {
+			return
+		}
+
+		context.dispatch('patchConversations', {
+			conversations: JSON.parse(cachedConversations),
+			withRemoving: true,
+		})
+
+		console.debug('Conversations have been restored from BrowserStorage')
+	},
+
+	/**
+	 * Save conversations to BrowserStorage from the store state
+	 *
+	 * @param {object} context default store context
+	 */
+	cacheConversations(context) {
+		const conversations = context.getters.conversationsList
+		if (!conversations.length) {
+			return
+		}
+
+		const serializedConversations = JSON.stringify(conversations)
+		BrowserStorage.setItem('cachedConversations', serializedConversations)
+		console.debug(`Conversations were saved to BrowserStorage. Estimated object size: ${(serializedConversations.length / 1024).toFixed(2)} kB`)
 	},
 
 	/**
@@ -366,6 +408,7 @@ const actions = {
 		await deleteConversation(token)
 		// upon success, also delete from store
 		await context.dispatch('deleteConversation', token)
+		talkBroadcastChannel.postMessage({ message: 'force-fetch-all-conversations' })
 	},
 
 	/**
@@ -737,6 +780,14 @@ const actions = {
 				withRemoving: modifiedSince === 0,
 			})
 
+			dispatch('cacheConversations')
+
+			// Inform other tabs about successful fetch
+			talkBroadcastChannel.postMessage({
+				message: 'update-conversations',
+				conversations: response.data.ocs.data,
+				withRemoving: modifiedSince === 0,
+			})
 			return response
 		} catch (error) {
 			if (error?.response) {

src/store/conversationsStore.spec.js

@@ -11,6 +11,7 @@ import {
 	PARTICIPANT,
 	ATTENDEE,
 } from '../constants.js'
+import BrowserStorage from '../services/BrowserStorage.js'
 import {
 	makePublic,
 	makePrivate,
@@ -56,6 +57,11 @@ jest.mock('../services/conversationsService', () => ({
 
 jest.mock('@nextcloud/event-bus')
 
+jest.mock('../services/BrowserStorage.js', () => ({
+	getItem: jest.fn(),
+	setItem: jest.fn(),
+}))
+
 describe('conversationsStore', () => {
 	const testToken = 'XXTOKENXX'
 	const previousLastMessage = {
@@ -196,6 +202,31 @@ describe('conversationsStore', () => {
 			expect(deleteConversation).not.toHaveBeenCalled()
 		})
 
+		test('restores conversations cached in BrowserStorage', () => {
+			const testConversations = [
+				{
+					token: 'one_token',
+					attendeeId: 'attendee-id-1',
+					lastActivity: Date.parse('2023-02-01T00:00:00.000Z') / 1000,
+				},
+				{
+					token: 'another_token',
+					attendeeId: 'attendee-id-2',
+					lastActivity: Date.parse('2023-01-01T00:00:00.000Z') / 1000,
+				},
+			]
+
+			BrowserStorage.getItem.mockReturnValueOnce(
+				'[{"token":"one_token","attendeeId":"attendee-id-1","lastActivity":1675209600},{"token":"another_token","attendeeId":"attendee-id-2","lastActivity":1672531200}]'
+			)
+
+			store.dispatch('restoreConversations')
+
+			expect(BrowserStorage.getItem).toHaveBeenCalledWith('cachedConversations')
+			expect(store.getters.conversationsList).toHaveLength(2)
+			expect(store.getters.conversationsList).toEqual(testConversations)
+		})
+
 		test('deletes conversation from server', async () => {
 			store.dispatch('addConversation', testConversation)
 
@@ -258,6 +289,37 @@ describe('conversationsStore', () => {
 			expect(store.getters.conversationsList).toStrictEqual(testConversations)
 		})
 
+		test('sets fetched conversations to BrowserStorage', async () => {
+			const testConversations = [
+				{
+					token: 'one_token',
+					attendeeId: 'attendee-id-1',
+					lastActivity: Date.parse('2023-02-01T00:00:00.000Z') / 1000,
+				},
+				{
+					token: 'another_token',
+					attendeeId: 'attendee-id-2',
+					lastActivity: Date.parse('2023-01-01T00:00:00.000Z') / 1000,
+				},
+			]
+
+			const response = {
+				data: {
+					ocs: {
+						data: testConversations,
+					},
+				},
+			}
+
+			fetchConversations.mockResolvedValue(response)
+
+			await store.dispatch('fetchConversations', {})
+
+			expect(BrowserStorage.setItem).toHaveBeenCalledWith('cachedConversations',
+				'[{"token":"one_token","attendeeId":"attendee-id-1","lastActivity":1675209600},{"token":"another_token","attendeeId":"attendee-id-2","lastActivity":1672531200}]'
+			)
+		})
+
 		test('fetches all conversations and add new received conversations', async () => {
 			const oldConversation = {
 				token: 'tokenOne',