src/components/pages/vectorizationPage/Vectorization.tsx

import "./Vectorization.scss";

import { useEffect, useMemo } from "react";

import Button from "@/components/generics/button/Button";
import Documents from "../documentsPage/Documents";
import { ProcessingStatus } from "@/api/documents/types";
import { useGetProcessing } from "@/api/documents/hooks";

const Vectorization = () => {
  const { data: processData } = useGetProcessing();
  const inProcessData = useMemo(
    () => (
      <>
        <h3>Векторизуется...</h3>
        <h3>Ожидайте окончания процесса векторизации.</h3>
        <h3>
          {localStorage.getItem("current")} / {localStorage.getItem("total")}
        </h3>

        <div className="reload">
          <Button
            name="Обновить страницу"
            onClick={() => {
              location.reload();
            }}
          />
        </div>
      </>
    ),
    []
  );

  useEffect(() => {
    if (processData) {
      localStorage.setItem("processing", processData.status);
      localStorage.setItem("current", (processData.current || 0).toString());
      localStorage.setItem("total", (processData.total || 0).toString());
    }
  }, [processData]);

  return localStorage.getItem("processing") === ProcessingStatus.in_progress ? inProcessData : <Documents />;
};

export default Vectorization;