feat: snapshot realization update for polling usage

.env

@@ -1,3 +1,3 @@
-VITE_API_URL='https://wn.krbl.ru'
-VITE_REACT_APP ='https://wn.krbl.ru/'
-VITE_KRBL_MEDIA='https://wn.krbl.ru/media/'
+VITE_API_URL='https://content.wn.polygon.unprism.ru/'
+VITE_REACT_APP ='https://content.wn.polygon.unprism.ru/'
+VITE_KRBL_MEDIA='https://content.wn.polygon.unprism.ru/media/'

package.json

@@ -41,7 +41,8 @@
     "react-toastify": "^11.0.5",
     "rehype-raw": "^7.0.0",
     "tailwindcss": "^4.1.8",
-    "three": "^0.177.0"
+    "three": "^0.177.0",
+    "uuid": "^13.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",

src/pages/Snapshot/SnapshotCreatePage/index.tsx

@@ -5,9 +5,10 @@ import { ArrowLeft, Loader2, Save } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
+import { runInAction } from "mobx";
 
 export const SnapshotCreatePage = observer(() => {
-  const { createSnapshot } = snapshotStore;
+  const { createSnapshot, getSnapshotStatus, snapshotStatus } = snapshotStore;
   const navigate = useNavigate();
   const [name, setName] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -42,10 +43,24 @@ export const SnapshotCreatePage = observer(() => {
             onClick={async () => {
               try {
                 setIsLoading(true);
-                await createSnapshot(name);
-                setIsLoading(false);
-                toast.success("Снапшот успешно создан");
-                navigate(-1);
+                const id = await createSnapshot(name);
+
+                await getSnapshotStatus(id);
+
+                while (snapshotStore.snapshotStatus?.Status != "done") {
+                  await new Promise((resolve) => setTimeout(resolve, 1000));
+                  await getSnapshotStatus(id);
+                }
+
+                if (snapshotStore.snapshotStatus?.Status === "done") {
+                  toast.success("Снапшот успешно создан");
+
+                  runInAction(() => {
+                    snapshotStore.snapshotStatus = null;
+                  });
+
+                  navigate(-1);
+                }
               } catch (error) {
                 console.error(error);
                 toast.error("Ошибка при создании снапшота");
@@ -56,7 +71,15 @@ export const SnapshotCreatePage = observer(() => {
             disabled={isLoading || !name.trim()}
           >
             {isLoading ? (
-              <Loader2 size={20} className="animate-spin" />
+              <div className="flex items-center gap-2">
+                <Loader2 size={20} className="animate-spin" />
+                <span>
+                  {snapshotStatus?.Progress
+                    ? (snapshotStatus.Progress * 100).toFixed(2)
+                    : 0}
+                  %
+                </span>
+              </div>
             ) : (
               "Сохранить"
             )}

src/shared/store/SnapshotStore/index.ts

@@ -1,5 +1,5 @@
 import { authInstance } from "@shared";
-
+import { v4 as uuidv4 } from "uuid";
 import { makeAutoObservable, runInAction } from "mobx";
 import {
   articlesStore,
@@ -25,9 +25,18 @@ type Snapshot = {
   CreationTime: string;
 };
 
+type SnapshotStatus = {
+  ID: string;
+  Status: string;
+  Progress: number;
+  Error: string;
+};
+
 class SnapshotStore {
   snapshots: Snapshot[] = [];
   snapshot: Snapshot | null = null;
+  lastRequestId: string | null = null;
+  snapshotStatus: SnapshotStatus | null = null;
 
   constructor() {
     makeAutoObservable(this);
@@ -266,7 +275,27 @@ class SnapshotStore {
   };
 
   createSnapshot = async (name: string) => {
-    await authInstance.post(`/snapshots`, { name });
+    this.lastRequestId = uuidv4();
+
+    const response = await authInstance.post(
+      `/snapshots`,
+      { name },
+      { headers: { "X-Request-ID": this.lastRequestId } }
+    );
+
+    // Не ждем здесь, так как статус будет загружен в компоненте
+    // this.getSnapshotStatus(response.data.ID);
+
+    return response.data.ID;
+  };
+
+  getSnapshotStatus = async (id: string) => {
+    const response = await authInstance.get(`/snapshots/status/${id}`);
+
+    console.log(response.data);
+    runInAction(() => {
+      this.snapshotStatus = response.data;
+    });
   };
 }
 

yarn.lock

@@ -4107,6 +4107,11 @@ utility-types@^3.11.0:
   resolved "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz"
   integrity sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==
 
+uuid@^13.0.0:
+  version "13.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-13.0.0.tgz#263dc341b19b4d755eb8fe36b78d95a6b65707e8"
+  integrity sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==
+
 vfile-location@^5.0.0:
   version "5.0.3"
   resolved "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz"