Replace request mixin with useRequest() composable

src/components/account/claim.vue

@@ -41,17 +41,19 @@ except according to the terms contained in the LICENSE file.
 import FormGroup from '../form-group.vue';
 import Spinner from '../spinner.vue';
 
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import { noop } from '../../util/util';
 
 export default {
   name: 'AccountClaim',
   components: { FormGroup, Spinner },
-  mixins: [request()],
   inject: ['alert'],
+  setup() {
+    const { request, awaitingResponse } = useRequest();
+    return { request, awaitingResponse };
+  },
   data() {
     return {
-      awaitingResponse: false,
       password: ''
     };
   },

src/components/account/reset-password.vue

@@ -41,17 +41,20 @@ except according to the terms contained in the LICENSE file.
 <script>
 import FormGroup from '../form-group.vue';
 import Spinner from '../spinner.vue';
-import request from '../../mixins/request';
+
+import useRequest from '../../composables/request';
 import { noop } from '../../util/util';
 
 export default {
   name: 'AccountResetPassword',
   components: { FormGroup, Spinner },
-  mixins: [request()],
   inject: ['alert'],
+  setup() {
+    const { request, awaitingResponse } = useRequest();
+    return { request, awaitingResponse };
+  },
   data() {
     return {
-      awaitingResponse: false,
       email: ''
     };
   },
@@ -61,7 +64,11 @@ export default {
   methods: {
     submit() {
       const { email } = this;
-      this.post('/v1/users/reset/initiate', { email })
+      this.request({
+        method: 'POST',
+        url: '/v1/users/reset/initiate',
+        data: { email }
+      })
         .then(() => {
           const message = this.$t('alert.success', { email });
           return this.$router.push('/login')

src/components/field-key/new.vue

@@ -70,7 +70,7 @@ import Modal from '../modal.vue';
 import FieldKeyQrPanel from './qr-panel.vue';
 import SentenceSeparator from '../sentence-separator.vue';
 
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import useRoutes from '../../composables/routes';
 import { afterNextNavigation } from '../../util/router';
 import { apiPaths } from '../../util/request';
@@ -80,7 +80,6 @@ import { useRequestData } from '../../request-data';
 export default {
   name: 'FieldKeyNew',
   components: { FormGroup, Spinner, Modal, FieldKeyQrPanel, SentenceSeparator },
-  mixins: [request()],
   inject: ['alert'],
   props: {
     state: {
@@ -96,12 +95,12 @@ export default {
   setup() {
     // The modal assumes that this data will exist when the modal is shown.
     const { project, fieldKeys } = useRequestData();
+    const { request, awaitingResponse } = useRequest();
     const { projectPath } = useRoutes();
-    return { project, fieldKeys, projectPath };
+    return { project, fieldKeys, request, awaitingResponse, projectPath };
   },
   data() {
     return {
-      awaitingResponse: false,
       // There are two steps/screens in the app user creation process. `step`
       // indicates the current step.
       step: 0,

src/components/field-key/revoke.vue

@@ -41,23 +41,21 @@ except according to the terms contained in the LICENSE file.
 import Modal from '../modal.vue';
 import Spinner from '../spinner.vue';
 
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
 
 export default {
   name: 'FieldKeyRevoke',
   components: { Modal, Spinner },
-  mixins: [request()],
   props: {
     state: Boolean,
     fieldKey: Object
   },
   emits: ['hide', 'success'],
-  data() {
-    return {
-      awaitingResponse: false
-    };
+  setup() {
+    const { request, awaitingResponse } = useRequest();
+    return { request, awaitingResponse };
   },
   methods: {
     revoke() {

src/components/form-attachment/link-dataset.vue

@@ -40,15 +40,14 @@ import Modal from '../modal.vue';
 import Spinner from '../spinner.vue';
 import SentenceSeparator from '../sentence-separator.vue';
 
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
 import { useRequestData } from '../../request-data';
 
 export default {
   name: 'FormAttachmentLinkDataset',
   components: { Modal, Spinner, SentenceSeparator },
-  mixins: [request()],
   props: {
     state: {
       type: Boolean,
@@ -66,12 +65,8 @@ export default {
   emits: ['hide', 'success'],
   setup() {
     const { form } = useRequestData();
-    return { form };
-  },
-  data() {
-    return {
-      awaitingResponse: false
-    };
+    const { request, awaitingResponse } = useRequest();
+    return { form, request, awaitingResponse };
   },
   methods: {
     link() {

src/components/form-attachment/list.vue

@@ -80,19 +80,21 @@ except according to the terms contained in the LICENSE file.
 <script>
 import { any } from 'ramda';
 import { markRaw } from 'vue';
+
 import FormAttachmentNameMismatch from './name-mismatch.vue';
 import FormAttachmentPopups from './popups.vue';
 import FormAttachmentRow from './row.vue';
 import FormAttachmentUploadFiles from './upload-files.vue';
 import FormAttachmentLinkDataset from './link-dataset.vue';
 import DocLink from '../doc-link.vue';
+import SentenceSeparator from '../sentence-separator.vue';
+
 import dropZone from '../../mixins/drop-zone';
 import modal from '../../mixins/modal';
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
 import { useRequestData } from '../../request-data';
-import SentenceSeparator from '../sentence-separator.vue';
 
 export default {
   name: 'FormAttachmentList',
@@ -105,7 +107,7 @@ export default {
     DocLink,
     SentenceSeparator
   },
-  mixins: [dropZone(), modal(), request()],
+  mixins: [dropZone(), modal()],
   inject: ['alert'],
   props: {
     projectId: {
@@ -116,7 +118,8 @@ export default {
   setup() {
     const { project, form, resourceView, datasets } = useRequestData();
     const attachments = resourceView('attachments', (data) => data.get());
-    return { project, form, attachments, datasets };
+    const { request } = useRequest();
+    return { project, form, attachments, datasets, request };
   },
   data() {
     return {

src/components/form-draft/abandon.vue

@@ -42,15 +42,14 @@ except according to the terms contained in the LICENSE file.
 import Modal from '../modal.vue';
 import Spinner from '../spinner.vue';
 
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
 import { useRequestData } from '../../request-data';
 
 export default {
   name: 'FormDraftAbandon',
   components: { Modal, Spinner },
-  mixins: [request()],
   props: {
     state: {
       type: Boolean,
@@ -62,12 +61,8 @@ export default {
     // The component assumes that this data will exist when the component is
     // created.
     const { form } = useRequestData();
-    return { form };
-  },
-  data() {
-    return {
-      awaitingResponse: false
-    };
+    const { request, awaitingResponse } = useRequest();
+    return { form, request, awaitingResponse };
   },
   computed: {
     title() {

src/components/form-draft/publish.vue

@@ -107,7 +107,7 @@ import FormGroup from '../form-group.vue';
 import Modal from '../modal.vue';
 import Spinner from '../spinner.vue';
 
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import useRoutes from '../../composables/routes';
 import { apiPaths, isProblem } from '../../util/request';
 import { noop } from '../../util/util';
@@ -116,7 +116,6 @@ import { useRequestData } from '../../request-data';
 export default {
   name: 'FormDraftPublish',
   components: { FormGroup, Modal, Spinner },
-  mixins: [request()],
   inject: ['alert'],
   props: {
     state: {
@@ -131,15 +130,15 @@ export default {
     const { formVersions, attachments, resourceView, formDraftDatasetDiff } = useRequestData();
     const formDraft = resourceView('formDraft', (data) => data.get());
 
+    const { request, awaitingResponse } = useRequest();
     const { formPath } = useRoutes();
     return {
       formVersions, formDraft, attachments, formDraftDatasetDiff,
-      formPath
+      request, awaitingResponse, formPath
     };
   },
   data() {
     return {
-      awaitingResponse: false,
       versionString: '',
       // versionConflict is used in a scenario where a user tries to
       // publish a form that conflicts with a form/version combo probably

src/components/form/delete.vue

@@ -43,15 +43,14 @@ except according to the terms contained in the LICENSE file.
 import Modal from '../modal.vue';
 import Spinner from '../spinner.vue';
 
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
 import { useRequestData } from '../../request-data';
 
 export default {
   name: 'FormDelete',
   components: { Modal, Spinner },
-  mixins: [request()],
   props: {
     state: {
       type: Boolean,
@@ -63,16 +62,15 @@ export default {
     // The component does not assume that this data will exist when the
     // component is created.
     const { form } = useRequestData();
-    return { form };
-  },
-  data() {
-    return {
-      awaitingResponse: false
-    };
+    const { request, awaitingResponse } = useRequest();
+    return { form, request, awaitingResponse };
   },
   methods: {
     del() {
-      this.delete(apiPaths.form(this.form.projectId, this.form.xmlFormId))
+      this.request({
+        method: 'DELETE',
+        url: apiPaths.form(this.form.projectId, this.form.xmlFormId)
+      })
         .then(() => {
           // project.forms and project.lastSubmission may now be out-of-date. If
           // the user navigates to ProjectOverview, project.forms should be

src/components/form/new.vue

@@ -114,14 +114,14 @@ import SentenceSeparator from '../sentence-separator.vue';
 import Spinner from '../spinner.vue';
 
 import dropZone from '../../mixins/drop-zone';
-import request from '../../mixins/request';
+import useRequest from '../../composables/request';
 import { apiPaths, isProblem } from '../../util/request';
 import { useRequestData } from '../../request-data';
 
 export default {
   name: 'FormNew',
   components: { DocLink, Modal, SentenceSeparator, Spinner },
-  mixins: [dropZone(), request()],
+  mixins: [dropZone()],
   inject: ['alert'],
   props: {
     state: {
@@ -135,12 +135,13 @@ export default {
     // component is created.
     const { project, resourceView } = useRequestData();
     const formDraft = resourceView('formDraft', (data) => data.get());
-    return { project, formDraft };
+
+    const { request, awaitingResponse } = useRequest();
+    return { project, formDraft, request, awaitingResponse };
   },
   data() {
     return {
       dragDepth: 0,
-      awaitingResponse: false,
       file: null,
       warnings: null,
       documentLinks: {

src/components/form/restore.vue

@@ -40,27 +40,29 @@ except according to the terms contained in the LICENSE file.
 <script>
 import Modal from '../modal.vue';
 import Spinner from '../spinner.vue';
-import request from '../../mixins/request';
+
+import useRequest from '../../composables/request';
 import { apiPaths } from '../../util/request';
 import { noop } from '../../util/util';
 
 export default {
   name: 'FormRestore',
   components: { Modal, Spinner },
-  mixins: [request()],
   props: {
     state: Boolean,
     form: Object
   },
   emits: ['hide', 'success'],
-  data() {
-    return {
-      awaitingResponse: false
-    };
+  setup() {
+    const { request, awaitingResponse } = useRequest();
+    return { request, awaitingResponse };
   },
   methods: {
     doRestore() {
-      this.post(apiPaths.restoreForm(this.form.projectId, this.form.id))
+      this.request({
+        method: 'POST',
+        url: apiPaths.restoreForm(this.form.projectId, this.form.id)
+      })
         .then(() => {
           this.$emit('success');
         })