fix: Fix Map page

src/pages/City/CityEditPage/index.tsx

@@ -21,13 +21,23 @@ import {
   CashedCities,
 } from "@shared";
 import { useEffect, useState } from "react";
-import { LanguageSwitcher, MediaViewer } from "@widgets";
-import { SelectMediaDialog } from "@shared";
+import { LanguageSwitcher, MediaViewer, ImageUploadCard } from "@widgets";
+import {
+  SelectMediaDialog,
+  UploadMediaDialog,
+  PreviewMediaDialog,
+} from "@shared";
 
 export const CityEditPage = observer(() => {
   const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
   const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
+  const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
+  const [mediaId, setMediaId] = useState("");
+  const [activeMenuType, setActiveMenuType] = useState<
+    "thumbnail" | "watermark_lu" | "watermark_rd" | null
+  >(null);
   const { language } = languageStore;
   const { id } = useParams();
   const { editCityData, editCity, getCity, setEditCityData } = cityStore;
@@ -49,20 +59,22 @@ export const CityEditPage = observer(() => {
   useEffect(() => {
     (async () => {
       if (id) {
-        const data = await getCity(id as string, language);
-        setEditCityData(
-          data.name,
-          data.country,
-          data.country_code,
-          data.arms,
-          language
-        );
-        await getOneMedia(data.arms as string);
+        // Fetch data for all languages
+        const ruData = await getCity(id as string, "ru");
+        const enData = await getCity(id as string, "en");
+        const zhData = await getCity(id as string, "zh");
+
+        // Set data for each language
+        setEditCityData(ruData.name, ruData.country_code, ruData.arms, "ru");
+        setEditCityData(enData.name, enData.country_code, enData.arms, "en");
+        setEditCityData(zhData.name, zhData.country_code, zhData.arms, "zh");
+
+        await getOneMedia(ruData.arms as string);
         await getCountries(language);
         await getMedia();
       }
     })();
-  }, [id, language]);
+  }, [id]);
 
   const handleMediaSelect = (media: {
     id: string;
@@ -72,7 +84,6 @@ export const CityEditPage = observer(() => {
   }) => {
     setEditCityData(
       editCityData[language].name,
-      editCityData.country,
       editCityData.country_code,
       media.id,
       language
@@ -97,6 +108,9 @@ export const CityEditPage = observer(() => {
       </div>
 
       <div className="flex flex-col gap-10 w-full items-end">
+        <div className="flex gap-10 items-center mb-5 max-w-[80%]">
+          <h1 className="text-3xl break-words">{editCityData.ru.name}</h1>
+        </div>
         <TextField
           fullWidth
           label="Название"
@@ -105,7 +119,6 @@ export const CityEditPage = observer(() => {
           onChange={(e) =>
             setEditCityData(
               e.target.value,
-              editCityData.country,
               editCityData.country_code,
               editCityData.arms,
               language
@@ -120,19 +133,15 @@ export const CityEditPage = observer(() => {
             label="Страна"
             required
             onChange={(e) => {
-              const selectedCountry = countryStore.countries[language]?.find(
-                (country) => country.code === e.target.value
-              );
               setEditCityData(
-                editCityData[language as keyof CashedCities]?.name || "",
-                selectedCountry?.name || "",
+                editCityData[language].name,
                 e.target.value,
                 editCityData.arms,
                 language
               );
             }}
           >
-            {countryStore.countries[language].map((country) => (
+            {countryStore.countries[language].data.map((country) => (
               <MenuItem key={country.code} value={country.code}>
                 {country.name}
               </MenuItem>
@@ -140,44 +149,33 @@ export const CityEditPage = observer(() => {
           </Select>
         </FormControl>
 
-        <div className="w-full flex flex-col gap-4">
-          <label className="text-sm text-gray-600">Герб города</label>
-          <div className="flex items-center gap-4">
-            <Button
-              variant="outlined"
-              onClick={() => setIsSelectMediaOpen(true)}
-              startIcon={<ImagePlus size={20} />}
-            >
-              Выбрать герб
-            </Button>
-            {selectedMedia && (
-              <span className="text-sm text-gray-600">
-                {selectedMedia.media_name || selectedMedia.filename}
-              </span>
-            )}
-          </div>
-          {selectedMedia && (
-            <Box
-              sx={{
-                width: "200px",
-                height: "200px",
-                border: "1px solid #e0e0e0",
-                borderRadius: "8px",
-                overflow: "hidden",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              <MediaViewer
-                media={{
-                  id: selectedMedia.id,
-                  media_type: selectedMedia.media_type,
-                  filename: selectedMedia.filename,
-                }}
-              />
-            </Box>
-          )}
+        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
+          <ImageUploadCard
+            title="Герб города"
+            imageKey="thumbnail"
+            imageUrl={selectedMedia?.id}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(selectedMedia?.id ?? "");
+            }}
+            onDeleteImageClick={() => {
+              setEditCityData(
+                editCityData[language].name,
+                editCityData.country_code,
+                "",
+                language
+              );
+              setActiveMenuType(null);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("thumbnail");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("thumbnail");
+            }}
+          />
         </div>
 
         <Button
@@ -201,6 +199,20 @@ export const CityEditPage = observer(() => {
         open={isSelectMediaOpen}
         onClose={() => setIsSelectMediaOpen(false)}
         onSelectMedia={handleMediaSelect}
+        mediaType={3} // Тип медиа для иконок
+      />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
       />
     </Paper>
   );