Как исправить данную функцию handleRestartTask чтобы происходило обновление задачи

  import React, { useState, useContext, useEffect } from "react";
import { MainContext } from "./context/mainContext";
import { Report, ReportDetails, Vectors, Task } from "../types";
import httpService from "../services/http.service";
import responseStatusChecker from "../services/catcher.service";

const ReportInfo = ({
  report,
  loadReportDetails,
  handleDownloadReport

}: {
  report: Report;
  loadReportDetails: (reportId: string) => void;
  handleDownloadReport: (reportId: string) => void;

}) => {
  const { progress, in_progress, started_at, finished_at, task } = report;

  return (
    <>
      <div className="fs-14 brd-bt pb-10 mb-20">Результаты</div>
      {!in_progress && (
        <div className="d-fl sp-btw ">
          <div className="fs-12">{task.host}</div>
          <div className="result-logosReport d-fl sp-btw gap-10 ">
            <div
              className="result-logo-loadReport"
              onClick={() => loadReportDetails(report.id)}
            ></div>
            <div
              className="result-logo-downloadReport"
              onClick={() => handleDownloadReport(report.id)}
            ></div>
            <div className="result-logo-deleteReport"></div>
          </div>
        </div>
      )}
    </>
  );
};
const Result = () => {
  const { activeTaskId, tasks, reports } = useContext(MainContext);
  const activeTask = tasks.find((task) => task.id === activeTaskId);
  const [reportDetails, setReportDetails] = useState<ReportDetails | null>(
    null
  );
  // console.log(activeTask)
  
  const loadReportDetails = (reportId: string) => {
    httpService.getCurrentReport(reportId).then((reportDetails) => {
      setReportDetails(reportDetails);
    });
  };

  const handleDownloadReport = (reportId: string) => {
    httpService
      .downloadCurrentReport(reportId)
      .then((response) => window.open(response?.config.url, "_blank"));
  };
  const handleRestartTask = () => {
    httpService
      .restartTask(activeTaskId)
      .then((response) => responseStatusChecker(response?.status || 0, "singleReport"));
  };
  useEffect(() => {
    setReportDetails(null);
  }, [activeTaskId]);
  return (
    <>
      <div className="result-info-top pl-10 pr-10 ">
        <div className="brd-bt pb-10 mt-20 d-fl sp-btw">
          <div className="result-name  fs-14">Результат выполнения задачи</div>
          <div className="result-logo d-fl  gap-10">
            <div
              onClick={() => handleRestartTask()}
              className="result-logo-update"
            ></div>
            <div className="result-logo-delete"></div>
          </div>
        </div>
        {!!activeTask && (
          <div>
            <div className="brd-bt fs-10 pb-10 mt-20">
              URL <span className="ml-100 fs-12">{activeTask.host}</span>
            </div>
            <div className="brd-bt fs-10 pb-10 mt-20">
              Тип задачи{" "}
              <span className="ml-47 fs-12">{activeTask.action.label_ru}</span>
            </div>
          </div>
        )}
        {!!reports.length && (
          <div>
            {reports.map((report) => (
              <div key={report.id} className="brd-bt fs-10 pb-10 mt-20">
                <ReportInfo
                  report={report}
                  loadReportDetails={loadReportDetails}
                  handleDownloadReport={handleDownloadReport}
            
                />
              </div>
            ))}
          </div>
        )}

        {reportDetails && (
          <div className="fs-14 brd-bt pb-10 mt-20">
            {reportDetails.task.host} | {reportDetails.data.message.reportDate}
          </div>
        )}
        {reports.length > 0 &&
          reportDetails &&
          reportDetails.data.message.vectors.map((vector: Vectors) => (
            <div key={vector.date}>
              {/* <div className="fs-12 mt-20">{vector.date}</div> */}
              <div className="fs-12 mt-20">{vector.description}</div>
              <div className="fs-12 mb-20">{vector.name}</div>
              {/* <div>{vector.status}</div> */}
            </div>
          ))}
      </div>
    </>
  );
};
export default Result;

import { toast } from "react-toastify";
//area is component name as string
export function responseStatusChecker(status:number, area:string = "default"):void {
    if (status === 200) {
        switch (area) {
            case "addTaskForm":
                toast.success("Задача добавлена успешно");
                break;
            case "singleReport":
                toast.success("Задача успешно перезапущена");
                break;
            default:
                break;
        }
    }
    if (status === 400) {
        switch (area) {
            case "addTaskForm":
                toast.error("Такая задача уже существует!");
                break;
            case "restartTask":
                toast.error("Перезапуск задачи уже выполняется");
                break;
            default:
                break;
        }
    }
    if (status === 401) {
        switch (area) {
            case "addTaskForm":
                toast.warning("Пользователь не авторизован!");
                break;
            default:
                break;
        }
    }
    if (status === 404) {
        switch (area) {
            case "addTaskForm":
                toast.error(
                    "Постановка задачи невозможна!Обратитесь в поддержку!"
                );
                break;
            case "downloadCurrentReport":
                toast.error(
                    "Ошибка скачивания отчета! Повторите попытку позднее или обратитесь в поддержку!"
                );
                break;
            default:
                break;
        }
    }
    if (status === 422) {
        switch (area) {
            case "addTaskForm":
                toast.error("Недопустимый веб-адрес!");
                break;
            default:
                break;
        }
    }
    if (status >= 500) {
        switch (area) {
            case "default":
                toast.error(
                    "Сервер временно недоступен.Попробуйте позднее или обратитесь в поддержку."
                );
                break;
            case "addTaskForm":
                toast.error(
                    "Сервер временно недоступен.Попробуйте позднее или обратитесь в поддержку."
                );
                break;
            default:
                break;
        }
    }
}
export default responseStatusChecker;

