js: use cancellable promises

invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/JobRunsHeader.js

@@ -10,6 +10,7 @@ import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { http } from "react-invenio-forms";
 import { RunButton } from "./RunButton";
+import { withCancel } from "react-invenio-forms";
 
 export class JobRunsHeaderComponent extends Component {
   constructor(props) {
@@ -25,23 +26,25 @@ export class JobRunsHeaderComponent extends Component {
 
   componentDidMount() {
     const { jobId } = this.props;
-    http
-      .get("/api/jobs/" + jobId)
-      .then((response) => response.data)
-      .then((data) => {
-        this.setState({
-          loading: false,
-          ...(data.title && { title: data.title }),
-          ...(data.description && { description: data.description }),
-          ...(data.default_args && { config: data.default_args }),
-        });
-      })
-      .catch((error) => {
-        this.onError(error);
-        this.setState({
-          loading: false,
-        });
-      });
+    withCancel(
+      http
+        .get("/api/jobs/" + jobId)
+        .then((response) => response.data)
+        .then((data) => {
+          this.setState({
+            loading: false,
+            ...(data.title && { title: data.title }),
+            ...(data.description && { description: data.description }),
+            ...(data.default_args && { config: data.default_args }),
+          });
+        })
+        .catch((error) => {
+          this.onError(error);
+          this.setState({
+            loading: false,
+          });
+        })
+    );
   }
 
   static contextType = NotificationContext;

invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/RunButton.js

@@ -7,7 +7,7 @@
 import { i18next } from "@translations/invenio_app_rdm/i18next";
 import PropTypes from "prop-types";
 import React, { Component } from "react";
-import { http } from "react-invenio-forms";
+import { http, withCancel } from "react-invenio-forms";
 import {
   Button,
   Dropdown,
@@ -34,6 +34,10 @@ export class RunButton extends Component {
   handleConfigChange = (e, { name, value }) => this.setState({ config: value });
   handleQueueChange = (e, { name, value }) => this.setState({ queue: value });
 
+  componentWillUnmount() {
+    this.cancellableAction && this.cancellableAction.cancel();
+  }
+
   handleSubmit = async () => {
     this.setState({ loading: true });
 
@@ -52,16 +56,20 @@ export class RunButton extends Component {
       queue: queue,
     };
 
+
     try {
-      var response = await http.post("/api/jobs/" + jobId + "/runs", runData);
+      this.cancellableAction = await withCancel(
+        http.post("/api/jobs/" + jobId + "/runs", runData)
+      );
     } catch (error) {
       if (error.response) {
         onError(error.response.data);
       } else {
         onError(error);
       }
     }
-    setRun(response.data.status, response.data.created);
+    const response = await this.cancellableAction.promise;
+    setRun(response.data?.status, response.data?.created);
     this.setState({ loading: false });
   };
 

invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/StopButton.js

@@ -9,19 +9,23 @@ import PropTypes from "prop-types";
 import React, { useState } from "react";
 import { http } from "react-invenio-forms";
 import { Button, Icon } from "semantic-ui-react";
+import { withCancel } from "react-invenio-forms";
 
 export const StopButton = ({ stopURL, setStatus, onError }) => {
   const [loading, setLoading] = useState(false);
 
   const handleClick = async () => {
     setLoading(true);
-    const response = await http.post(stopURL).catch((error) => {
-      if (error.response) {
-        onError(error.response.data);
-      } else {
-        onError(error);
-      }
-    });
+    const cancellableAction = await withCancel(
+      http.post(stopURL).catch((error) => {
+        if (error.response) {
+          onError(error.response.data);
+        } else {
+          onError(error);
+        }
+      })
+    );
+    const response = await cancellableAction.promise;
     setStatus(response.data.status);
     setLoading(false);
   };