Merge pull request #9892 from nextcloud/feat/9448/add-pinia-stores

feat(store) replace Vuex `settingsStore` with equivalent Pinia store

package.json

@@ -46,6 +46,7 @@
     "lodash": "^4.17.21",
     "mockconsole": "0.0.1",
     "nextcloud-vue-collections": "^0.11.1",
+    "pinia": "^2.1.4",
     "ua-parser-js": "^1.0.35",
     "util": "^0.12.5",
     "vue": "^2.7.14",

src/components/NewMessage/NewMessage.vue

@@ -183,6 +183,7 @@ import { CONVERSATION, PARTICIPANT, PRIVACY } from '../../constants.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile } from '../../services/filesSharingServices.js'
 import { searchPossibleMentions } from '../../services/mentionsService.js'
+import { useSettingsStore } from '../../stores/settings.js'
 import { fetchClipboardContent } from '../../utils/clipboard.js'
 import { isDarkTheme } from '../../utils/isDarkTheme.js'
 
@@ -261,8 +262,11 @@ export default {
 
 	setup() {
 		const { openViewer } = useViewer()
+		const settingsStore = useSettingsStore()
+
 		return {
 			openViewer,
+			settingsStore,
 			supportTypingStatus,
 		}
 	},
@@ -371,7 +375,7 @@ export default {
 		},
 		showTypingStatus() {
 			return this.hasTypingIndicator && this.supportTypingStatus
-				&& this.$store.getters.getTypingStatusPrivacy() === PRIVACY.PUBLIC
+				&& this.settingsStore.typingStatusPrivacy === PRIVACY.PUBLIC
 		},
 	},
 

src/components/SettingsDialog/SettingsDialog.vue

@@ -168,6 +168,7 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import MediaDevicesPreview from '../MediaDevicesPreview.vue'
 
 import { PRIVACY } from '../../constants.js'
+import { useSettingsStore } from '../../stores/settings.js'
 
 const supportTypingStatus = getCapabilities()?.spreed?.config?.chat?.['typing-privacy'] !== undefined
 
@@ -184,7 +185,10 @@ export default {
 	},
 
 	setup() {
+		const settingsStore = useSettingsStore()
+
 		return {
+			settingsStore,
 			supportTypingStatus,
 		}
 	},
