feat: Add edit pages with cache

src/pages/City/CityCreatePage/index.tsx

@@ -13,33 +13,31 @@ import { ArrowLeft, Save, ImagePlus } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import { cityStore, countryStore, mediaStore } from "@shared";
+import { cityStore, countryStore, languageStore, mediaStore } from "@shared";
 import { useState, useEffect } from "react";
 import { LanguageSwitcher, MediaViewer } from "@widgets";
 import { SelectMediaDialog } from "@shared";
 
 export const CityCreatePage = observer(() => {
   const navigate = useNavigate();
-  const [name, setName] = useState("");
-  const [countryCode, setCountryCode] = useState("");
-  const [selectedMediaId, setSelectedMediaId] = useState<string | null>(null);
+  const { language } = languageStore;
+  const { createCityData, setCreateCityData } = cityStore;
   const [isLoading, setIsLoading] = useState(false);
   const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
+  const { getCountries } = countryStore;
+  const { getMedia } = mediaStore;
 
   useEffect(() => {
-    countryStore.getCountries();
-    mediaStore.getMedia();
-  }, []);
+    (async () => {
+      await getCountries(language);
+      await getMedia();
+    })();
+  }, [language]);
 
   const handleCreate = async () => {
     try {
       setIsLoading(true);
-      await cityStore.createCity(
-        name,
-        countryStore.countries.find((c) => c.code === countryCode)?.name!,
-        countryCode,
-        selectedMediaId!
-      );
+      await cityStore.createCity();
       toast.success("Город успешно создан");
       navigate("/city");
     } catch (error) {
@@ -55,11 +53,17 @@ export const CityCreatePage = observer(() => {
     media_name?: string;
     media_type: number;
   }) => {
-    setSelectedMediaId(media.id);
+    setCreateCityData(
+      createCityData[language].name,
+      createCityData.country,
+      createCityData.country_code,
+      media.id,
+      language
+    );
   };
 
-  const selectedMedia = selectedMediaId
-    ? mediaStore.media.find((m) => m.id === selectedMediaId)
+  const selectedMedia = createCityData.arms
+    ? mediaStore.media.find((m) => m.id === createCityData.arms)
     : null;
 
   return (
@@ -79,20 +83,39 @@ export const CityCreatePage = observer(() => {
         <TextField
           fullWidth
           label="Название города"
-          value={name}
+          value={createCityData[language]?.name || ""}
           required
-          onChange={(e) => setName(e.target.value)}
+          onChange={(e) =>
+            setCreateCityData(
+              e.target.value,
+              createCityData.country,
+              createCityData.country_code,
+              createCityData.arms,
+              language
+            )
+          }
         />
 
         <FormControl fullWidth>
           <InputLabel>Страна</InputLabel>
           <Select
-            value={countryCode}
+            value={createCityData.country_code || ""}
             label="Страна"
             required
-            onChange={(e) => setCountryCode(e.target.value)}
+            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.map((country) => (
+            {countryStore.countries[language].map((country) => (
               <MenuItem key={country.code} value={country.code}>
                 {country.name}
               </MenuItem>
@@ -145,7 +168,7 @@ export const CityCreatePage = observer(() => {
           className="w-min flex gap-2 items-center"
           startIcon={<Save size={20} />}
           onClick={handleCreate}
-          disabled={isLoading || !name || !countryCode}
+          disabled={isLoading || !createCityData[language]?.name}
         >
           {isLoading ? (
             <Loader2 size={20} className="animate-spin" />