Merge pull request #37790 from nextcloud/fix/files-store-mixin

fix(files): fix sorting mixin usage

6 files changed, 26 insertions, 30 deletions

diff --git a/apps/files/src/mixins/filesSorting.ts b/apps/files/src/mixins/filesSorting.ts
index 8930587ffab..2f79a3eb171 100644
--- a/apps/files/src/mixins/filesSorting.ts
+++ b/apps/files/src/mixins/filesSorting.ts
@@ -21,18 +21,14 @@
  */
 import Vue from 'vue'
 
+import { mapState } from 'pinia'
 import { useViewConfigStore } from '../store/viewConfig'
-import type { Navigation  } from '../services/Navigation'
+import type { Navigation } from '../services/Navigation'
 
 export default Vue.extend({
-	setup() {
-		const viewConfigStore = useViewConfigStore()
-		return {
-			viewConfigStore,
-		}
-	},
-
 	computed: {
+		...mapState(useViewConfigStore, ['getConfig', 'setSortingBy', 'toggleSortingDirection']),
+
 		currentView(): Navigation {
 			return this.$navigation.active
 		},
@@ -41,7 +37,7 @@ export default Vue.extend({
 		 * Get the sorting mode for the current view
 		 */
 		sortingMode(): string {
-			return this.viewConfigStore.getConfig(this.currentView.id)?.sorting_mode
+			return this.getConfig(this.currentView.id)?.sorting_mode as string
 				|| this.currentView?.defaultSortKey
 				|| 'basename'
 		},
@@ -50,7 +46,7 @@ export default Vue.extend({
 		 * Get the sorting direction for the current view
 		 */
 		isAscSorting(): boolean {
-			const sortingDirection = this.viewConfigStore.getConfig(this.currentView.id)?.sorting_direction
+			const sortingDirection = this.getConfig(this.currentView.id)?.sorting_direction
 			return sortingDirection === 'asc'
 		},
 	},
@@ -59,11 +55,11 @@ export default Vue.extend({
 		toggleSortBy(key: string) {
 			// If we're already sorting by this key, flip the direction
 			if (this.sortingMode === key) {
-				this.viewConfigStore.toggleSortingDirection(this.currentView.id)
+				this.toggleSortingDirection(this.currentView.id)
 				return
 			}
 			// else sort ASC by this new key
-			this.viewConfigStore.setSortingBy(key, this.currentView.id)
+			this.setSortingBy(key, this.currentView.id)
 		},
 	},
 })
diff --git a/apps/files/src/store/files.ts b/apps/files/src/store/files.ts
index 11e4fc970a4..ea516a886d9 100644
--- a/apps/files/src/store/files.ts
+++ b/apps/files/src/store/files.ts
@@ -25,11 +25,11 @@ import type { FilesStore, RootsStore, RootOptions, Service, FilesState } from '.
 
 import { defineStore } from 'pinia'
 import { subscribe } from '@nextcloud/event-bus'
-import Vue from 'vue'
 import logger from '../logger'
-import { FileId } from '../types'
+import type { FileId } from '../types'
+import Vue from 'vue'
 
-export const useFilesStore = () => {
+export const useFilesStore = function() {
 	const store = defineStore('files', {
 		state: (): FilesState => ({
 			files: {} as FilesStore,
@@ -88,7 +88,7 @@ export const useFilesStore = () => {
 		}
 	})
 
-	const fileStore = store()
+	const fileStore = store(...arguments)
 	// Make sure we only register the listeners once
 	if (!fileStore._initialized) {
 		// subscribe('files:node:created', fileStore.onCreatedNode)
diff --git a/apps/files/src/store/keyboard.ts b/apps/files/src/store/keyboard.ts
index 1ba8285b960..bdce7d55075 100644
--- a/apps/files/src/store/keyboard.ts
+++ b/apps/files/src/store/keyboard.ts
@@ -28,7 +28,7 @@ import Vue from 'vue'
  * special keys states. Useful for checking the
  * current status of a key when executing a method.
  */
-export const useKeyboardStore = () => {
+export const useKeyboardStore = function() {
 	const store = defineStore('keyboard', {
 		state: () => ({			
 			altKey: false,
@@ -50,7 +50,7 @@ export const useKeyboardStore = () => {
 		}
 	})
 
-	const keyboardStore = store()
+	const keyboardStore = store(...arguments)
 	// Make sure we only register the listeners once
 	if (!keyboardStore._initialized) {
 		window.addEventListener('keydown', keyboardStore.onEvent)
diff --git a/apps/files/src/store/paths.ts b/apps/files/src/store/paths.ts
index bcd7375518c..c9335304bce 100644
--- a/apps/files/src/store/paths.ts
+++ b/apps/files/src/store/paths.ts
@@ -23,11 +23,11 @@
 import type { PathOptions, ServicesState } from '../types.ts'
 
 import { defineStore } from 'pinia'
-import Vue from 'vue'
 import { subscribe } from '@nextcloud/event-bus'
-import { FileId } from '../types'
+import type { FileId } from '../types'
+import Vue from 'vue'
 
-export const usePathsStore = () => {
+export const usePathsStore = function() {
 	const store = defineStore('paths', {
 		state: (): ServicesState => ({}),
 
@@ -55,7 +55,7 @@ export const usePathsStore = () => {
 		}
 	})
 
-	const pathsStore = store()
+	const pathsStore = store(...arguments)
 	// Make sure we only register the listeners once
 	if (!pathsStore._initialized) {
 		// TODO: watch folders to update paths?
diff --git a/apps/files/src/store/userconfig.ts b/apps/files/src/store/userconfig.ts
index c81b7b4d77f..42821951dbf 100644
--- a/apps/files/src/store/userconfig.ts
+++ b/apps/files/src/store/userconfig.ts
@@ -33,7 +33,7 @@ const userConfig = loadState('files', 'config', {
 	crop_image_previews: true,
 }) as UserConfig
 
-export const useUserConfigStore = () => {
+export const useUserConfigStore = function() {
 	const store = defineStore('userconfig', {
 		state: () => ({
 			userConfig,
@@ -60,7 +60,7 @@ export const useUserConfigStore = () => {
 		}
 	})
 
-	const userConfigStore = store()
+	const userConfigStore = store(...arguments)
 
 	// Make sure we only register the listeners once
 	if (!userConfigStore._initialized) {
diff --git a/apps/files/src/store/viewConfig.ts b/apps/files/src/store/viewConfig.ts
index d7a5ab1daa6..607596dfd68 100644
--- a/apps/files/src/store/viewConfig.ts
+++ b/apps/files/src/store/viewConfig.ts
@@ -27,12 +27,12 @@ import { loadState } from '@nextcloud/initial-state'
 import axios from '@nextcloud/axios'
 import Vue from 'vue'
 
-import { ViewConfigs, ViewConfigStore, ViewId } from '../types.ts'
-import { ViewConfig } from '../types'
+import type { ViewConfigs, ViewConfigStore, ViewId } from '../types'
+import type { ViewConfig } from '../types'
 
 const viewConfig = loadState('files', 'viewConfigs', {}) as ViewConfigs
 
-export const useViewConfigStore = () => {
+export const useViewConfigStore = function() {
 	const store = defineStore('viewconfig', {
 		state: () => ({
 			viewConfig,
@@ -46,7 +46,7 @@ export const useViewConfigStore = () => {
 			/**
 			 * Update the view config local store
 			 */
-			onUpdate(view: ViewId, key: string, value: boolean) {
+			onUpdate(view: ViewId, key: string, value: string | number | boolean) {
 				if (!this.viewConfig[view]) {
 					Vue.set(this.viewConfig, view, {})
 				}
@@ -56,7 +56,7 @@ export const useViewConfigStore = () => {
 			/**
 			 * Update the view config local store AND on server side
 			 */
-			async update(view: ViewId, key: string, value: boolean) {
+			async update(view: ViewId, key: string, value: string | number | boolean) {
 				axios.put(generateUrl(`/apps/files/api/v1/views/${view}/${key}`), {
 					value,
 				})
@@ -88,7 +88,7 @@ export const useViewConfigStore = () => {
 		}
 	})
 
-	const viewConfigStore = store()
+	const viewConfigStore = store(...arguments)
 
 	// Make sure we only register the listeners once
 	if (!viewConfigStore._initialized) {