Move AbortController code into a vue Mixinrefactor/request-autocancel-queue

Signed-off-by: Marcel Klehr <mklehr@gmx.net>

11 files changed, 87 insertions, 36 deletions

diff --git a/src/components/Folder.vue b/src/components/Folder.vue
index e9b75522..89f841cd 100644
--- a/src/components/Folder.vue
+++ b/src/components/Folder.vue
@@ -33,7 +33,7 @@ import { mapGetters } from 'vuex'
 
 import getAlbumContent from '../services/AlbumContent'
 import FolderTagPreview from './FolderTagPreview'
-import { abortController } from '../services/RequestHandler'
+import AbortControllerMixin from '../mixins/AbortControllerMixin'
 
 export default {
 	name: 'Folder',
@@ -41,6 +41,10 @@ export default {
 	components: {
 		FolderTagPreview,
 	},
+
+	mixins: [
+		AbortControllerMixin,
+	],
 	inheritAttrs: false,
 
 	props: {
@@ -106,7 +110,7 @@ export default {
 				// get data
 				const { folder, folders, files } = await getAlbumContent(filename, {
 					shared: this.item.injected.showShared,
-					signal: abortController.signal,
+					signal: this.abortController.signal,
 				})
 				this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
 				this.$store.dispatch('updateFiles', { folder, files, folders })
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index 4650a59f..49aaa2fa 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -34,7 +34,7 @@ import { mapGetters } from 'vuex'
 
 import getTaggedImages from '../services/TaggedImages'
 import FolderTagPreview from './FolderTagPreview'
-import { abortController } from '../services/RequestHandler'
+import AbortControllerMixin from '../mixins/AbortControllerMixin'
 
 export default {
 	name: 'Tag',
@@ -42,6 +42,10 @@ export default {
 	components: {
 		FolderTagPreview,
 	},
+
+	mixins: [
+		AbortControllerMixin,
+	],
 	inheritAttrs: false,
 
 	props: {
@@ -76,7 +80,7 @@ export default {
 		try {
 			// get data
 			const files = await getTaggedImages(this.item.injected.id, {
-				signal: abortController.signal,
+				signal: this.abortController.signal,
 			})
 			this.$store.dispatch('updateTag', { id: this.item.injected.id, files })
 			this.$store.dispatch('appendFiles', files)
diff --git a/src/mixins/AbortControllerMixin.js b/src/mixins/AbortControllerMixin.js
new file mode 100644
index 00000000..7ddeb312
--- /dev/null
+++ b/src/mixins/AbortControllerMixin.js
@@ -0,0 +1,40 @@
+/**
+ * @copyright Copyright (c) 2022 Louis Chemineau <louis@chmn.me>
+ *
+ * @author Louis Chemineau <louis@chmn.me>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+export default {
+	name: 'CancelRequestMixin',
+
+	data() {
+		return {
+			abortController: new AbortController(),
+		}
+	},
+
+	beforeDestroy() {
+		this.abortController.abort()
+	},
+
+	beforeRouteLeave() {
+		this.abortController.abort()
+		this.abortController = new AbortController()
+	},
+}
diff --git a/src/mixins/FetchAlbumsMixin.js b/src/mixins/FetchAlbumsMixin.js
index 39f28530..b3998862 100644
--- a/src/mixins/FetchAlbumsMixin.js
+++ b/src/mixins/FetchAlbumsMixin.js
@@ -29,7 +29,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import client from '../services/DavClient.js'
 import logger from '../services/logger.js'
 import { genFileInfo } from '../utils/fileUtils.js'
-import { abortController } from '../services/RequestHandler'
+import AbortControllerMixin from './AbortControllerMixin'
 
 export default {
 	name: 'FetchAlbumsMixin',
@@ -41,6 +41,10 @@ export default {
 		}
 	},
 
+	mixins: [
+		AbortControllerMixin,
+	],
+
 	async beforeMount() {
 		this.fetchAlbums()
 	},
@@ -75,7 +79,7 @@ export default {
 								</d:prop>
 							</d:propfind>`,
 					details: true,
-					signal: abortController.signal,
+					signal: this.abortController.signal,
 				})
 
 				const albums = response.data
diff --git a/src/mixins/FetchFacesMixin.js b/src/mixins/FetchFacesMixin.js
index 25dd7e17..c9a49664 100644
--- a/src/mixins/FetchFacesMixin.js
+++ b/src/mixins/FetchFacesMixin.js
@@ -29,7 +29,7 @@ import client from '../services/DavClient.js'
 import logger from '../services/logger.js'
 import DavRequest from '../services/DavRequest'
 import { genFileInfo } from '../utils/fileUtils'
-import { abortController } from '../services/RequestHandler'
+import AbortControllerMixin from './AbortControllerMixin'
 
 export default {
 	name: 'FetchFacesMixin',
@@ -43,6 +43,10 @@ export default {
 		}
 	},
 
+	mixins: [
+		AbortControllerMixin,
+	],
+
 	async beforeMount() {
 		this.fetchFaces()
 	},
@@ -72,7 +76,7 @@ export default {
 				this.errorFetchingFaces = null
 
 				const faces = await client.getDirectoryContents(`/recognize/${getCurrentUser()?.uid}/faces/`, {
-					signal: abortController.signal,
+					signal: this.abortController.signal,
 				})
 				this.$store.dispatch('addFaces', { faces })
 				logger.debug(`[FetchFacesMixin] Fetched ${faces.length} new faces: `, faces)
@@ -109,7 +113,7 @@ export default {
 					{
 						data: DavRequest,
 						details: true,
-						signal: abortController.signal,
+						signal: this.abortController.signal,
 					}
 				)
 
diff --git a/src/mixins/FetchFilesMixin.js b/src/mixins/FetchFilesMixin.js
index fdc8b6b6..98773471 100644
--- a/src/mixins/FetchFilesMixin.js
+++ b/src/mixins/FetchFilesMixin.js
@@ -23,11 +23,15 @@
 import logger from '../services/logger.js'
 import getPhotos from '../services/PhotoSearch.js'
 import SemaphoreWithPriority from '../utils/semaphoreWithPriority.js'
-import { abortController } from '../services/RequestHandler'
+import AbortControllerMixin from './AbortControllerMixin'
 
 export default {
 	name: 'FetchFilesMixin',
 
+	mixins: [
+		AbortControllerMixin,
+	],
+
 	data() {
 		return {
 			errorFetchingFiles: null,
@@ -73,7 +77,7 @@ export default {
 					firstResult: this.fetchedFileIds.length,
 					nbResults: numberOfImagesPerBatch,
 					...options,
-					signal: abortController.signal,
+					signal: this.abortController.signal,
 				})
 
 				// If we get less files than requested that means we got to the end
diff --git a/src/router/index.js b/src/router/index.js
index 457d13cb..99056906 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,7 +29,6 @@ import areTagsInstalled from '../services/AreTagsInstalled.js'
 import { imageMimes, videoMimes } from '../services/AllowedMimes.js'
 
 import isRecognizeInstalled from '../services/IsRecognizeInstalled.js'
-import { cancelAll } from '../services/RequestHandler.js'
 
 const Folders = () => import('../views/Folders')
 const Albums = () => import('../views/Albums')
@@ -181,9 +180,4 @@ const router = new Router({
 	],
 })
 
-router.beforeResolve((from, to, next) => {
-	cancelAll()
-	next()
-})
-
 export default router
diff --git a/src/services/RequestHandler.js b/src/services/RequestHandler.js
deleted file mode 100644
index 1d2b102b..00000000
--- a/src/services/RequestHandler.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export let abortController = new AbortController()
-
-/**
- * Cancel all running http requests
- */
-export function cancelAll() {
-	abortController.abort()
-	abortController = new AbortController()
-}
diff --git a/src/views/AlbumContent.vue b/src/views/AlbumContent.vue
index 3d959ab3..e1bdbb10 100644
--- a/src/views/AlbumContent.vue
+++ b/src/views/AlbumContent.vue
@@ -207,7 +207,7 @@ import logger from '../services/logger.js'
 import client from '../services/DavClient.js'
 import DavRequest from '../services/DavRequest.js'
 import { genFileInfo } from '../utils/fileUtils.js'
-import { abortController } from '../services/RequestHandler'
+import AbortControllerMixin from '../mixins/AbortControllerMixin'
 
 export default {
 	name: 'AlbumContent',
@@ -240,6 +240,7 @@ export default {
 		FetchAlbumsMixin,
 		FetchFilesMixin,
 		FilesSelectionMixin,
+		AbortControllerMixin,
 		isMobile,
 	],
 
@@ -318,7 +319,7 @@ export default {
 					{
 						data: DavRequest,
 						details: true,
-						signal: abortController.signal,
+						signal: this.abortController.signal,
 					}
 				)
 
diff --git a/src/views/Folders.vue b/src/views/Folders.vue
index 524519aa..0c49e929 100644
--- a/src/views/Folders.vue
+++ b/src/views/Folders.vue
@@ -63,7 +63,7 @@ import FileLegacy from '../components/FileLegacy.vue'
 import Navigation from '../components/Navigation.vue'
 
 import GridConfigMixin from '../mixins/GridConfig.js'
-import { abortController } from '../services/RequestHandler.js'
+import AbortControllerMixin from '../mixins/AbortControllerMixin'
 
 export default {
 	name: 'Folders',
@@ -72,7 +72,10 @@ export default {
 		EmptyContent,
 		Navigation,
 	},
-	mixins: [GridConfigMixin],
+	mixins: [
+		GridConfigMixin,
+		AbortControllerMixin,
+	],
 	props: {
 		rootTitle: {
 			type: String,
@@ -208,7 +211,7 @@ export default {
 				// get content and current folder info
 				const { folder, folders, files } = await getAlbumContent(this.path, {
 					shared: this.showShared,
-					signal: abortController.signal,
+					signal: this.abortController.signal,
 				})
 				this.$store.dispatch('addPath', { path: this.path, fileid: folder.fileid })
 				this.$store.dispatch('updateFolders', { fileid: folder.fileid, files, folders })
diff --git a/src/views/Tags.vue b/src/views/Tags.vue
index 800f901e..fd200d3b 100644
--- a/src/views/Tags.vue
+++ b/src/views/Tags.vue
@@ -62,8 +62,7 @@ import File from '../components/File'
 import Navigation from '../components/Navigation'
 
 import GridConfigMixin from '../mixins/GridConfig'
-
-import { abortController } from '../services/RequestHandler'
+import AbortControllerMixin from '../mixins/AbortControllerMixin'
 
 export default {
 	name: 'Tags',
@@ -72,7 +71,10 @@ export default {
 		EmptyContent,
 		Navigation,
 	},
-	mixins: [GridConfigMixin],
+	mixins: [
+		GridConfigMixin,
+		AbortControllerMixin,
+	],
 	props: {
 		rootTitle: {
 			type: String,
@@ -206,7 +208,7 @@ export default {
 			try {
 				// fetch content
 				const tags = await getSystemTags('', {
-					signal: abortController.signal,
+					signal: this.abortController.signal,
 				})
 				this.$store.dispatch('updateTags', tags)
 			} catch (error) {
@@ -232,7 +234,7 @@ export default {
 			try {
 				// get data
 				const files = await getTaggedImages(this.tagId, {
-					signal: abortController.signal,
+					signal: this.abortController.signal,
 				})
 				this.$store.dispatch('updateTag', { id: this.tagId, files })
 				this.$store.dispatch('appendFiles', files)