import axios from "axios";
import responseStatusChecker from "./catcher.service";
import Config from "./config.url.json";

const endpoint = process.env.REACT_APP_API_BASE_URL;
const base = Config.dev;

async function getActionsList() {
    try {
        const response = await axios({
            method: base.getActionsList.method,
            url: endpoint + base.getActionsList.request
        });
        return response.data.items;
    } catch (error) {}
}
async function addNewTask({ url, actionType }) {
    const response = await axios({
        method: base.addTask.method,
        url: `${endpoint}${base.addTask.request}`,
        headers: {
            "content-type": "application/json"
        },
        data: {
            action: actionType,
            target: url
        }
    });
    return response;
}
async function getAllTasks() {
    try {
        const response = await axios({
            method: base.getTasks.method,
            url: endpoint + base.getTasks.request,
            params: {
                page: 1,
                offset: 0,
                limit: 100,
                order: "-id"
            }
        });
        return response.data.items;
    } catch (error) {}
}
async function getAllTasksOfHost(host) {
    try {
        const response = await axios({
            method: base.getTasks.method,
            url: endpoint + base.getTasks.request,
            params: {
                host: host,
                page: 1,
                offset: 0,
                limit: 100,
                order: "-id"
            }
        });
        return response.data.items;
    } catch (error) {}
}
async function getAllReports() {
    try {
        const response = await axios({
            method: base.getAllReports.method,
            url: endpoint + base.getAllReports.request,
            params: {
                page: 1,
                offset: 0,
                limit: 100,
                order: "-id"
            }
        });
        return response.data.items;
    } catch (error) {}
}
async function getAllReportsOfTask(taskId) {
    try {
        const response = await axios({
            method: base.getAllReportsOfTask.method,
            url: endpoint + base.getAllReportsOfTask.request,
            params: {
                task_id: taskId,
                page: 1,
                offset: 0,
                limit: 100,
                order: "-id"
            }
        });
        return response.data.items;
    } catch (error) {
        console.log("error in getReportsById", error);
    }
}
async function getCurrentReport(reportId) {
    try {
        const response = await axios({
            method: base.getCurrentReport.method,
            url: `${endpoint}${base.getCurrentReport.request}${reportId}/`
        });
        return response.data;
    } catch (error) {}
}
async function getAvaliableScanTypes() {
    try {
        const response = await axios({
            method: base.getAvaliableScanTypes.method,
            url: endpoint + base.getAvaliableScanTypes.request
        });
        return response.data.items;
    } catch (error) {}
}
async function getActionsOfTargets() {
    try {
        const response = await axios({
            method: base.getActionsOfTargets.method,
            url: endpoint + base.getActionsOfTargets.request
        });
        return response.data.items;
    } catch (error) {}
}
async function getActionsOfHosts() {
    try {
        const response = await axios({
            method: base.getActionsOfHosts.method,
            url: endpoint + base.getActionsOfHosts.request
        });
        return response.data.items;
    } catch (error) {}
}
async function restartTask(taskId) {
    try {
        const response = await axios({
            method: base.restartTask.method,
            url: `${endpoint}${base.restartTask.request}${taskId}/run/`
        });
        return response;
    } catch (error) {
        responseStatusChecker(error.response.status, "restartTask");
    }
}
async function deleteTask(taskId) {
    try {
        const response = await axios({
            method: base.deleteTask.method,
            url: `${endpoint}${base.deleteTask.request}${taskId}/`
        });
        return response;
    } catch (error) {
        console.log("error in deleteTask in httpservice", error);
        responseStatusChecker(error.response.status);
    }
}
async function deleteAnyTasks(tasksIds) {
    try {
        const response = await axios({
            method: base.deleteAnyTasks.method,
            url: `${endpoint}${base.deleteAnyTasks.request}${tasksIds}/`
        });
        return response;
    } catch (error) {
        console.log("error deleteAnyTasks in http", error);
        responseStatusChecker(error.response.status);
    }
}
async function deleteCurrentReport(reportId) {
    try {
        const response = await axios({
            method: base.deleteCurrentReport.method,
            url: `${endpoint}${base.deleteCurrentReport.request}${reportId}/`
        });
        return response;
    } catch (error) {
        console.log("error in http", error);
        responseStatusChecker(error.response.status);
    }
}
async function deleteAllReports(reportsIds) {
    try {
        const response = await axios({
            method: base.deleteAllReports.method,
            url: `${endpoint}${base.deleteAllReports.request}${reportsIds}/`
        });
        return response;
    } catch (error) {
        console.log("error deleteAllReports in http", error);
        responseStatusChecker(error.response.status);
    }
}
async function downloadCurrentReport(reportId) {
    try {
        const response = await axios({
            method: base.downloadCurrentReport.method,
            url: `${endpoint}${base.downloadCurrentReport.request}${reportId}/file/`
        });
        return response;
    } catch (error) {
        responseStatusChecker(error.response.status, "downloadCurrentReport");
    }
}

const httpService = {
    getActionsList: getActionsList,
    addTask: addNewTask,
    getAllTasks: getAllTasks,
    getAllReports: getAllReports,
    getAllReportsOfTask: getAllReportsOfTask,
    getCurrentReport: getCurrentReport,
    getAvaliableScanTypes: getAvaliableScanTypes,
    getActionsOfTargets: getActionsOfTargets,
    getActionsOfHosts: getActionsOfHosts,
    restartTask: restartTask,
    deleteTask: deleteTask,
    deleteAnyTasks: deleteAnyTasks,
    deleteCurrentReport: deleteCurrentReport,
    deleteAllReports: deleteAllReports,
    downloadCurrentReport: downloadCurrentReport,
    getAllTasksOfHost: getAllTasksOfHost
};
export default httpService;