Avoid passing an incomplete cancel token object to axios

Signed-off-by: Julius Härtl <jus@bitgrid.net>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>

6 files changed, 59 insertions, 24 deletions

diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index 8180936f..9dc94f83 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -63,7 +63,7 @@ export default {
 
 	data() {
 		return {
-			cancelRequest: () => {},
+			cancelRequest: null,
 		}
 	},
 
@@ -103,11 +103,16 @@ export default {
 				console.error('Failed to get folder content', this.folder, error.response)
 			}
 			// else we just cancelled the request
+		} finally {
+			this.cancelRequest = null
 		}
 	},
 
 	beforeDestroy() {
-		this.cancelRequest('Navigated away')
+		// cancel any pending requests
+		if (this.cancelRequest) {
+			this.cancelRequest('Navigated away')
+		}
 	},
 }
 </script>
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index 8e2998a0..07d31255 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -56,7 +56,7 @@ export default {
 
 	data() {
 		return {
-			cancelRequest: () => {},
+			cancelRequest: null,
 		}
 	},
 
@@ -82,7 +82,10 @@ export default {
 	},
 
 	beforeDestroy() {
-		this.cancelRequest('Navigated away')
+		// cancel any pending requests
+		if (this.cancelRequest) {
+			this.cancelRequest('Navigated away')
+		}
 	},
 
 	async created() {
@@ -99,7 +102,8 @@ export default {
 			if (error.response && error.response.status) {
 				console.error('Failed to get folder content', this.id, error.response)
 			}
-			// else we just cancelled the request
+		} finally {
+			this.cancelRequest = null
 		}
 	},
 
diff --git a/src/patchedRequest.js b/src/patchedRequest.js
index 5a4ab3ee..cabb64cd 100644
--- a/src/patchedRequest.js
+++ b/src/patchedRequest.js
@@ -31,7 +31,7 @@ const oldPrepareRequestOptions = request.prepareRequestOptions
 request.prepareRequestOptions = function(requestOptions, methodOptions) {
 	// add our cancelToken support
 	if (methodOptions.cancelToken && typeof methodOptions.cancelToken === 'object') {
-		requestOptions.cancelToken = Object.assign({}, requestOptions.cancelToken || {}, methodOptions.cancelToken)
+		requestOptions.cancelToken = methodOptions.cancelToken
 	}
 
 	// exploit old method
diff --git a/src/utils/CancelableRequest.js b/src/utils/CancelableRequest.js
index a442810f..e0d0d62d 100644
--- a/src/utils/CancelableRequest.js
+++ b/src/utils/CancelableRequest.js
@@ -24,6 +24,12 @@
 import axios from '@nextcloud/axios'
 
 /**
+ * Create a cancel token
+ * @returns {CancelTokenSource}
+ */
+const createCancelToken = () => axios.CancelToken.source()
+
+/**
  * Creates a cancelable axios 'request object'.
  *
  * @param {function} request the axios promise request
@@ -33,8 +39,7 @@ const CancelableRequest = function(request) {
 	/**
 	 * Generate an axios cancel token
 	 */
-	const CancelToken = axios.CancelToken
-	const source = CancelToken.source()
+	const cancelToken = createCancelToken()
 
 	/**
 	 * Execute the request
@@ -45,12 +50,13 @@ const CancelableRequest = function(request) {
 	const fetch = async function(url, options) {
 		return request(
 			url,
-			Object.assign({ cancelToken: source.token }, options)
+			Object.assign({ cancelToken: cancelToken.token }, options)
 		)
 	}
+
 	return {
 		request: fetch,
-		cancel: source.cancel,
+		cancel: cancelToken.cancel,
 	}
 }
 
diff --git a/src/views/Tags.vue b/src/views/Tags.vue
index 10b1bbd5..56020f21 100644
--- a/src/views/Tags.vue
+++ b/src/views/Tags.vue
@@ -105,7 +105,7 @@ export default {
 	data() {
 		return {
 			error: null,
-			cancelRequest: () => {},
+			cancelRequest: null,
 		}
 	},
 
@@ -157,7 +157,10 @@ export default {
 	},
 
 	beforeDestroy() {
-		this.cancelRequest('Changed view')
+		// cancel any pending requests
+		if (this.cancelRequest) {
+			this.cancelRequest('Navigated away')
+		}
 	},
 
 	async beforeMount() {
@@ -176,7 +179,9 @@ export default {
 	methods: {
 		async fetchRootContent() {
 			// cancel any pending requests
-			this.cancelRequest('Changed folder')
+			if (this.cancelRequest) {
+				this.cancelRequest('Changed folder')
+			}
 
 			// close any potential opened viewer
 			OCA.Viewer.close()
@@ -201,13 +206,16 @@ export default {
 			} finally {
 				// done loading
 				this.$emit('update:loading', false)
+				this.cancelRequest = null
 			}
 
 		},
 
 		async fetchContent() {
 			// cancel any pending requests
-			this.cancelRequest()
+			if (this.cancelRequest) {
+				this.cancelRequest()
+			}
 
 			// close any potential opened viewer
 			OCA.Viewer.close()
@@ -222,13 +230,19 @@ export default {
 			const { request, cancel } = cancelableRequest(getTaggedImages)
 			this.cancelRequest = cancel
 
-			// get data
-			const files = await request(this.tagId)
-			this.$store.dispatch('updateTag', { id: this.tagId, files })
-			this.$store.dispatch('appendFiles', files)
-
-			// done loading
-			this.$emit('update:loading', false)
+			try {
+				// get data
+				const files = await request(this.tagId)
+				this.$store.dispatch('updateTag', { id: this.tagId, files })
+				this.$store.dispatch('appendFiles', files)
+			} catch (error) {
+				console.error(error)
+				this.error = true
+			} finally {
+				// done loading
+				this.$emit('update:loading', false)
+				this.cancelRequest = null
+			}
 		},
 	},
 
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 0674b14d..e41d17c2 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -92,7 +92,7 @@ export default {
 
 	data() {
 		return {
-			cancelRequest: () => {},
+			cancelRequest: null,
 			done: false,
 			error: null,
 			loadingPage: false,
@@ -136,7 +136,10 @@ export default {
 	},
 
 	beforeDestroy() {
-		this.cancelRequest()
+		// cancel any pending requests
+		if (this.cancelRequest) {
+			this.cancelRequest('Changed view')
+		}
 	},
 
 	methods: {
@@ -147,7 +150,9 @@ export default {
 			}
 
 			// cancel any pending requests
-			this.cancelRequest('Changed view')
+			if (this.cancelRequest) {
+				this.cancelRequest('Changed view')
+			}
 
 			// if we don't already have some cached data let's show a loader
 			if (this.timeline.length === 0) {
@@ -196,6 +201,7 @@ export default {
 				// done loading even with errors
 				this.$emit('update:loading', false)
 				this.loadingPage = false
+				this.cancelRequest = null
 			}
 		},