feat: Refactor old code with delete modal and icons for buttons

src/shared/modals/SelectMediaDialog/index.tsx

@@ -1,4 +1,4 @@
-import { mediaStore } from "@shared";
+import { Media, mediaStore } from "@shared";
 import { observer } from "mobx-react-lite";
 import { useEffect, useState } from "react";
 import {
@@ -29,6 +29,7 @@ interface SelectMediaDialogProps {
   }) => void; // Renamed from onSelectArticle
   onSelectForSightMedia?: (mediaId: string) => void;
   linkedMediaIds?: string[]; // Renamed from linkedArticleIds, assuming it refers to media already in use
+  mediaType?: number;
 }
 
 export const SelectMediaDialog = observer(
@@ -38,12 +39,29 @@ export const SelectMediaDialog = observer(
     onSelectMedia, // Renamed prop
     onSelectForSightMedia,
     linkedMediaIds = [], // Default to empty array if not provided, renamed
+    mediaType,
   }: SelectMediaDialogProps) => {
     const { media, getMedia } = mediaStore;
     const [searchQuery, setSearchQuery] = useState("");
     const [hoveredMediaId, setHoveredMediaId] = useState<string | null>(null);
+    const [currentHoveredMedia, setCurrentHoveredMedia] =
+      useState<Media | null>(null);
+
+    useEffect(() => {
+      if (hoveredMediaId) {
+        setCurrentHoveredMedia(
+          media.find((m) => m.id === hoveredMediaId) ?? null
+        );
+      }
+    }, [hoveredMediaId]);
+
+    const handleClose = () => {
+      setHoveredMediaId(null);
+      setCurrentHoveredMedia(null);
+      onClose();
+      setSearchQuery("");
+    };
 
-    // Fetch media on component mount
     useEffect(() => {
       getMedia();
     }, [getMedia]);
@@ -63,7 +81,7 @@ export const SelectMediaDialog = observer(
                 onSelectMedia(mediaItem);
               }
             }
-            onClose();
+            handleClose();
           }
         }
       };
@@ -74,19 +92,21 @@ export const SelectMediaDialog = observer(
       };
     }, [hoveredMediaId, onSelectMedia, onClose]); // Dependencies for keyboard listener
 
-    const filteredMedia = media
+    let filteredMedia = media
       .filter((mediaItem) => !linkedMediaIds.includes(mediaItem.id)) // Use mediaItem to avoid name collision
       .filter((mediaItem) =>
         mediaItem.media_name.toLowerCase().includes(searchQuery.toLowerCase())
       );
 
-    // Find the currently hovered media object for MediaViewer
-    const currentHoveredMedia = hoveredMediaId
-      ? media.find((m) => m.id === hoveredMediaId)
-      : null;
+    if (mediaType) {
+      filteredMedia = filteredMedia.filter(
+        (mediaItem) => mediaItem.media_type === mediaType
+      );
+      console.log(filteredMedia);
+    }
 
     return (
-      <Dialog open={open} onClose={onClose} maxWidth="lg" fullWidth>
+      <Dialog open={open} onClose={handleClose} maxWidth="lg" fullWidth>
         <DialogTitle>Выберите существующее медиа</DialogTitle>
         <DialogContent
           className="flex gap-4"
@@ -125,14 +145,22 @@ export const SelectMediaDialog = observer(
                         } else if (onSelectMedia) {
                           onSelectMedia(mediaItem);
                         }
-                        onClose();
+                        handleClose();
                       }}
+                      selected={hoveredMediaId === mediaItem.id}
                       sx={{
                         borderRadius: 1,
                         mb: 0.5,
                         "&:hover": {
                           backgroundColor: "action.hover",
                         },
+                        "&.Mui-selected": {
+                          backgroundColor: "primary.main",
+                          color: "primary.contrastText",
+                          "&:hover": {
+                            backgroundColor: "primary.dark",
+                          },
+                        },
                       }}
                     >
                       <ListItemText primary={mediaItem.media_name} />
@@ -149,7 +177,7 @@ export const SelectMediaDialog = observer(
               )}
             </List>
           </Paper>
-          {currentHoveredMedia ? ( // Only render MediaViewer if currentHoveredMedia is found
+          {currentHoveredMedia !== null && hoveredMediaId !== null ? ( // Only render MediaViewer if currentHoveredMedia is found
             <Paper className="w-[33%] h-[100%] flex justify-center items-center">
               <MediaViewer
                 media={{
@@ -167,8 +195,28 @@ export const SelectMediaDialog = observer(
             </Paper>
           )}
         </DialogContent>
-        <DialogActions>
-          <Button onClick={onClose}>Отмена</Button>
+
+        <DialogActions sx={{ p: 2 }}>
+          <Button onClick={handleClose}>Отмена</Button>
+          <Button
+            variant="contained"
+            onClick={() => {
+              if (hoveredMediaId) {
+                const mediaItem = media.find((m) => m.id === hoveredMediaId);
+                if (mediaItem) {
+                  if (onSelectForSightMedia) {
+                    onSelectForSightMedia(mediaItem.id);
+                  } else if (onSelectMedia) {
+                    onSelectMedia(mediaItem);
+                  }
+                }
+                handleClose();
+              }
+            }}
+            disabled={hoveredMediaId === null}
+          >
+            Выбрать
+          </Button>
         </DialogActions>
       </Dialog>
     );