feat: Improving page loading

2025-11-20 20:17:52 +03:00
parent 6f32c6e671
commit 85c71563c1
17 changed files with 545 additions and 273 deletions
--- a/src/widgets/MediaArea/index.tsx
+++ b/src/widgets/MediaArea/index.tsx
@@ -10,23 +10,25 @@ import { observer } from "mobx-react-lite";
 import { useState, DragEvent, useRef } from "react";
 import { toast } from "react-toastify";

+interface MediaAreaProps {
+  articleId: number;
+  mediaIds: { id: string; media_type: number; filename: string }[];
+  deleteMedia: (id: number, media_id: string) => void;
+  onFilesDrop?: (files: File[]) => void;
+  setSelectMediaDialogOpen: (open: boolean) => void;
+}
+
 export const MediaArea = observer(
  ({
    articleId,
    mediaIds,
    deleteMedia,
-    onFilesDrop, // 👈 Проп для обработки загруженных файлов
+    onFilesDrop,
    setSelectMediaDialogOpen,
-  }: {
-    articleId: number;
-    mediaIds: { id: string; media_type: number; filename: string }[];
-    deleteMedia: (id: number, media_id: string) => void;
-    onFilesDrop?: (files: File[]) => void;
-    setSelectMediaDialogOpen: (open: boolean) => void;
-  }) => {
+  }: MediaAreaProps) => {
    const [mediaModal, setMediaModal] = useState<boolean>(false);
    const [mediaId, setMediaId] = useState<string>("");
-    const [isDragging, setIsDragging] = useState(false);
+    const [isDragging, setIsDragging] = useState<boolean>(false);
    const fileInputRef = useRef<HTMLInputElement>(null);

    const handleMediaModal = (mediaId: string) => {
@@ -34,23 +36,29 @@ export const MediaArea = observer(
      setMediaId(mediaId);
    };

+    const processFiles = (files: File[]) => {
+      if (!files.length || !onFilesDrop) {
+        return;
+      }
+
+      const { validFiles, errors } = filterValidFiles(files);
+
+      if (errors.length > 0) {
+        errors.forEach((error) => toast.error(error));
+      }
+
+      if (validFiles.length > 0) {
+        onFilesDrop(validFiles);
+      }
+    };
+
    const handleDrop = (e: DragEvent<HTMLDivElement>) => {
      e.preventDefault();
      e.stopPropagation();
      setIsDragging(false);

      const files = Array.from(e.dataTransfer.files);
-      if (files.length && onFilesDrop) {
-        const { validFiles, errors } = filterValidFiles(files);
-
-        if (errors.length > 0) {
-          errors.forEach((error) => toast.error(error));
-        }
-
-        if (validFiles.length > 0) {
-          onFilesDrop(validFiles);
-        }
-      }
+      processFiles(files);
    };

    const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
@@ -68,19 +76,11 @@ export const MediaArea = observer(

    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
      const files = Array.from(event.target.files || []);
-      if (files.length && onFilesDrop) {
-        const { validFiles, errors } = filterValidFiles(files);
+      processFiles(files);

-        if (errors.length > 0) {
-          errors.forEach((error) => toast.error(error));
-        }
-
-        if (validFiles.length > 0) {
-          onFilesDrop(validFiles);
-        }
+      if (event.target) {
+        event.target.value = "";
      }
-      // Сбрасываем значение input, чтобы можно было выбрать тот же файл снова
-      event.target.value = "";
    };

    return (
@@ -96,7 +96,7 @@ export const MediaArea = observer(
        <Box className="w-full flex flex-col items-center justify-center border rounded-md p-4">
          <div className="w-full flex flex-col items-center justify-center">
            <div
-              className={`w-full h-40 flex flex-col justify-center items-center text-gray-400 border-dashed border-2 rounded-md border-gray-400 p-4 cursor-pointer hover:bg-gray-50 ${
+              className={`w-full h-40 flex flex-col justify-center items-center text-gray-400 border-dashed border-2 rounded-md border-gray-400 p-4 cursor-pointer hover:bg-gray-50 transition-colors ${
                isDragging ? "bg-blue-100 border-blue-400" : ""
              }`}
              onDrop={handleDrop}
@@ -105,9 +105,11 @@ export const MediaArea = observer(
              onClick={handleClick}
            >
              <Upload size={32} className="mb-2" />
-              Перетащите медиа файлы сюда или нажмите для выбора
+              <span className="text-center">
+                Перетащите медиа файлы сюда или нажмите для выбора
+              </span>
            </div>
-            <div>или</div>
+            <div className="my-2">или</div>
            <Button
              variant="contained"
              color="primary"
@@ -117,33 +119,38 @@ export const MediaArea = observer(
            </Button>
          </div>

-          <div className="w-full flex flex-start flex-wrap gap-2 mt-4 py-10">
-            {mediaIds.map((m) => (
-              <button
-                className="relative w-20 h-20"
-                key={m.id}
-                onClick={() => handleMediaModal(m.id)}
-              >
-                <MediaViewer
-                  media={{
-                    id: m.id,
-                    media_type: m.media_type,
-                    filename: m.filename,
-                  }}
-                  height="40px"
-                />
+          {mediaIds.length > 0 && (
+            <div className="w-full flex flex-start flex-wrap gap-2 mt-4 py-10">
+              {mediaIds.map((m) => (
                <button
-                  className="absolute top-2 right-2"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    deleteMedia(articleId, m.id);
-                  }}
+                  className="relative w-20 h-20"
+                  key={m.id}
+                  onClick={() => handleMediaModal(m.id)}
+                  type="button"
                >
-                  <X size={16} color="red" />
+                  <MediaViewer
+                    media={{
+                      id: m.id,
+                      media_type: m.media_type,
+                      filename: m.filename,
+                    }}
+                    height="40px"
+                  />
+                  <button
+                    className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md hover:shadow-lg transition-shadow"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      deleteMedia(articleId, m.id);
+                    }}
+                    type="button"
+                    aria-label="Удалить медиа"
+                  >
+                    <X size={16} color="red" />
+                  </button>
                </button>
-              </button>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
        </Box>

        <PreviewMediaDialog
--- a/src/widgets/MediaAreaForSight/index.tsx
+++ b/src/widgets/MediaAreaForSight/index.tsx
@@ -11,52 +11,72 @@ import { observer } from "mobx-react-lite";
 import { useState, DragEvent, useRef } from "react";
 import { toast } from "react-toastify";

+type ContextType =
+  | "sight"
+  | "city"
+  | "carrier"
+  | "country"
+  | "vehicle"
+  | "station";
+
+interface MediaAreaForSightProps {
+  onFilesDrop?: (files: File[]) => void;
+  onFinishUpload?: (mediaId: string) => void;
+  contextObjectName?: string;
+  contextType?: ContextType;
+  isArticle?: boolean;
+  articleName?: string;
+}
+
 export const MediaAreaForSight = observer(
  ({
-    onFilesDrop, // 👈 Проп для обработки загруженных файлов
+    onFilesDrop,
    onFinishUpload,
    contextObjectName,
    contextType,
    isArticle,
    articleName,
-  }: {
-    onFilesDrop?: (files: File[]) => void;
-    onFinishUpload?: (mediaId: string) => void;
-    contextObjectName?: string;
-    contextType?:
-      | "sight"
-      | "city"
-      | "carrier"
-      | "country"
-      | "vehicle"
-      | "station";
-    isArticle?: boolean;
-    articleName?: string;
-  }) => {
-    const [selectMediaDialogOpen, setSelectMediaDialogOpen] = useState(false);
-    const [uploadMediaDialogOpen, setUploadMediaDialogOpen] = useState(false);
-    const [isDragging, setIsDragging] = useState(false);
+  }: MediaAreaForSightProps) => {
+    const [selectMediaDialogOpen, setSelectMediaDialogOpen] =
+      useState<boolean>(false);
+    const [uploadMediaDialogOpen, setUploadMediaDialogOpen] =
+      useState<boolean>(false);
+    const [isDragging, setIsDragging] = useState<boolean>(false);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const { setFileToUpload } = editSightStore;

+    const processFiles = (files: File[]) => {
+      if (!files.length) {
+        return;
+      }
+
+      const { validFiles, errors } = filterValidFiles(files);
+
+      if (errors.length > 0) {
+        errors.forEach((error: string) => toast.error(error));
+      }
+
+      if (validFiles.length > 0) {
+        // Сохраняем первый файл для загрузки
+        setFileToUpload(validFiles[0]);
+
+        // Вызываем колбэк, если он передан
+        if (onFilesDrop) {
+          onFilesDrop(validFiles);
+        }
+
+        // Открываем диалог загрузки
+        setUploadMediaDialogOpen(true);
+      }
+    };
+
    const handleDrop = (e: DragEvent<HTMLDivElement>) => {
      e.preventDefault();
      e.stopPropagation();
      setIsDragging(false);

      const files = Array.from(e.dataTransfer.files);
-      if (files.length) {
-        const { validFiles, errors } = filterValidFiles(files);
-
-        if (errors.length > 0) {
-          errors.forEach((error: string) => toast.error(error));
-        }
-
-        if (validFiles.length > 0 && onFilesDrop) {
-          setFileToUpload(validFiles[0]);
-          setUploadMediaDialogOpen(true);
-        }
-      }
+      processFiles(files);
    };

    const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
@@ -74,22 +94,12 @@ export const MediaAreaForSight = observer(

    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
      const files = Array.from(event.target.files || []);
-      if (files.length) {
-        const { validFiles, errors } = filterValidFiles(files);
-
-        if (errors.length > 0) {
-          errors.forEach((error: string) => toast.error(error));
-        }
-
-        if (validFiles.length > 0 && onFilesDrop) {
-          setFileToUpload(validFiles[0]);
-          onFilesDrop(validFiles);
-          setUploadMediaDialogOpen(true);
-        }
-      }
+      processFiles(files);

      // Сбрасываем значение input, чтобы можно было выбрать тот же файл снова
-      event.target.value = "";
+      if (event.target) {
+        event.target.value = "";
+      }
    };

    return (
@@ -105,7 +115,7 @@ export const MediaAreaForSight = observer(
        <Box className="w-full flex flex-col items-center justify-center border rounded-md p-4">
          <div className="w-full flex flex-col items-center justify-center">
            <div
-              className={`w-full h-40 flex text-center flex-col justify-center items-center text-gray-400 border-dashed border-2 rounded-md border-gray-400 p-4 cursor-pointer hover:bg-gray-50 ${
+              className={`w-full h-40 flex flex-col justify-center items-center text-gray-400 border-dashed border-2 rounded-md border-gray-400 p-4 cursor-pointer hover:bg-gray-50 transition-colors ${
                isDragging ? "bg-blue-100 border-blue-400" : ""
              }`}
              onDrop={handleDrop}
@@ -114,9 +124,11 @@ export const MediaAreaForSight = observer(
              onClick={handleClick}
            >
              <Upload size={32} className="mb-2" />
-              Перетащите медиа файлы сюда или нажмите для выбора
+              <span className="text-center">
+                Перетащите медиа файлы сюда или нажмите для выбора
+              </span>
            </div>
-            <div>или</div>
+            <div className="my-2">или</div>
            <Button
              variant="contained"
              color="primary"
--- a/src/widgets/MediaViewer/index.tsx
+++ b/src/widgets/MediaViewer/index.tsx
@@ -127,8 +127,8 @@ export function MediaViewer({
          src={`${import.meta.env.VITE_KRBL_MEDIA}${
            media?.id
          }/download?token=${token}`}
-          width={width ? width : "500px"}
-          height={height ? height : "300px"}
+          width={fullWidth ? "100%" : width ? width : "500px"}
+          height={fullHeight ? "100%" : height ? height : "300px"}
        />
      )}

--- a/src/widgets/SightTabs/CreateRightTab/index.tsx
+++ b/src/widgets/SightTabs/CreateRightTab/index.tsx
@@ -434,49 +434,61 @@ export const CreateRightTab = observer(
                  </Box>
                ) : type === "media" ? (
                  <Box className="w-[80%] border border-gray-300 rounded-2xl relative flex items-center justify-center">
-                    {sight.preview_media && (
-                      <>
-                        {type === "media" && (
-                          <Box className="w-[80%] h-full  rounded-2xl relative flex items-center justify-center">
-                            {previewMedia && (
-                              <>
-                                <Box className="absolute top-4 right-4  z-10">
-                                  <button
-                                    className="w-10 h-10 flex items-center justify-center z-10"
-                                    onClick={handleUnlinkPreviewMedia}
-                                  >
-                                    <X size={20} color="red" />
-                                  </button>
-                                </Box>
+                    <>
+                      {type === "media" && (
+                        <Box className="w-[80%] h-full  rounded-2xl relative flex items-center justify-center">
+                          {previewMedia && (
+                            <>
+                              <Box className="absolute top-4 right-4  z-10">
+                                <button
+                                  className="w-10 h-10 flex items-center justify-center z-10"
+                                  onClick={handleUnlinkPreviewMedia}
+                                >
+                                  <X size={20} color="red" />
+                                </button>
+                              </Box>

-                                <Box className="w-1/2 h-1/2">
-                                  <MediaViewer
-                                    media={{
-                                      id: previewMedia.id || "",
-                                      media_type: previewMedia.media_type,
-                                      filename: previewMedia.filename || "",
-                                    }}
-                                    fullWidth
-                                    fullHeight
-                                  />
-                                </Box>
-                              </>
-                            )}
-                          </Box>
-                        )}
-                      </>
-                    )}
-                    {!previewMedia && (
-                      <MediaAreaForSight
-                        onFinishUpload={(mediaId) => {
-                          linkPreviewMedia(mediaId);
-                        }}
-                        onFilesDrop={() => {}}
-                        contextObjectName={sight[language].name}
-                        contextType="sight"
-                        isArticle={false}
-                      />
-                    )}
+                              <Box className="w-1/2 h-1/2">
+                                <MediaViewer
+                                  media={{
+                                    id: previewMedia.id || "",
+                                    media_type: previewMedia.media_type,
+                                    filename: previewMedia.filename || "",
+                                  }}
+                                  fullWidth
+                                  fullHeight
+                                />
+                              </Box>
+                            </>
+                          )}
+
+                          {!previewMedia && (
+                            <Box className="w-full h-full flex justify-center items-center">
+                              <Box
+                                sx={{
+                                  maxWidth: "500px",
+                                  maxHeight: "100%",
+                                  display: "flex",
+                                  flexGrow: 1,
+                                  margin: "0 auto",
+                                  justifyContent: "center",
+                                }}
+                              >
+                                <MediaAreaForSight
+                                  onFinishUpload={(mediaId) => {
+                                    linkPreviewMedia(mediaId);
+                                  }}
+                                  onFilesDrop={() => {}}
+                                  contextObjectName={sight[language].name}
+                                  contextType="sight"
+                                  isArticle={false}
+                                />
+                              </Box>
+                            </Box>
+                          )}
+                        </Box>
+                      )}
+                    </>
                  </Box>
                ) : (
                  <Box className="w-[80%] h-[70vh] border border-gray-300 rounded-2xl p-3 flex justify-center items-center">
--- a/src/widgets/SightTabs/RightWidgetTab/index.tsx
+++ b/src/widgets/SightTabs/RightWidgetTab/index.tsx
@@ -415,21 +415,12 @@ export const RightWidgetTab = observer(
                                      media_type: previewMedia.media_type,
                                      filename: previewMedia.filename || "",
                                    }}
+                                    fullWidth
+                                    fullHeight
                                  />
                                </Box>
                              </>
                            )}
-                            {!previewMedia && (
-                              <MediaAreaForSight
-                                onFinishUpload={(mediaId) => {
-                                  linkPreviewMedia(mediaId);
-                                }}
-                                onFilesDrop={() => {}}
-                                contextObjectName={sight[language].name}
-                                contextType="sight"
-                                isArticle={false}
-                              />
-                            )}
                          </Box>
                        )}
                      </>