molecular_frontend/src/Pages/TaskPage/TaskPage.tsx

import { Helmet } from "react-helmet";
import { IconCancel, IconPlus } from "@tabler/icons-react";
import { useParams } from "react-router";
import CustomButton from "Components/CustomButton/CustomButton";
import { IframePlugin } from "Api/PluginLoader/PluginLoader";
import { useEffect, useState } from "react";
import type { InstanceData } from "Types/Experiment/Experiment";
import {
  getFrontendFile,
  getInstanceById,
  updateInstance,
} from "Api/QuantumBackend/ExperimentsManagment";
import { useAuthenticationStore } from "Stores/AuthenticationStore";
import { useExperimentStore } from "Stores/ExperimentStore";
import { SimpleGrid, TextInput, Title } from "@mantine/core";
import { notifications } from "@mantine/notifications";
import "./TaskPage.css";

function TaskPage() {
  const { task_id } = useParams();

  const [instance, set_instance] = useState<InstanceData>();
  const { loadedHtmlFiles, addLoadedHtml, setInstances } = useExperimentStore();
  const { profile, is_loading } = useAuthenticationStore();
  const [, set_is_loading] = useState(true);
  const [data, setData] = useState<string>();
  const [progress, setProgress] = useState<string>();
  const [qubits_needed, set_qubits_needed] = useState<number>();

  const [name, setName] = useState<string>();
  const [descr, setDescr] = useState<string>("");
  const [reload, setReload] = useState<number>(0);

  const saveData = () => {
    if (instance && qubits_needed) {
      updateInstance({
        instance_id: instance.instance_id,
        name: name,
        description: descr,
        instance_data: JSON.stringify(data),
        qubits_needed: qubits_needed,
      }).then((updated) => {
        set_instance({
          instance_id: instance.instance_id,
          name: updated.name,
          description: updated.description,
          instance_data: updated.instance_data,
          qubits_needed: updated.qubits_needed,
          simulation_result: instance.simulation_result,
        });
        setName(updated.name);
        setDescr(updated.description || "");
        setData(updated.instance_data);
      });
    } else {
      if (!qubits_needed) {
        notifications.show({
          message: "Количество кубит не было определено",
        });
      }
    }
  };

  const ResetData = () => {
    if (instance) {
      setData(instance.instance_data);
      setName(instance.name);
      setDescr(instance.description || "");
      setReload(reload + 1);
    }
  };

  useEffect(() => {
    if (profile && !is_loading && task_id) {
      getInstanceById(Number(task_id))
        .then((inst) => {
          set_instance(inst);
          setData(inst.instance_data);
          setProgress(inst.simulation_result?.simulation_result);
          setName(inst.name);
          setDescr(inst.description || "");
          set_qubits_needed(inst.qubits_needed);
          getFrontendFile(1).then((file) => {
            addLoadedHtml(1, file);
          });
          set_is_loading(false);
        })
        .catch(() => {
          set_is_loading(false);
        });
    }

    return () => {
      setInstances([]);
    };
  }, [profile, is_loading]);

  return (
    <>
      <Helmet>
        <title>
          {task_id ? "Task " + task_id + " | QMolSim" : "Error |QmolSim"}
        </title>
        <meta
          name="description"
          content="See the documentation on how to setup and use the qunatum computational system"
        />
      </Helmet>

      <div className="ExperimentPage">
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "10px",
            marginBottom: "15px",
          }}
        >
          {(!instance?.simulation_result ||
            instance?.simulation_result?.status == "DRAFT") && (
            <>
              <div className="taskButtons">
                <CustomButton
                  color="accent"
                  onClick={saveData}
                  disabled={
                    JSON.stringify(data) ==
                      JSON.stringify(instance?.instance_data) &&
                    instance?.name == name &&
                    (instance?.description || "") == (descr || "")
                  }
                  icon={<IconPlus />}
                  text="Сохранить"
                />
                <CustomButton
                  color="red"
                  style="outline"
                  onClick={ResetData}
                  icon={<IconCancel />}
                  text="Отменить"
                  disabled={
                    JSON.stringify(data) ==
                      JSON.stringify(instance?.instance_data) &&
                    instance?.name == name &&
                    (instance?.description || "") == (descr || "")
                  }
                />
              </div>
            </>
          )}
          <div>
            <SimpleGrid verticalSpacing="lg" cols={2}>
              <Title size="lg">Имя:</Title>
              <TextInput
                size="md"
                value={name}
                onChange={
                  (e) => {
                    setName(e.target.value);
                  } //set_username(e.currentTarget.value)
                }
              />
              <Title size="lg">Описание:</Title>
              <TextInput
                size="md"
                value={descr}
                onChange={
                  (e) => {
                    setDescr(e.target.value);
                  } //set_email(e.currentTarget.value)
                }
              />
            </SimpleGrid>
          </div>
        </div>
        {instance && (
          <IframePlugin
            plugin={loadedHtmlFiles.get(1) || ""}
            mode="Editor"
            taskData={JSON.stringify(data)}
            qubits_needed={qubits_needed || 0}
            onUpdate={(data, qubits_need) => {
              setData(JSON.parse(data));
              set_qubits_needed(qubits_need);
            }}
            index={instance.instance_id + reload}
            simProgress={JSON.stringify(progress)}
          />
        )}
      </div>
    </>
  );
}

export default TaskPage;