Implement kill-run button using mock API endpoint

src/pages/Run/index.tsx

@@ -1,9 +1,13 @@
-import { useReducer } from "react";
+import { useReducer, useState } from "react";
 import { useParams } from "react-router-dom";
 import { makeStyles, useTheme } from "@mui/styles";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Snackbar from "@mui/material/Snackbar";
 import { format } from "date-fns";
 import SourceBranch from "mdi-material-ui/SourceBranch";
 import { Helmet } from "react-helmet";
@@ -14,7 +18,6 @@ import { useRun } from "../../lib/paddles";
 import JobList from "../../components/JobList";
 import Link from "../../components/Link";
 
-
 const useStyles = makeStyles(() => ({
   root: {
     "& .MuiButton-root": {
@@ -25,17 +28,17 @@ const useStyles = makeStyles(() => ({
 
 type StatusFilterState = {
   [key: string]: string;
-}
+};
 
 type StatusFilterReducerAction = {
   type: string;
   payload: StatusFilterReducerPayload;
-}
+};
 
 type StatusFilterReducerPayload = {
   key: string;
   value: string;
-}
+};
 
 function reducer(state: StatusFilterState, action: StatusFilterReducerAction) {
   let newState: StatusFilterState;
@@ -58,9 +61,31 @@ export default function Run() {
   const theme = useTheme();
   const { name } = useParams<RunParams>();
   const [state, dispatch] = useReducer(reducer, {});
-  const query = useRun(name === undefined? "" : name);
-  if ( query === null ) return (<Typography>404</Typography>);
+  const [kill, setKill] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState(false);
+  const query = useRun(name === undefined ? "" : name);
+  if (query === null) return <Typography>404</Typography>;
   if (!query.isSuccess) return null;
+  const killRun = async () => {
+    setKill(true);
+    const response = await fetch("https://reqres.in/api/users/2?delay=3"); // success response
+    // const response = await fetch("https://reqres.in/api/users/23?delay=3"); // error response
+    const status = response.status;
+    if (status === 200) setSuccess(true);
+    else setError(true);
+    setKill(false);
+  };
+  const handleClose = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setSuccess(false);
+    setError(false);
+  };
   const setFilter = (key: string, value: string) => {
     dispatch({
       type: "set",
@@ -77,7 +102,7 @@ export default function Run() {
   return (
     <div className={classes.root}>
       <Helmet>
-        <title>{ `${name} - Pulpito` }</title>
+        <title>{`${name} - Pulpito`}</title>
       </Helmet>
       <Typography variant="h5" style={{ margin: "20px 0px" }}>
         {name}
@@ -91,13 +116,42 @@ export default function Run() {
         </Link>
         <Link to={`/runs/?branch=${branch}`}>
           <Typography>
-            <SourceBranch style={{"color": theme.palette.text.primary}}/>
+            <SourceBranch style={{ color: theme.palette.text.primary }} />
           </Typography>
         </Link>
         <Link to={`/runs/?date=${date}`}>
           <Typography>scheduled on {date}</Typography>
         </Link>
       </div>
+      <div
+        style={{
+          display: "flex",
+        }}
+      >
+        <Button
+          variant="contained"
+          color="error"
+          size="large"
+          onClick={killRun}
+        >
+          Kill Run
+        </Button>
+        {kill ? (
+          <Box sx={{ p: 1 }}>
+            <CircularProgress size={20} color="inherit" />
+          </Box>
+        ) : null}
+      </div>
+      <Snackbar autoHideDuration={3000} open={success} onClose={handleClose}>
+        <Alert onClose={handleClose} severity="success" sx={{ width: "100%" }}>
+          Run killed successfully
+        </Alert>
+      </Snackbar>
+      <Snackbar autoHideDuration={3000} open={error} onClose={handleClose}>
+        <Alert onClose={handleClose} severity="error" sx={{ width: "100%" }}>
+          Unable to kill run
+        </Alert>
+      </Snackbar>
       <ButtonGroup style={{ display: "flex", justifyContent: "center" }}>
         <Button
           onClick={() => {