feat: migrate getters to a new store

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

src/FilesSidebarCallViewApp.vue

@@ -20,6 +20,7 @@ import { useGetToken } from './composables/useGetToken.ts'
 import { useHashCheck } from './composables/useHashCheck.js'
 import { useIsInCall } from './composables/useIsInCall.js'
 import { useSessionIssueHandler } from './composables/useSessionIssueHandler.ts'
+import { useTokenStore } from './stores/token.ts'
 
 export default {
 
@@ -43,6 +44,7 @@ export default {
 			isInCall: useIsInCall(),
 			isLeavingAfterSessionIssue: useSessionIssueHandler(),
 			token: useGetToken(),
+			tokenStore: useTokenStore(),
 		}
 	},
 
@@ -67,7 +69,7 @@ export default {
 		},
 
 		fileIdForToken() {
-			return this.$store.getters.getFileIdForToken()
+			return this.tokenStore.fileIdForToken
 		},
 
 		/**

src/FilesSidebarTabApp.vue

@@ -42,6 +42,7 @@ import {
 	leaveConversationSync,
 } from './services/participantsService.js'
 import { useActorStore } from './stores/actor.ts'
+import { useTokenStore } from './stores/token.ts'
 import { checkBrowser } from './utils/browserCheck.ts'
 import CancelableRequest from './utils/cancelableRequest.js'
 import { signalingKill } from './utils/webrtc/index.js'
@@ -66,6 +67,7 @@ export default {
 			isLeavingAfterSessionIssue: useSessionIssueHandler(),
 			actorStore: useActorStore(),
 			token: useGetToken(),
+			tokenStore: useTokenStore(),
 		}
 	},
 
@@ -92,7 +94,7 @@ export default {
 		},
 
 		fileIdForToken() {
-			return this.$store.getters.getFileIdForToken()
+			return this.tokenStore.fileIdForToken
 		},
 
 		isChatTheActiveTab() {

src/components/NewMessage/NewMessage.vue

@@ -199,11 +199,11 @@ import { CONVERSATION, PARTICIPANT, PRIVACY } from '../../constants.ts'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig, hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.ts'
-import { shareFile } from '../../services/filesSharingServices.ts'
 import { useActorStore } from '../../stores/actor.ts'
 import { useChatExtrasStore } from '../../stores/chatExtras.js'
 import { useGroupwareStore } from '../../stores/groupware.ts'
 import { useSettingsStore } from '../../stores/settings.js'
+import { useTokenStore } from '../../stores/token.ts'
 import { fetchClipboardContent } from '../../utils/clipboard.js'
 import { ONE_DAY_IN_MS } from '../../utils/formattedTime.ts'
 import { getCurrentSelectionRange, insertTextInElement, selectRange } from '../../utils/selectionRange.ts'
@@ -300,6 +300,7 @@ export default {
 			chatExtrasStore: useChatExtrasStore(),
 			groupwareStore: useGroupwareStore(),
 			settingsStore: useSettingsStore(),
+			tokenStore: useTokenStore(),
 			supportTypingStatus,
 			autoComplete,
 			userData,
@@ -396,7 +397,7 @@ export default {
 		},
 
 		currentConversationIsJoined() {
-			return this.$store.getters.currentConversationIsJoined
+			return this.tokenStore.currentConversationIsJoined
 		},
 
 		currentUploadId() {

src/components/RoomSelector.vue

@@ -57,6 +57,7 @@ import NcTextField from '@nextcloud/vue/components/NcTextField'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
 import MessageOutline from 'vue-material-design-icons/MessageOutline.vue'
 import ConversationsSearchListVirtual from './LeftSidebar/ConversationsList/ConversationsSearchListVirtual.vue'
+import { useGetToken } from '../composables/useGetToken.ts'
 import { CONVERSATION } from '../constants.ts'
 import { fetchConversations, searchListedConversations } from '../services/conversationsService.ts'
 
@@ -120,11 +121,13 @@ export default {
 
 	emits: ['close', 'select'],
 
-	setup() {
+	setup(props) {
+		const currentRoom = ref(props.isPlugin ? null : useGetToken().value)
 		const selectedRoom = ref(null)
 		provide('selectedRoom', selectedRoom)
 
 		return {
+			currentRoom,
 			selectedRoom,
 		}
 	},
@@ -132,7 +135,6 @@ export default {
 	data() {
 		return {
 			rooms: [],
-			currentRoom: null,
 			searchText: '',
 			loading: true,
 		}
@@ -163,10 +165,6 @@ export default {
 
 	beforeMount() {
 		this.fetchRooms()
-		const $store = OCA.Talk?.instance?.$store
-		if ($store) {
-			this.currentRoom = $store.getters.getToken()
-		}
 	},
 
 	methods: {

src/components/TopBar/CallButton.vue

@@ -113,6 +113,7 @@ import { useCallViewStore } from '../../stores/callView.ts'
 import { useSettingsStore } from '../../stores/settings.js'
 import { useSoundsStore } from '../../stores/sounds.js'
 import { useTalkHashStore } from '../../stores/talkHash.js'
+import { useTokenStore } from '../../stores/token.ts'
 import { blockCalls, unsupportedWarning } from '../../utils/browserCheck.ts'
 import { messagePleaseReload } from '../../utils/talkDesktopUtils.ts'
 
@@ -192,6 +193,7 @@ export default {
 	setup() {
 		return {
 			actorStore: useActorStore(),
+			tokenStore: useTokenStore(),
 			token: useGetToken(),
 			isInCall: useIsInCall(),
 			breakoutRoomsStore: useBreakoutRoomsStore(),
@@ -258,7 +260,7 @@ export default {
 				|| this.isInLobby
 				|| this.conversation.readOnly
 				|| this.isNextcloudTalkHashDirty
-				|| !this.currentConversationIsJoined
+				|| !this.tokenStore.currentConversationIsJoined
 				|| blockCalls
 		},
 
@@ -323,10 +325,6 @@ export default {
 				&& this.isInCall
 		},
 
-		currentConversationIsJoined() {
-			return this.$store.getters.currentConversationIsJoined
-		},
-
 		isBreakoutRoom() {
 			return this.conversation.objectType === CONVERSATION.OBJECT_TYPE.BREAKOUT_ROOM
 		},

src/composables/useGetToken.ts

@@ -5,7 +5,7 @@
 
 import { createSharedComposable } from '@vueuse/core'
 import { computed } from 'vue'
-import { useStore } from './useStore.js'
+import { useTokenStore } from '../stores/token.ts'
 
 /**
  * FIXME: if router is available (main app), rely on it.
@@ -21,8 +21,7 @@ import { useStore } from './useStore.js'
  * Shared composable to get token of current conversation
  */
 export const useGetToken = createSharedComposable(function() {
-	// FIXME: Fallback to tokenStore for now, to be removed
-	const store = useStore()
+	const tokenStore = useTokenStore()
 
-	return computed<string>(() => store.getters.getToken())
+	return computed<string>(() => tokenStore.token)
 })

