fix(files): Ensure renaming state is correctly reset

Problem: Is a node is renamed and the new name is out of the current
visible list of nodes the component will be recycled, this means
the props will change, so when the `onRename` functions is about to reset
the state the `this.source` will point to a different node.

To fix this, but also to separate business logic from visual representation,
the logic is moved into the renaming store and the component is only
responsible for rendering.

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

1 files changed, 12 insertions, 58 deletions

diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index cf425127282..5236af0cfad 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -41,12 +41,9 @@
 import type { FileAction, Node } from '@nextcloud/files'
 import type { PropType } from 'vue'
 
-import axios, { isAxiosError } from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
-import { emit } from '@nextcloud/event-bus'
 import { FileType, NodeStatus } from '@nextcloud/files'
 import { translate as t } from '@nextcloud/l10n'
-import { dirname } from '@nextcloud/paths'
 import { defineComponent, inject } from 'vue'
 
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
@@ -245,66 +242,23 @@ export default defineComponent({
 			}
 
 			const oldName = this.source.basename
-			const oldEncodedSource = this.source.encodedSource
-			if (oldName === newName) {
-				this.stopRenaming()
-				return
-			}
-
-			// Set loading state
-			this.$set(this.source, 'status', NodeStatus.LOADING)
 
-			// Update node
-			this.source.rename(newName)
-
-			logger.debug('Moving file to', { destination: this.source.encodedSource, oldEncodedSource })
 			try {
-				await axios({
-					method: 'MOVE',
-					url: oldEncodedSource,
-					headers: {
-						Destination: this.source.encodedSource,
-						Overwrite: 'F',
-					},
-				})
-
-				// Success 🎉
-				emit('files:node:updated', this.source)
-				emit('files:node:renamed', this.source)
-				emit('files:node:moved', {
-					node: this.source,
-					oldSource: `${dirname(this.source.source)}/${oldName}`,
-				})
-				showSuccess(t('files', 'Renamed "{oldName}" to "{newName}"', { oldName, newName }))
-
-				// Reset the renaming store
-				this.stopRenaming()
-				this.$nextTick(() => {
-					const nameContainter = this.$refs.basename as HTMLElement | undefined
-					nameContainter?.focus()
-				})
+				const status = await this.renamingStore.rename()
+				if (status) {
+					showSuccess(t('files', 'Renamed "{oldName}" to "{newName}"', { oldName, newName }))
+					this.$nextTick(() => {
+						const nameContainter = this.$refs.basename as HTMLElement | undefined
+						nameContainter?.focus()
+					})
+				} else {
+					// Was cancelled - meaning the renaming state is just reset
+				}
 			} catch (error) {
-				logger.error('Error while renaming file', { error })
-				// Rename back as it failed
-				this.source.rename(oldName)
+				logger.error(error as Error)
+				showError((error as Error).message)
 				// And ensure we reset to the renaming state
 				this.startRenaming()
-
-				if (isAxiosError(error)) {
-					// TODO: 409 means current folder does not exist, redirect ?
-					if (error?.response?.status === 404) {
-						showError(t('files', 'Could not rename "{oldName}", it does not exist any more', { oldName }))
-						return
-					} else if (error?.response?.status === 412) {
-						showError(t('files', 'The name "{newName}" is already used in the folder "{dir}". Please choose a different name.', { newName, dir: this.directory }))
-						return
-					}
-				}
-
-				// Unknown error
-				showError(t('files', 'Could not rename "{oldName}"', { oldName }))
-			} finally {
-				this.$set(this.source, 'status', undefined)
 			}
 		},