refactor: Use composable for `currentView` and `views` to make it reactive when shared with other Vue apps

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

2 files changed, 25 insertions, 16 deletions

diff --git a/apps/files/src/components/FileEntry/FileEntryActions.vue b/apps/files/src/components/FileEntry/FileEntryActions.vue
index 21d5cd9e796..24b26bd225e 100644
--- a/apps/files/src/components/FileEntry/FileEntryActions.vue
+++ b/apps/files/src/components/FileEntry/FileEntryActions.vue
@@ -76,11 +76,13 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from 'vue'
+import type { PropType, ShallowRef } from 'vue'
+import type { FileAction, Node, View } from '@nextcloud/files'
 
-import { DefaultType, FileAction, Node, NodeStatus, View, getFileActions } from '@nextcloud/files'
+import { DefaultType, NodeStatus, getFileActions } from '@nextcloud/files'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
+import { defineComponent } from 'vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
@@ -88,8 +90,8 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
-import Vue, { defineComponent } from 'vue'
 
+import { useNavigation } from '../../composables/useNavigation'
 import CustomElementRender from '../CustomElementRender.vue'
 import logger from '../../logger.js'
 
@@ -132,6 +134,15 @@ export default defineComponent({
 		},
 	},
 
+	setup() {
+		const { currentView } = useNavigation()
+
+		return {
+			// The file list is guaranteed to be only shown with active view
+			currentView: currentView as ShallowRef<View>,
+		}
+	},
+
 	data() {
 		return {
 			openedSubmenu: null as FileAction | null,
@@ -143,9 +154,6 @@ export default defineComponent({
 			// Remove any trailing slash but leave root slash
 			return (this.$route?.query?.dir?.toString() || '/').replace(/^(.+)\/$/, '$1')
 		},
-		currentView(): View {
-			return this.$navigation.active as View
-		},
 		isLoading() {
 			return this.source.status === NodeStatus.LOADING
 		},
@@ -269,7 +277,7 @@ export default defineComponent({
 			try {
 				// Set the loading marker
 				this.$emit('update:loading', action.id)
-				Vue.set(this.source, 'status', NodeStatus.LOADING)
+				this.$set(this.source, 'status', NodeStatus.LOADING)
 
 				const success = await action.exec(this.source, this.currentView, this.currentDir)
 
@@ -289,7 +297,7 @@ export default defineComponent({
 			} finally {
 				// Reset the loading marker
 				this.$emit('update:loading', '')
-				Vue.set(this.source, 'status', undefined)
+				this.$set(this.source, 'status', undefined)
 
 				// If that was a submenu, we just go back after the action
 				if (isSubmenu) {
diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index fdd3c215a98..5e9036ad63d 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import type { Node, View } from '@nextcloud/files'
+import type { Node } from '@nextcloud/files'
 import type { PropType } from 'vue'
 
 import { showError, showSuccess } from '@nextcloud/dialogs'
@@ -46,10 +46,11 @@ import { FileType, NodeStatus, Permission } from '@nextcloud/files'
 import { loadState } from '@nextcloud/initial-state'
 import { translate as t } from '@nextcloud/l10n'
 import axios, { isAxiosError } from '@nextcloud/axios'
-import Vue, { defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
+import { useNavigation } from '../../composables/useNavigation'
 import { useRenamingStore } from '../../store/renaming.ts'
 import logger from '../../logger.js'
 
@@ -90,17 +91,17 @@ export default defineComponent({
 	},
 
 	setup() {
+		const { currentView } = useNavigation()
 		const renamingStore = useRenamingStore()
+
 		return {
+			currentView,
+
 			renamingStore,
 		}
 	},
 
 	computed: {
-		currentView(): View {
-			return this.$navigation.active as View
-		},
-
 		isRenaming() {
 			return this.renamingStore.renamingNode === this.source
 		},
@@ -282,7 +283,7 @@ export default defineComponent({
 			}
 
 			// Set loading state
-			Vue.set(this.source, 'status', NodeStatus.LOADING)
+			this.$set(this.source, 'status', NodeStatus.LOADING)
 
 			// Update node
 			this.source.rename(newName)
@@ -327,7 +328,7 @@ export default defineComponent({
 				// Unknown error
 				showError(t('files', 'Could not rename "{oldName}"', { oldName }))
 			} finally {
-				Vue.set(this.source, 'status', undefined)
+				this.$set(this.source, 'status', undefined)
 			}
 		},