Added loading notification during verification. Commit message.

src/pages/dashboard/ModalUser/VerificationTab.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { Box, Typography, TextField, Button } from "@mui/material";
 
-
 import type { ChangeEvent } from "react";
 import { makeRequest } from "@frontend/kitui";
 
@@ -27,22 +26,29 @@ type PatchVerificationBody = {
   accepted: boolean;
 };
 
-const baseUrl =
-  process.env.NODE_ENV === "production" ? "" : "https://hub.pena.digital";
+const baseUrl = process.env.NODE_ENV === "production" ? "" : "https://hub.pena.digital";
 
 export const VerificationTab = () => {
   const [user, setUser] = useState<Verification | null>(null);
   const [comment, setComment] = useState<string>("");
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const { userId } = useParams();
 
-  const requestVefification = async () =>
-    makeRequest<never, Verification>({
-      method: "get",
-      url: baseUrl + `/verification/verification/${userId}`,
-    }).then((verification) => {
+  const requestVefification = async () => {
+    setIsLoading(true);
+    try {
+      const verification = await makeRequest<never, Verification>({
+        method: "get",
+        url: baseUrl + `/verification/verification/${userId}`,
+      });
       setUser(verification);
       setComment(verification.comment);
-    });
+    } catch (error) {
+      console.error("Error fetching verification:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
   useEffect(() => {
     requestVefification();
@@ -67,7 +73,9 @@ export const VerificationTab = () => {
       });
 
       await requestVefification();
-    } catch {}
+    } catch (error) {
+      console.error("Error verifying:", error);
+    }
   };
 
   return (
@@ -81,38 +89,43 @@ export const VerificationTab = () => {
       >
         {user?.accepted ? "Верификация пройдена" : "Не верифицирован"}
       </Typography>
-      {user?.files?.map(({ name, url }, index) => (
-        <Box sx={{ marginBottom: "25px" }} key={name + url}>
-          <Typography sx={{ fontWeight: "bold", fontSize: "18px" }}>
-            {index + 1}.{" "}
-            {name === "inn"
-              ? "Скан ИНН организации (выписка из ЕГЮРЛ)"
-              : name === "rule"
-              ? "Устав организации"
-              : name === "certificate"
-              ? "Свидетельство о регистрации НКО"
-              : `Скан документа ${index + 1}`}
-          </Typography>
-          <Typography>
-            <a
-              style={{
-                color: "#7E2AEA",
-                textDecoration: "none",
-                fontSize: "18px",
-              }}
-              href={url}
-            >
-              {url.split("/").pop()?.split(".")?.[0]}
-            </a>
-          </Typography>
-        </Box>
-      ))}
+      {isLoading ? (
+        <Typography sx={{ fontWeight: "bold", fontSize: "18px", marginBottom: "25px" }}>Загрузка данных...</Typography>
+      ) : user && user.files.length > 0 ? (
+        user.files.map(({ name, url }, index) => (
+          <Box sx={{ marginBottom: "25px" }} key={name + url}>
+            <Typography sx={{ fontWeight: "bold", fontSize: "18px" }}>
+              {index + 1}.{" "}
+              {name === "inn"
+                ? "Скан ИНН организации (выписка из ЕГЮРЛ)"
+                : name === "rule"
+                ? "Устав организации"
+                : name === "certificate"
+                ? "Свидетельство о регистрации НКО"
+                : `Скан документа ${index + 1}`}
+            </Typography>
+            <Typography>
+              <a
+                style={{
+                  color: "#7E2AEA",
+                  textDecoration: "none",
+                  fontSize: "18px",
+                }}
+                href={url}
+              >
+                {url.split("/").pop()?.split(".")?.[0]}
+              </a>
+            </Typography>
+          </Box>
+        ))
+      ) : (
+        <Typography sx={{ fontWeight: "bold", fontSize: "18px", marginBottom: "25px" }}>
+          Пользователь не загружал данные
+        </Typography>
+      )}
       {user?.comment && (
         <Box sx={{ marginBottom: "15px" }}>
-          <Typography
-            component="span"
-            sx={{ fontWeight: "bold", marginBottom: "10px" }}
-          >
+          <Typography component="span" sx={{ fontWeight: "bold", marginBottom: "10px" }}>
             Комментарий:
           </Typography>
           <Typography component="span"> {user.comment}</Typography>
@@ -129,23 +142,13 @@ export const VerificationTab = () => {
           maxWidth: "500px",
           marginBottom: "10px",
         }}
-        onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-          setComment(event.target.value)
-        }
+        onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setComment(event.target.value)}
       />
       <Box sx={{ display: "flex", columnGap: "10px" }}>
-        <Button
-          variant="text"
-          sx={{ background: "#9A9AAF" }}
-          onClick={() => verify(false)}
-        >
+        <Button variant="text" sx={{ background: "#9A9AAF" }} onClick={() => verify(false)}>
           Отклонить
         </Button>
-        <Button
-          variant="text"
-          sx={{ background: "#9A9AAF" }}
-          onClick={() => verify(true)}
-        >
+        <Button variant="text" sx={{ background: "#9A9AAF" }} onClick={() => verify(true)}>
           Подтвердить
         </Button>
       </Box>