refactor: Make route parameters accessible using composables to reuse

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/files/src/components/FileEntry.vue

@@ -89,7 +89,8 @@ import { defineComponent } from 'vue'
 import { formatFileSize } from '@nextcloud/files'
 import moment from '@nextcloud/moment'
 
-import { useNavigation } from '../composables/useNavigation'
+import { useNavigation } from '../composables/useNavigation.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useDragAndDropStore } from '../store/dragging.ts'
 import { useFilesStore } from '../store/files.ts'
@@ -134,6 +135,10 @@ export default defineComponent({
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
 		const { currentView } = useNavigation()
+		const {
+			directory: currentDir,
+			fileId: currentFileId,
+		} = useRouteParameters()
 
 		return {
 			actionsMenuStore,
@@ -142,6 +147,8 @@ export default defineComponent({
 			renamingStore,
 			selectionStore,
 
+			currentDir,
+			currentFileId,
 			currentView,
 		}
 	},

apps/files/src/components/FileEntryGrid.vue

@@ -71,7 +71,8 @@ import { defineComponent } from 'vue'
 
 import NcDateTime from '@nextcloud/vue/dist/Components/NcDateTime.js'
 
-import { useNavigation } from '../composables/useNavigation'
+import { useNavigation } from '../composables/useNavigation.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
 import { useActionsMenuStore } from '../store/actionsmenu.ts'
 import { useDragAndDropStore } from '../store/dragging.ts'
 import { useFilesStore } from '../store/files.ts'
@@ -107,6 +108,10 @@ export default defineComponent({
 		const renamingStore = useRenamingStore()
 		const selectionStore = useSelectionStore()
 		const { currentView } = useNavigation()
+		const {
+			directory: currentDir,
+			fileId: currentFileId,
+		} = useRouteParameters()
 
 		return {
 			actionsMenuStore,
@@ -115,6 +120,8 @@ export default defineComponent({
 			renamingStore,
 			selectionStore,
 
+			currentDir,
+			currentFileId,
 			currentView,
 		}
 	},

apps/files/src/components/FileEntryMixin.ts

@@ -56,17 +56,10 @@ export default defineComponent({
 	},
 
 	computed: {
-		currentDir() {
-			// Remove any trailing slash but leave root slash
-			return (this.$route.query?.dir?.toString() || '/').replace(/^(.+)\/$/, '$1')
-		},
-		currentFileId() {
-			return this.$route.params?.fileid || this.$route.query?.fileid || null
-		},
-
 		fileid() {
 			return this.source.fileid ?? 0
 		},
+
 		uniqueId() {
 			return hashCode(this.source.source)
 		},

apps/files/src/components/FilesListVirtual.vue

@@ -69,6 +69,7 @@ import { translate as t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
 import { getSummaryFor } from '../utils/fileUtils'
 import { useSelectionStore } from '../store/selection.js'
 import { useUserConfigStore } from '../store/userconfig.ts'
@@ -118,7 +119,12 @@ export default defineComponent({
 	setup() {
 		const userConfigStore = useUserConfigStore()
 		const selectionStore = useSelectionStore()
+		const { fileId, openFile } = useRouteParameters()
+
 		return {
+			fileId,
+			openFile,
+
 			userConfigStore,
 			selectionStore,
 		}
@@ -139,18 +145,6 @@ export default defineComponent({
 			return this.userConfigStore.userConfig
 		},
 
-		fileId() {
-			return Number.parseInt(this.$route.params.fileid ?? '0') || null
-		},
-
-		/**
-		 * If the current `fileId` should be opened
-		 * The state of the `openfile` query param
-		 */
-		openFile() {
-			return !!this.$route.query.openfile
-		},
-
 		summary() {
 			return getSummaryFor(this.nodes)
 		},

apps/files/src/composables/useRouteParameters.ts

@@ -0,0 +1,47 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { computed } from 'vue'
+import { useRoute } from 'vue-router/composables'
+
+/**
+ * Get information about the current route
+ */
+export function useRouteParameters() {
+
+	const route = useRoute()
+
+	/**
+	 * Get the path of the current active directory
+	 */
+	const directory = computed<string>(
+		() => String(route.query.dir || '/')
+			// Remove any trailing slash but leave root slash
+			.replace(/^(.+)\/$/, '$1')
+	)
+
+	/**
+	 * Get the current fileId used on the route
+	 */
+	const fileId = computed<number | null>(() => {
+		const fileId = Number.parseInt(route.params.fileid ?? '0') || null
+		return Number.isNaN(fileId) ? null : fileId
+	})
+
+	/**
+	 * State of `openFile` route param
+	 */
+	const openFile = computed<boolean>(() => 'openFile' in route.params && route.params.openFile.toLocaleLowerCase() !== 'false')
+
+	return {
+		/** Path of currently open directory */
+		directory,
+
+		/** Current active fileId */
+		fileId,
+
+		/** Should the active node should be opened (`openFile` route param) */
+		openFile,
+	}
+}

apps/files/src/views/FilesList.vue

@@ -6,7 +6,7 @@
 	<NcAppContent :page-heading="pageHeading" data-cy-files-content>
 		<div class="files-list__header">
 			<!-- Current folder breadcrumbs -->
-			<BreadCrumbs :path="dir" @reload="fetchContent">
+			<BreadCrumbs :path="directory" @reload="fetchContent">
 				<template #actions>
 					<!-- Sharing button -->
 					<NcButton v-if="canShare && filesListWidth >= 512"
@@ -78,7 +78,7 @@
 			:name="currentView?.emptyTitle || t('files', 'No files in here')"
 			:description="currentView?.emptyCaption || t('files', 'Upload some content or sync with your devices!')"
 			data-cy-files-content-empty>
-			<template v-if="dir !== '/'" #action>
+			<template v-if="directory !== '/'" #action>
 				<!-- Uploader -->
 				<UploadPicker v-if="currentFolder && canUpload && !isQuotaExceeded"
 					allow-folders
@@ -142,6 +142,7 @@ import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
 
 import { action as sidebarAction } from '../actions/sidebarAction.ts'
 import { useNavigation } from '../composables/useNavigation.ts'
+import { useRouteParameters } from '../composables/useRouteParameters.ts'
 import { useFilesStore } from '../store/files.ts'
 import { useFiltersStore } from '../store/filters.ts'
 import { usePathsStore } from '../store/paths.ts'
@@ -192,12 +193,15 @@ export default defineComponent({
 		const userConfigStore = useUserConfigStore()
 		const viewConfigStore = useViewConfigStore()
 		const { currentView } = useNavigation()
+		const { directory, fileId } = useRouteParameters()
 
 		const enableGridView = (loadState('core', 'config', [])['enable_non-accessible_features'] ?? true)
 		const forbiddenCharacters = loadState<string[]>('files', 'forbiddenCharacters', [])
 
 		return {
 			currentView,
+			directory,
+			fileId,
 			t,
 
 			filesStore,
@@ -248,22 +252,6 @@ export default defineComponent({
 			return this.currentView?.name ?? t('files', 'Files')
 		},
 
-		/**
-		 * The current directory query.
-		 */
-		dir(): string {
-			// Remove any trailing slash but leave root slash
-			return (this.$route?.query?.dir?.toString() || '/').replace(/^(.+)\/$/, '$1')
-		},
-
-		/**
-		 * The current file id
-		 */
-		fileId(): number | null {
-			const number = Number.parseInt(this.$route?.params.fileid ?? '')
-			return Number.isNaN(number) ? null : number
-		},
-
 		/**
 		 * The current folder.
 		 */
@@ -272,11 +260,11 @@ export default defineComponent({
 				return
 			}
 
-			if (this.dir === '/') {
+			if (this.directory === '/') {
 				return this.filesStore.getRoot(this.currentView.id)
 			}
 
-			const source = this.pathsStore.getPath(this.currentView.id, this.dir)
+			const source = this.pathsStore.getPath(this.currentView.id, this.directory)
 			if (source === undefined) {
 				return
 			}
@@ -337,7 +325,7 @@ export default defineComponent({
 		 * Route to the previous directory.
 		 */
 		toPreviousDir(): Route {
-			const dir = this.dir.split('/').slice(0, -1).join('/') || '/'
+			const dir = this.directory.split('/').slice(0, -1).join('/') || '/'
 			return { ...this.$route, query: { dir } }
 		},
 
@@ -416,7 +404,7 @@ export default defineComponent({
 			this.fetchContent()
 		},
 
-		dir(newDir, oldDir) {
+		directory(newDir, oldDir) {
 			logger.debug('Directory changed', { newDir, oldDir })
 			// TODO: preserve selection on browsing?
 			this.selectionStore.reset()
@@ -466,7 +454,7 @@ export default defineComponent({
 	methods: {
 		async fetchContent() {
 			this.loading = true
-			const dir = this.dir
+			const dir = this.directory
 			const currentView = this.currentView
 
 			if (!currentView) {
@@ -541,7 +529,7 @@ export default defineComponent({
 					// in this case we need to keep the current view but move to the parent directory
 					window.OCP.Files.Router.goToRoute(
 						null,
-						{ view: this.$route.params.view },
+						{ view: this.currentView!.id },
 						{ dir: this.currentFolder?.dirname ?? '/' },
 					)
 				} else {