@@ -220,19 +224,11 @@ export default {
 		},
 
 		readStatusPrivacyIsPublic() {
-			return this.readStatusPrivacy === PRIVACY.PUBLIC
-		},
-
-		readStatusPrivacy() {
-			return this.$store.getters.getReadStatusPrivacy()
+			return this.settingsStore.readStatusPrivacy === PRIVACY.PUBLIC
 		},
 
 		typingStatusPrivacyIsPublic() {
-			return this.typingStatusPrivacy === PRIVACY.PUBLIC
-		},
-
-		typingStatusPrivacy() {
-			return this.$store.getters.getTypingStatusPrivacy()
+			return this.settingsStore.typingStatusPrivacy === PRIVACY.PUBLIC
 		},
 
 		settingsUrl() {
@@ -280,9 +276,8 @@ export default {
 		async toggleReadStatusPrivacy() {
 			this.privacyLoading = true
 			try {
-				await this.$store.dispatch(
-					'updateReadStatusPrivacy',
-					this.readStatusPrivacyIsPublic ? PRIVACY.PRIVATE : PRIVACY.PUBLIC,
+				await this.settingsStore.updateReadStatusPrivacy(
+					this.readStatusPrivacyIsPublic ? PRIVACY.PRIVATE : PRIVACY.PUBLIC
 				)
 				showSuccess(t('spreed', 'Your privacy setting has been saved'))
 			} catch (exception) {
@@ -294,8 +289,7 @@ export default {
 		async toggleTypingStatusPrivacy() {
 			this.privacyLoading = true
 			try {
-				await this.$store.dispatch(
-					'updateTypingStatusPrivacy',
+				await this.settingsStore.updateTypingStatusPrivacy(
 					this.typingStatusPrivacyIsPublic ? PRIVACY.PRIVATE : PRIVACY.PUBLIC
 				)
 				showSuccess(t('spreed', 'Your privacy setting has been saved'))

src/main.js

@@ -24,6 +24,7 @@
  *
  */
 
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 import VueObserveVisibility from 'vue-observe-visibility'
 import vOutsideEvents from 'vue-outside-events'
@@ -70,18 +71,22 @@ Vue.prototype.n = translatePlural
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueObserveVisibility)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 Vue.use(vOutsideEvents)
 
+const pinia = createPinia()
+
 TooltipOptions.container = '#content-vue'
 store.dispatch('setMainContainerSelector', '#content-vue')
 
 const instance = new Vue({
 	el: '#content',
 	store,
+	pinia,
 	router,
 	propsData: {
 		fileInfo: null,

src/mainFilesSidebar.js

@@ -24,6 +24,7 @@
  *
  */
 
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 import VueObserveVisibility from 'vue-observe-visibility'
 import vOutsideEvents from 'vue-outside-events'
@@ -64,20 +65,25 @@ Vue.prototype.n = translatePlural
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 Vue.use(vOutsideEvents)
 Vue.use(VueObserveVisibility)
 
+const pinia = createPinia()
+
 store.dispatch('setMainContainerSelector', '.talkChatTab')
 
 const newCallView = () => new Vue({
 	store,
+	pinia,
 	render: h => h(FilesSidebarCallViewApp),
 })
 
 const newTab = () => new Vue({
 	store,
+	pinia,
 	id: 'talk-chat-tab',
 	render: h => h(FilesSidebarTabApp),
 })

src/mainPublicShareAuthSidebar.js

@@ -18,6 +18,7 @@
  *
  */
 
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 import VueObserveVisibility from 'vue-observe-visibility'
 import vOutsideEvents from 'vue-outside-events'
@@ -58,11 +59,13 @@ Vue.prototype.n = translatePlural
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 Vue.use(vOutsideEvents)
 Vue.use(VueObserveVisibility)
 
+const pinia = createPinia()
 store.dispatch('setMainContainerSelector', '#talk-sidebar')
 
 /**
@@ -127,6 +130,7 @@ function getShareToken() {
 
 const requestPasswordVm = new Vue({
 	store,
+	pinia,
 	id: 'talk-video-verification',
 	propsData: {
 		shareToken: getShareToken(),
@@ -137,6 +141,7 @@ requestPasswordVm.$mount('#request-password')
 
 const talkSidebarVm = new Vue({
 	store,
+	pinia,
 	...PublicShareAuthSidebar,
 })
 talkSidebarVm.$mount(document.querySelector('#talk-sidebar'))

src/mainPublicShareSidebar.js

@@ -18,6 +18,7 @@
  *
  */
 
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 import VueObserveVisibility from 'vue-observe-visibility'
 import vOutsideEvents from 'vue-outside-events'
@@ -58,11 +59,14 @@ Vue.prototype.n = translatePlural
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 Vue.use(vOutsideEvents)
 Vue.use(VueObserveVisibility)
 
+const pinia = createPinia()
+
 store.dispatch('setMainContainerSelector', '#talk-sidebar')
 
 /**
@@ -132,6 +136,7 @@ function getShareToken() {
 
 const talkSidebarVm = new Vue({
 	store,
+	pinia,
 	id: 'talk-chat-tab',
 	propsData: {
 		shareToken: getShareToken(),

src/mainRecording.js

@@ -25,6 +25,7 @@
  *
  */
 
+import { createPinia, PiniaVuePlugin } from 'pinia'
 import Vue from 'vue'
 import VueObserveVisibility from 'vue-observe-visibility'
 import vOutsideEvents from 'vue-outside-events'
@@ -72,12 +73,15 @@ Vue.prototype.n = translatePlural
 Vue.prototype.OC = OC
 Vue.prototype.OCA = OCA
 
+Vue.use(PiniaVuePlugin)
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(VueObserveVisibility)
 Vue.use(VueShortKey, { prevent: ['input', 'textarea', 'div'] })
 Vue.use(vOutsideEvents)
 
+const pinia = createPinia()
+
 TooltipOptions.container = '#call-container'
 store.dispatch('setMainContainerSelector', '#call-container')
 
@@ -90,6 +94,7 @@ if (!window.OCA.Talk) {
 const instance = new Vue({
 	el: '#content',
 	store,
+	pinia,
 	router,
 	render: h => h(Recording),
 })