From 0d262fc2d6b1773c11aa91dc014ed3e15e630fb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Wed, 29 Jan 2020 17:10:27 +0100
Subject: [PATCH] Cancel import on modal close
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 .../Settings/SettingsImportContacts.vue       | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/Settings/SettingsImportContacts.vue b/src/components/Settings/SettingsImportContacts.vue
index ea17fd12d..22446cee7 100644
--- a/src/components/Settings/SettingsImportContacts.vue
+++ b/src/components/Settings/SettingsImportContacts.vue
@@ -70,10 +70,6 @@
 						<span class="import-contact__button-icon icon-folder-white" />
 						{{ t('contacts', 'Import from files') }}
 					</button>
-					<!-- <button id="cancel" class="button import-contact__button import-contact__button--cancel" @click="toggleModal">
-						<span class="import-contact__button-icon icon-close" />
-						{{ t('contacts', 'Cancel') }}
-					</button> -->
 				</section>
 			</Modal>
 		</template>
@@ -93,6 +89,8 @@ import { generateRemoteUrl } from '@nextcloud/router'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
 import axios from 'axios'
 
+const CancelToken = axios.CancelToken
+
 const picker = getFilePickerBuilder(t('contacts', 'Choose a vcard file to import'))
 	.setMultiSelect(false)
 	.setModal(true)
@@ -106,6 +104,7 @@ export default {
 
 	data() {
 		return {
+			cancelRequest: () => {},
 			importDestination: false,
 			isOpened: false,
 			loading: false,
@@ -191,6 +190,10 @@ export default {
 
 		toggleModal() {
 			this.isOpened = !this.isOpened
+			// cancel any ongoing request if closed
+			if (!this.isOpened) {
+				this.cancelRequest()
+			}
 		},
 
 		clickImportInput() {
@@ -203,8 +206,18 @@ export default {
 		async openPicker() {
 			try {
 				this.loading = true
+				// unlikely, but let's cancel any previous request
+				this.cancelRequest()
+
+				// prepare cancel token for axios request
+				const source = CancelToken.source()
+				this.cancelRequest = source.cancel
+
+				// pick and retrieve file
 				const path = await picker.pick()
-				const file = await axios.get(generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + encodePath(path))
+				const file = await axios.get(generateRemoteUrl(`dav/files/${getCurrentUser().uid}`) + encodePath(path), {
+					cancelToken: source.token,
+				})
 
 				this.$store.dispatch('changeStage', 'parsing')
 				this.$store.dispatch('setAddressbook', this.selectedAddressbook.displayName)
@@ -223,6 +236,7 @@ export default {
 		 * Reset default component state
 		 */
 		resetState() {
+			this.cancelRequest = () => {}
 			this.importDestination = false
 			this.isOpened = false
 			this.loading = false
@@ -234,9 +248,6 @@ export default {
 <style lang="scss" scoped>
 .import-contact {
 	&__modal {
-		h3 {
-			padding-bottom: 22px;
-		}
 		section {
 			padding: 22px;
 			// only one padding bewteen sections