Merge pull request #10592 from nextcloud/backport/10573/stable27

[stable27] techdebt(sharedItems) migrate store to Pinia

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.spec.js

@@ -1,5 +1,6 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { cloneDeep } from 'lodash'
+import { createPinia, setActivePinia } from 'pinia'
 import Vuex from 'vuex'
 
 import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
@@ -29,6 +30,7 @@ describe('FilePreview.vue', () => {
 	beforeEach(() => {
 		localVue = createLocalVue()
 		localVue.use(Vuex)
+		setActivePinia(createPinia())
 
 		oldPixelRatio = window.devicePixelRatio
 

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -86,6 +86,7 @@ import AudioPlayer from './AudioPlayer.vue'
 
 import { useViewer } from '../../../../../composables/useViewer.js'
 import { SHARED_ITEM } from '../../../../../constants.js'
+import { useSharedItemsStore } from '../../../../../stores/sharedItems.js'
 
 const PREVIEW_TYPE = {
 	TEMPORARY: 0,
@@ -244,10 +245,12 @@ export default {
 
 	setup() {
 		const { openViewer, generateViewerObject } = useViewer()
+		const sharedItemsStore = useSharedItemsStore()
 
 		return {
 			openViewer,
 			generateViewerObject,
+			sharedItemsStore,
 		}
 	},
 
@@ -491,11 +494,10 @@ export default {
 					.map(item => this.generateViewerObject(item.messageParameters.file))
 
 				// Get available media files from store and put them to the list to navigate through slides
-				const mediaFiles = this.$store.getters.sharedItems(this.token).media
+				const mediaFiles = this.sharedItemsStore.sharedItems(this.token).media
 				const list = getRevertedList(mediaFiles)
 				const loadMore = async () => {
-					const { messages } = await this.$store.dispatch('getSharedItems',
-						{ token: this.token, type: SHARED_ITEM.TYPES.MEDIA })
+					const { messages } = await this.sharedItemsStore.getSharedItems(this.token, SHARED_ITEM.TYPES.MEDIA)
 					return getRevertedList(messages)
 				}
 

src/components/RightSidebar/SharedItems/SharedItemsBrowser.vue

@@ -51,6 +51,7 @@ import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import SharedItems from './SharedItems.vue'
 
+import { useSharedItemsStore } from '../../../stores/sharedItems.js'
 import { sharedItemsOrder, sharedItemTitle } from './sharedItemsConstants.js'
 
 export default {
@@ -82,7 +83,10 @@ export default {
 	emits: ['update:active-tab'],
 
 	setup() {
+		const sharedItemsStore = useSharedItemsStore()
+
 		return {
+			sharedItemsStore,
 			sharedItemTitle,
 			sharedItemsOrder,
 		}
@@ -130,10 +134,7 @@ export default {
 
 		async fetchItems(type) {
 			this.isRequestingMoreItems[this.activeTab] = true
-			const { hasMoreItems } = await this.$store.dispatch('getSharedItems', {
-				token: this.token,
-				type,
-			})
+			const { hasMoreItems } = await this.sharedItemsStore.getSharedItems(this.token, type)
 			if (hasMoreItems === false) {
 				this.hasFetchedAllItems[this.activeTab] = true
 			}

src/components/RightSidebar/SharedItems/SharedItemsTab.vue

@@ -94,6 +94,7 @@ import LoadingComponent from '../../LoadingComponent.vue'
 import SharedItems from './SharedItems.vue'
 import SharedItemsBrowser from './SharedItemsBrowser.vue'
 
+import { useSharedItemsStore } from '../../../stores/sharedItems.js'
 import {
 	sharedItemButtonTitle,
 	sharedItemsOrder,
@@ -126,7 +127,9 @@ export default {
 	},
 
 	setup() {
+		const sharedItemsStore = useSharedItemsStore()
 		return {
+			sharedItemsStore,
 			sharedItemButtonTitle,
 			sharedItemTitle,
 			sharedItemsOrder,
@@ -157,15 +160,15 @@ export default {
 		},
 
 		loading() {
-			return !this.$store.getters.isOverviewLoaded(this.token)
+			return !this.sharedItemsStore.overviewLoaded[this.token]
 		},
 
 		sharedItems() {
-			return this.$store.getters.sharedItems(this.token)
+			return this.sharedItemsStore.sharedItems(this.token)
 		},
 
 		hasSharedItems() {
-			return Object.keys(this.$store.getters.sharedItems(this.token)).length > 0
+			return Object.keys(this.sharedItems).length > 0
 		},
 
 		isSidebarOpen() {
@@ -180,16 +183,12 @@ export default {
 	watch: {
 		sharedItemsIdentifier() {
 			if (this.token && this.active && this.isSidebarOpen) {
-				this.getSharedItemsOverview()
+				this.sharedItemsStore.getSharedItemsOverview(this.token)
 			}
 		},
 	},
 
 	methods: {
-		getSharedItemsOverview() {
-			this.$store.dispatch('getSharedItemsOverview', { token: this.token })
-		},
-
 		hasMore(type, items) {
 			return Object.values(items).length > this.limit(type)
 		},

src/store/messagesStore.js

@@ -41,6 +41,7 @@ import {
 	removeReactionFromMessage,
 } from '../services/messagesService.js'
 import { useGuestNameStore } from '../stores/guestName.js'
+import { useSharedItemsStore } from '../stores/sharedItems.js'
 import CancelableRequest from '../utils/cancelableRequest.js'
 
 /**
@@ -501,8 +502,10 @@ const actions = {
 	 * @param {object} message the message;
 	 */
 	processMessage(context, message) {
+		const sharedItemsStore = useSharedItemsStore()
+
 		if (message.parent && message.systemMessage
-				&& (message.systemMessage === 'message_deleted'
+			&& (message.systemMessage === 'message_deleted'
 				|| message.systemMessage === 'reaction'
 				|| message.systemMessage === 'reaction_deleted'
 				|| message.systemMessage === 'reaction_revoked')) {
@@ -551,13 +554,11 @@ const actions = {
 
 		context.commit('addMessage', message)
 
-		 if ((message.messageType === 'comment' && message.message === '{file}' && message.messageParameters?.file)
+		if ((message.messageType === 'comment' && message.message === '{file}' && message.messageParameters?.file)
 			|| (message.messageType === 'voice-message' && message.message === '{file}' && message.messageParameters?.file)
 			|| (message.messageType === 'comment' && message.message === '{object}' && message.messageParameters?.object)) {
-			context.dispatch('addSharedItemMessage', {
-				message,
-			})
-		 }
+			sharedItemsStore.addSharedItemFromMessage(message)
+		}
 	},
 
 	/**

src/store/storeConfig.js

@@ -33,7 +33,6 @@ import participantsStore from './participantsStore.js'
 import pollStore from './pollStore.js'
 import quoteReplyStore from './quoteReplyStore.js'
 import reactionsStore from './reactionsStore.js'
-import sharedItemStore from './sharedItemsStore.js'
 import sidebarStore from './sidebarStore.js'
 import soundsStore from './soundsStore.js'
 import talkHashStore from './talkHashStore.js'
@@ -60,7 +59,6 @@ export default {
 		windowVisibilityStore,
 		integrationsStore,
 		reactionsStore,
-		sharedItemStore,
 		pollStore,
 		breakoutRoomsStore,
 	},