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 =
+const baseUrl = process.env.NODE_ENV === "production" ? "" : "https://hub.pena.digital";
-  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 () =>
+  const requestVefification = async () => {
-    makeRequest<never, Verification>({
+    setIsLoading(true);
+    try {
+      const verification = await makeRequest<never, Verification>({
         method: "get",
         url: baseUrl + `/verification/verification/${userId}`,
-    }).then((verification) => {
+      });
       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,7 +89,10 @@ export const VerificationTab = () => {
       >
         {user?.accepted ? "Верификация пройдена" : "Не верифицирован"}
       </Typography>
-      {user?.files?.map(({ name, url }, index) => (
+      {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}.{" "}
@@ -106,13 +117,15 @@ export const VerificationTab = () => {
               </a>
             </Typography>
           </Box>
-      ))}
+        ))
+      ) : (
+        <Typography sx={{ fontWeight: "bold", fontSize: "18px", marginBottom: "25px" }}>
+          Пользователь не загружал данные
+        </Typography>
+      )}
       {user?.comment && (
         <Box sx={{ marginBottom: "15px" }}>
-          <Typography
+          <Typography component="span" sx={{ fontWeight: "bold", marginBottom: "10px" }}>
-            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>) =>
+        onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setComment(event.target.value)}
-          setComment(event.target.value)
-        }
       />
       <Box sx={{ display: "flex", columnGap: "10px" }}>
-        <Button
+        <Button variant="text" sx={{ background: "#9A9AAF" }} onClick={() => verify(false)}>
-          variant="text"
-          sx={{ background: "#9A9AAF" }}
-          onClick={() => verify(false)}
-        >
           Отклонить
         </Button>
-        <Button
+        <Button variant="text" sx={{ background: "#9A9AAF" }} onClick={() => verify(true)}>
-          variant="text"
-          sx={{ background: "#9A9AAF" }}
-          onClick={() => verify(true)}
-        >
           Подтвердить
         </Button>
       </Box>