UX: have stop button alter status state

inveniosoftware · May 31, 2024 · 3bba8cd · 3bba8cd
1 parent 34fbca7
commit 3bba8cd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/RunsSearchResultItemLayout.js b/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/RunsSearchResultItemLayout.js
@@ -17,6 +17,14 @@ import { StatusFormatter } from "./StatusFormatter";
 import { StopButton } from "./StopButton";
 
 class SearchResultItemComponent extends Component {
+  constructor(props) {
+    super();
+
+    this.state = {
+      status: props.result.status,
+    };
+  }
+
   static contextType = NotificationContext;
 
   onError = (e) => {
@@ -31,6 +39,7 @@ class SearchResultItemComponent extends Component {
 
   render() {
     const { result } = this.props;
+    const { status } = this.state;
 
     return (
       <Table.Row>
@@ -40,11 +49,11 @@ class SearchResultItemComponent extends Component {
           collapsing
           className="word-break-all"
         >
-          <StatusFormatter status={result.status} />
+          <StatusFormatter status={status} />
           <a href={result.links.self}>{result.created.slice(0, 16)}</a>
         </Table.Cell>
         <Table.Cell
-          key={`run-last-run-${result.status}`}
+          key={`run-last-run-${status}`}
           data-label={i18next.t("Duration")}
           collapsing
           className=""
@@ -84,8 +93,14 @@ class SearchResultItemComponent extends Component {
           </Table.Cell>
         )}
         <Table.Cell collapsing>
-          {result.status === "RUNNING" || result.status === "QUEUED" ? (
-            <StopButton stopURL={result.links.stop} onError={this.onError} />
+          {status === "RUNNING" || status === "QUEUED" ? (
+            <StopButton
+              stopURL={result.links.stop}
+              setStatus={(status) => {
+                this.setState({ status: status });
+              }}
+              onError={this.onError}
+            />
           ) : (
             ""
           )}

diff --git a/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/StopButton.js b/invenio_jobs/assets/semantic-ui/js/invenio_jobs/administration/StopButton.js
@@ -10,18 +10,20 @@ import React, { useState } from "react";
 import { http } from "react-invenio-forms";
 import { Button, Icon } from "semantic-ui-react";
 
-export const StopButton = ({ stopURL, onError }) => {
+export const StopButton = ({ stopURL, setStatus, onError }) => {
   const [loading, setLoading] = useState(false);
 
   const handleClick = async () => {
     setLoading(true);
-    await http.post(stopURL).catch((error) => {
+    const response = await http.post(stopURL).catch((error) => {
       if (error.response) {
         onError(error.response.data);
+        setLoading(false);
       } else {
         onError(error);
       }
     });
+    setStatus(response.data.status);
     setLoading(false);
   };
 
@@ -43,5 +45,6 @@ export const StopButton = ({ stopURL, onError }) => {
 
 StopButton.propTypes = {
   stopURL: PropTypes.string.isRequired,
+  setStatus: PropTypes.func.isRequired,
   onError: PropTypes.func.isRequired,
 };