fix: Fix Map page

src/pages/City/CityCreatePage/index.tsx

@@ -9,14 +9,18 @@ import {
   Box,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save, ImagePlus } from "lucide-react";
+import { ArrowLeft, Save, ImagePlus, Minus } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import { cityStore, countryStore, languageStore, mediaStore } from "@shared";
 import { useState, useEffect } 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 CityCreatePage = observer(() => {
   const navigate = useNavigate();
@@ -24,12 +28,20 @@ export const CityCreatePage = observer(() => {
   const { createCityData, setCreateCityData } = cityStore;
   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 { getCountries } = countryStore;
   const { getMedia } = mediaStore;
 
   useEffect(() => {
     (async () => {
-      await getCountries(language);
+      await getCountries("ru");
+      await getCountries("en");
+      await getCountries("zh");
       await getMedia();
     })();
   }, [language]);
@@ -55,7 +67,6 @@ export const CityCreatePage = observer(() => {
   }) => {
     setCreateCityData(
       createCityData[language].name,
-      createCityData.country,
       createCityData.country_code,
       media.id,
       language
@@ -80,6 +91,9 @@ export const CityCreatePage = 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">Создание города</h1>
+        </div>
         <TextField
           fullWidth
           label="Название города"
@@ -88,7 +102,6 @@ export const CityCreatePage = observer(() => {
           onChange={(e) =>
             setCreateCityData(
               e.target.value,
-              createCityData.country,
               createCityData.country_code,
               createCityData.arms,
               language
@@ -103,19 +116,15 @@ export const CityCreatePage = observer(() => {
             label="Страна"
             required
             onChange={(e) => {
-              const selectedCountry = countryStore.countries[language]?.find(
-                (country) => country.code === e.target.value
-              );
               setCreateCityData(
                 createCityData[language].name,
-                selectedCountry?.name || "",
                 e.target.value,
                 createCityData.arms,
                 language
               );
             }}
           >
-            {countryStore.countries[language].map((country) => (
+            {countryStore.countries["ru"]?.data?.map((country) => (
               <MenuItem key={country.code} value={country.code}>
                 {country.name}
               </MenuItem>
@@ -123,44 +132,39 @@ export const CityCreatePage = 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">
+          {!selectedMedia && (
+            <div className="flex items-center gap-2 text-red-500">
+              <Minus size={20} />
+              <span className="text-sm">Герб города не выбран</span>
+            </div>
           )}
+          <ImageUploadCard
+            title="Герб города"
+            imageKey="thumbnail"
+            imageUrl={selectedMedia?.id}
+            onImageClick={() => {
+              setIsPreviewMediaOpen(true);
+              setMediaId(selectedMedia?.id ?? "");
+            }}
+            onDeleteImageClick={() => {
+              setCreateCityData(
+                createCityData[language].name,
+                createCityData.country_code,
+                "",
+                language
+              );
+              setActiveMenuType(null);
+            }}
+            onSelectFileClick={() => {
+              setActiveMenuType("thumbnail");
+              setIsSelectMediaOpen(true);
+            }}
+            setUploadMediaOpen={() => {
+              setIsUploadMediaOpen(true);
+              setActiveMenuType("thumbnail");
+            }}
+          />
         </div>
 
         <Button
@@ -184,6 +188,19 @@ export const CityCreatePage = observer(() => {
         onSelectMedia={handleMediaSelect}
         mediaType={3} // Тип медиа для иконок
       />
+
+      <UploadMediaDialog
+        open={isUploadMediaOpen}
+        onClose={() => setIsUploadMediaOpen(false)}
+        afterUpload={handleMediaSelect}
+        hardcodeType={activeMenuType}
+      />
+
+      <PreviewMediaDialog
+        open={isPreviewMediaOpen}
+        onClose={() => setIsPreviewMediaOpen(false)}
+        mediaId={mediaId}
+      />
     </Paper>
   );
 });