From fb96c5fd4be1d026d3bb6afb339059c7047c1c2d Mon Sep 17 00:00:00 2001
From: GaziYucel <GaziYucel@users.noreply.github.com>
Date: Thu, 9 Jan 2025 14:10:41 +0100
Subject: [PATCH] Test working of AbortController in fetch

---
 .../fields/FieldAffiliationsTest.stories.js   | 13 ++++++++
 .../Form/fields/FieldAffiliationsTest.vue     | 31 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/components/Form/fields/FieldAffiliationsTest.stories.js
 create mode 100644 src/components/Form/fields/FieldAffiliationsTest.vue

diff --git a/src/components/Form/fields/FieldAffiliationsTest.stories.js b/src/components/Form/fields/FieldAffiliationsTest.stories.js
new file mode 100644
index 00000000..db29d04a
--- /dev/null
+++ b/src/components/Form/fields/FieldAffiliationsTest.stories.js
@@ -0,0 +1,13 @@
+import FieldAffiliationsTest from './FieldAffiliationsTest.vue';
+
+export default {
+	title: 'Forms/FieldAffiliationsTest',
+};
+
+export const Default = {
+	component: FieldAffiliationsTest,
+	render: () => ({
+		components: {FieldAffiliationsTest},
+		template: '<FieldAffiliationsTest/>',
+	}),
+};
diff --git a/src/components/Form/fields/FieldAffiliationsTest.vue b/src/components/Form/fields/FieldAffiliationsTest.vue
new file mode 100644
index 00000000..498e0302
--- /dev/null
+++ b/src/components/Form/fields/FieldAffiliationsTest.vue
@@ -0,0 +1,31 @@
+<template>
+	<div>
+		<input
+			v-model="searchPhrase"
+			class="pkpFormField__input pkpFormField--text__input"
+		/>
+		&nbsp;
+		<button
+			class="pkpButton pkpFormField__input inline"
+			@click="executeFetch()"
+		>
+			Fetch
+		</button>
+		<pre>{{ searchResults }}</pre>
+	</div>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import {useFetch} from '@/composables/useFetch';
+
+const searchPhrase = ref('University');
+const searchResults = ref();
+const url = 'https://api.ror.org/v2/organizations?query=';
+
+async function executeFetch() {
+	const {data, isSuccess, fetch} = useFetch(url + searchPhrase.value);
+	await fetch();
+	if (isSuccess) searchResults.value = data;
+}
+</script>