src/init.js

@@ -14,6 +14,7 @@ import { EventBus } from './services/EventBus.ts'
 import store from './store/index.js'
 import { useIntegrationsStore } from './stores/integrations.js'
 import pinia from './stores/pinia.ts'
+import { useTokenStore } from './stores/token.ts'
 
 import '@nextcloud/dialogs/style.css'
 
@@ -22,6 +23,7 @@ if (!window.OCA.Talk) {
 }
 
 const integrationsStore = useIntegrationsStore(pinia)
+const tokenStore = useTokenStore(pinia)
 
 /**
  * Frontend message API for adding actions to talk messages.
@@ -64,11 +66,11 @@ EventBus.on('signaling-recording-status-changed', ([token, status]) => {
 		return
 	}
 
-	if (!store.getters.isInCall(store.getters.getToken())) {
+	if (!store.getters.isInCall(tokenStore.token)) {
 		return
 	}
 
-	const conversation = store.getters.conversation(store.getters.getToken())
+	const conversation = store.getters.conversation(tokenStore.token)
 	if (conversation?.participantType === PARTICIPANT.TYPE.OWNER
 		|| conversation?.participantType === PARTICIPANT.TYPE.MODERATOR) {
 		showError(t('spreed', 'The recording failed. Please contact your administrator.'))

src/mainFilesSidebarLoader.js

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import pinia from './stores/pinia.ts'
+import { useTokenStore } from './stores/token.ts'
 import FilesSidebarCallView from './views/FilesSidebarCallView.js'
 
 import './init.js'
@@ -12,13 +14,13 @@ const isEnabled = function(fileInfo) {
 		return true
 	}
 
-	const token = OCA.Talk.store.getters.getToken()
+	const tokenStore = useTokenStore(pinia)
 
 	// If the Talk tab can not be displayed then the current conversation is
 	// left; this must be done here because "setFileInfo" will not get
 	// called with the new file if the tab can not be displayed.
-	if (token) {
-		OCA.Talk.store.dispatch('leaveConversation', { token })
+	if (tokenStore.token) {
+		OCA.Talk.store.dispatch('leaveConversation', { token: tokenStore.token })
 	}
 
 	OCA.Talk.store.dispatch('updateTokenAndFileIdForToken', {

src/store/conversationsStore.js

@@ -69,12 +69,16 @@ import { useBreakoutRoomsStore } from '../stores/breakoutRooms.ts'
 import { useChatExtrasStore } from '../stores/chatExtras.js'
 import { useFederationStore } from '../stores/federation.ts'
 import { useGroupwareStore } from '../stores/groupware.ts'
+import pinia from '../stores/pinia.ts'
 import { useReactionsStore } from '../stores/reactions.js'
 import { useSharedItemsStore } from '../stores/sharedItems.js'
 import { useTalkHashStore } from '../stores/talkHash.js'
+import { useTokenStore } from '../stores/token.ts'
 import { convertToUnix } from '../utils/formattedTime.ts'
 import { getDisplayNamesList } from '../utils/getDisplayName.ts'
 
+const tokenStore = useTokenStore(pinia)
+
 const forcePasswordProtection = getTalkConfig('local', 'conversations', 'force-passwords')
 const supportConversationCreationPassword = hasTalkFeature('local', 'conversation-creation-password')
 const supportConversationCreationAll = hasTalkFeature('local', 'conversation-creation-all')
@@ -161,21 +165,21 @@ const getters = {
 	 */
 	conversation: (state) => (token) => state.conversations[token],
 	dummyConversation: (state) => Object.assign({}, DUMMY_CONVERSATION),
-	isModerator: (state, getters, rootState, rootGetters) => {
-		const conversation = getters.conversation(rootGetters.getToken())
+	isModerator: (state, getters) => {
+		const conversation = getters.conversation(tokenStore.token)
 		return conversation?.participantType === PARTICIPANT.TYPE.OWNER
 			|| conversation?.participantType === PARTICIPANT.TYPE.MODERATOR
 			|| conversation?.participantType === PARTICIPANT.TYPE.GUEST_MODERATOR
 	},
-	isModeratorOrUser: (state, getters, rootState, rootGetters) => {
-		const conversation = getters.conversation(rootGetters.getToken())
+	isModeratorOrUser: (state, getters) => {
+		const conversation = getters.conversation(tokenStore.token)
 		return !conversation?.isDummyConversation
 			&& (getters.isModerator
 				|| conversation?.participantType === PARTICIPANT.TYPE.USER
 				|| conversation?.participantType === PARTICIPANT.TYPE.USER_SELF_JOINED)
 	},
-	isInLobby: (state, getters, rootState, rootGetters) => {
-		const conversation = getters.conversation(rootGetters.getToken())
+	isInLobby: (state, getters) => {
+		const conversation = getters.conversation(tokenStore.token)
 		return conversation
 			&& conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
 			&& !getters.isModerator

src/store/participantsStore.js

@@ -36,11 +36,15 @@ import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
 import { useActorStore } from '../stores/actor.ts'
 import { useCallViewStore } from '../stores/callView.ts'
 import { useGuestNameStore } from '../stores/guestName.js'
+import pinia from '../stores/pinia.ts'
 import { useSessionStore } from '../stores/session.ts'
+import { useTokenStore } from '../stores/token.ts'
 import CancelableRequest from '../utils/cancelableRequest.js'
 import { convertToUnix } from '../utils/formattedTime.ts'
 import { messagePleaseTryToReload } from '../utils/talkDesktopUtils.ts'
 
+const tokenStore = useTokenStore(pinia)
+
 /**
  * Emit global event for user status update with the status from a participant
  *
@@ -138,17 +142,14 @@ const getters = {
 	 * Gets the array of external session ids.
 	 *
 	 * @param {object} state - the state object.
-	 * @param {object} getters - the getters object.
-	 * @param {object} rootState - the rootState object.
-	 * @param {object} rootGetters - the rootGetters object.
 	 * @return {boolean} the typing status of actor.
 	 */
-	actorIsTyping: (state, getters, rootState, rootGetters) => {
-		if (!state.typing[rootGetters.getToken()]) {
+	actorIsTyping: (state) => {
+		if (!state.typing[tokenStore.token]) {
 			return false
 		}
 		const actorStore = useActorStore()
-		return Object.keys(state.typing[rootGetters.getToken()]).some((sessionId) => actorStore.sessionId === sessionId)
+		return Object.keys(state.typing[tokenStore.token]).some((sessionId) => actorStore.sessionId === sessionId)
 	},
 
 	/**
@@ -1170,7 +1171,7 @@ const actions = {
 	},
 
 	async sendTypingSignal(context, { typing }) {
-		if (!context.getters.currentConversationIsJoined) {
+		if (!tokenStore.currentConversationIsJoined) {
 			return
 		}
 

src/utils/SignalingTypingHandler.js

@@ -5,6 +5,7 @@
 
 import { useActorStore } from '../stores/actor.ts'
 import pinia from '../stores/pinia.ts'
+import { useTokenStore } from '../stores/token.ts'
 import SignalingParticipantList from './SignalingParticipantList.js'
 
 /**
@@ -20,6 +21,7 @@ import SignalingParticipantList from './SignalingParticipantList.js'
 export default function SignalingTypingHandler(store) {
 	this._store = store
 	this._actorStore = useActorStore(pinia)
+	this._tokenStore = useTokenStore(pinia)
 
 	this._signaling = null
 	this._signalingParticipantList = new SignalingParticipantList()
@@ -73,7 +75,7 @@ SignalingTypingHandler.prototype = {
 			return
 		}
 
-		if (!this._store.getters.currentConversationIsJoined) {
+		if (!this._tokenStore.currentConversationIsJoined) {
 			return
 		}
 
@@ -91,7 +93,7 @@ SignalingTypingHandler.prototype = {
 		}
 
 		this._store.dispatch('setTyping', {
-			token: this._store.getters.getToken(),
+			token: this._tokenStore.token,
 			sessionId: this._actorStore.sessionId,
 			typing,
 		})
@@ -108,7 +110,7 @@ SignalingTypingHandler.prototype = {
 		}
 
 		this._store.dispatch('setTyping', {
-			token: this._store.getters.getToken(),
+			token: this._tokenStore.token,
 			sessionId: participant.nextcloudSessionId,
 			typing: data.type === 'startedTyping',
 		})
@@ -130,7 +132,7 @@ SignalingTypingHandler.prototype = {
 	_handleParticipantsLeft(SignalingParticipantList, participants) {
 		for (const participant of participants) {
 			this._store.dispatch('setTyping', {
-				token: this._store.getters.getToken(),
+				token: this._tokenStore.token,
 				sessionId: participant.nextcloudSessionId,
 				typing: false,
 			})

src/utils/webrtc/SpeakingStatusHandler.js

@@ -13,10 +13,12 @@
 
 import { useActorStore } from '../../stores/actor.ts'
 import pinia from '../../stores/pinia.ts'
+import { useTokenStore } from '../../stores/token.ts'
 export default class SpeakingStatusHandler {
 	// Constants, properties
 	#store
 	#actorStore
+	#tokenStore
 	#localMediaModel
 	#localCallParticipantModel
 	#callParticipantCollection
@@ -31,6 +33,7 @@ export default class SpeakingStatusHandler {
 	constructor(store, localMediaModel, localCallParticipantModel, callParticipantCollection) {
 		this.#store = store
 		this.#actorStore = useActorStore(pinia)
+		this.#tokenStore = useTokenStore(pinia)
 		this.#localMediaModel = localMediaModel
 		this.#localCallParticipantModel = localCallParticipantModel
 		this.#callParticipantCollection = callParticipantCollection
@@ -124,7 +127,7 @@ export default class SpeakingStatusHandler {
 	 */
 	#handleSpeaking(callParticipantModel, speaking) {
 		const attendeeId = this.#store.getters.findParticipant(
-			this.#store.getters.getToken(),
+			this.#tokenStore.token,
 			{ sessionId: callParticipantModel.attributes.nextcloudSessionId },
 		)?.attendeeId
 

src/utils/webrtc/models/LocalMediaModel.js

@@ -6,7 +6,8 @@
 import { reactive } from 'vue'
 import { VIRTUAL_BACKGROUND } from '../../../constants.ts'
 import BrowserStorage from '../../../services/BrowserStorage.js'
-import store from '../../../store/index.js'
+import pinia from '../../../stores/pinia.ts'
+import { useTokenStore } from '../../../stores/token.ts'
 import EmitterMixin from '../../EmitterMixin.js'
 
 /**
@@ -15,6 +16,8 @@ import EmitterMixin from '../../EmitterMixin.js'
 export default function LocalMediaModel() {
 	this._superEmitterMixin()
 
+	this._tokenStore = useTokenStore(pinia)
+
 	this.attributes = reactive({
 		localStreamRequestVideoError: null,
 		localStream: null,
@@ -179,7 +182,7 @@ LocalMediaModel.prototype = {
 	},
 
 	_setInitialState(localStream) {
-		this.set('token', store.getters.getToken())
+		this.set('token', this._tokenStore.token)
 
 		this._updateMediaAvailability(localStream)
 

src/utils/webrtc/webrtc.js

@@ -13,6 +13,7 @@ import { PARTICIPANT } from '../../constants.ts'
 import store from '../../store/index.js'
 import { useActorStore } from '../../stores/actor.ts'
 import pinia from '../../stores/pinia.ts'
+import { useTokenStore } from '../../stores/token.ts'
 import { Sounds } from '../sounds.js'
 import SimpleWebRTC from './simplewebrtc/simplewebrtc.js'
 
@@ -34,6 +35,7 @@ let localCallParticipantModel = null
 let showedTURNWarning = false
 let sendCurrentStateWithRepetitionTimeout = null
 const actorStore = useActorStore(pinia)
+const tokenStore = useTokenStore(pinia)
 
 /**
  * @param {Array} a Source object
@@ -475,7 +477,7 @@ function usersInCallChanged(signaling, users) {
 		&& localUserInCall) {
 		console.info('Force leaving the call for current participant')
 		store.dispatch('leaveCall', {
-			token: store.getters.getToken(),
+			token: tokenStore.token,
 			participantIdentifier: actorStore.participantIdentifier,
 		})