fix: Fix Map page

src/shared/store/CityStore/index.ts

@@ -4,6 +4,7 @@ import {
   Language,
   languageStore,
   countryStore,
+  CashedCountries,
 } from "@shared";
 import { makeAutoObservable, runInAction } from "mobx";
 
@@ -16,9 +17,18 @@ export type City = {
 };
 
 export type CashedCities = {
-  ru: City[];
-  en: City[];
-  zh: City[];
+  ru: {
+    data: City[];
+    loaded: boolean;
+  };
+  en: {
+    data: City[];
+    loaded: boolean;
+  };
+  zh: {
+    data: City[];
+    loaded: boolean;
+  };
 };
 
 export type CashedCity = {
@@ -29,9 +39,18 @@ export type CashedCity = {
 
 class CityStore {
   cities: CashedCities = {
-    ru: [],
-    en: [],
-    zh: [],
+    ru: {
+      data: [],
+      loaded: false,
+    },
+    en: {
+      data: [],
+      loaded: false,
+    },
+    zh: {
+      data: [],
+      loaded: false,
+    },
   };
 
   city: Record<string, CashedCity> = {};
@@ -40,25 +59,37 @@ class CityStore {
     makeAutoObservable(this);
   }
 
-  ruCities: City[] = [];
+  ruCities: {
+    data: City[];
+    loaded: boolean;
+  } = {
+    data: [],
+    loaded: false,
+  };
 
   getRuCities = async () => {
+    if (this.ruCities.loaded) {
+      return;
+    }
+
     const response = await languageInstance("ru").get(`/city`);
 
     runInAction(() => {
-      this.ruCities = response.data;
+      this.ruCities.data = response.data;
+      this.ruCities.loaded = true;
     });
   };
 
   getCities = async (language: keyof CashedCities) => {
-    if (this.cities[language] && this.cities[language].length > 0) {
+    if (this.cities[language].loaded) {
       return;
     }
 
     const response = await authInstance.get(`/city`);
 
     runInAction(() => {
-      this.cities[language] = response.data;
+      this.cities[language].data = response.data;
+      this.cities[language].loaded = true;
     });
   };
 
@@ -83,19 +114,22 @@ class CityStore {
     return response.data;
   };
 
-  deleteCity = async (code: string, language: keyof CashedCities) => {
+  deleteCity = async (code: string) => {
     await authInstance.delete(`/city/${code}`);
 
     runInAction(() => {
-      this.cities[language] = this.cities[language].filter(
-        (city) => city.country_code !== code
-      );
-      this.city[code][language] = null;
+      for (const secondaryLanguage of ["ru", "en", "zh"] as Language[]) {
+        this.cities[secondaryLanguage].data = this.cities[
+          secondaryLanguage
+        ].data.filter((city) => city.id !== Number(code));
+        if (this.city[code]) {
+          this.city[code][secondaryLanguage] = null;
+        }
+      }
     });
   };
 
   createCityData = {
-    country: "",
     country_code: "",
     arms: "",
     ru: {
@@ -111,14 +145,12 @@ class CityStore {
 
   setCreateCityData = (
     name: string,
-    country: string,
     country_code: string,
     arms: string,
     language: keyof CashedCities
   ) => {
     this.createCityData = {
       ...this.createCityData,
-      country: country,
       country_code: country_code,
       arms: arms,
       [language]: {
@@ -127,73 +159,84 @@ class CityStore {
     };
   };
 
-  createCity = async () => {
-    const { language } = languageStore;
-    const { country, country_code, arms } = this.createCityData;
-    const { name } = this.createCityData[language as keyof CashedCities];
+  async createCity() {
+    const language = languageStore.language as Language;
+    const { country_code, arms } = this.createCityData;
+    const { name } = this.createCityData[language];
 
-    if (name && country && country_code && arms) {
-      const cityResponse = await languageInstance(language as Language).post(
-        "/city",
-        {
-          name: name,
-          country: country,
-          country_code: country_code,
-          arms: arms,
-        }
-      );
+    if (!name || !country_code) {
+      return;
+    }
 
-      runInAction(() => {
-        this.cities[language as keyof CashedCities] = [
-          ...this.cities[language as keyof CashedCities],
-          cityResponse.data,
-        ];
+    try {
+      // Create city in primary language
+      const cityResponse = await languageInstance(language).post("/city", {
+        name,
+        country:
+          countryStore.countries[language as keyof CashedCountries]?.data.find(
+            (c) => c.code === country_code
+          )?.name || "",
+        country_code,
+        arms: arms || "",
       });
 
-      for (const secondaryLanguage of ["ru", "en", "zh"].filter(
+      const cityId = cityResponse.data.id;
+
+      // Create/update other language versions
+      for (const secondaryLanguage of (["ru", "en", "zh"] as Language[]).filter(
         (l) => l !== language
       )) {
-        const { name } =
-          this.createCityData[secondaryLanguage as keyof CashedCities];
+        const { name: secondaryName } = this.createCityData[secondaryLanguage];
 
-        const patchResponse = await languageInstance(
-          secondaryLanguage as Language
-        ).patch(`/city/${cityResponse.data.id}`, {
-          name: name,
-          country: country,
-          country_code: country_code,
-          arms: arms,
-        });
+        // Get country name in secondary language
+        const countryName =
+          countryStore.countries[secondaryLanguage]?.data.find(
+            (c) => c.code === country_code
+          )?.name || "";
+
+        const patchResponse = await languageInstance(secondaryLanguage).patch(
+          `/city/${cityId}`,
+          {
+            name: secondaryName || "",
+            country: countryName,
+            country_code: country_code || "",
+            arms: arms || "",
+          }
+        );
 
         runInAction(() => {
-          this.cities[secondaryLanguage as keyof CashedCities] = [
-            ...this.cities[secondaryLanguage as keyof CashedCities],
+          this.cities[secondaryLanguage].data = [
+            ...this.cities[secondaryLanguage].data,
             patchResponse.data,
           ];
         });
       }
-    }
 
-    runInAction(() => {
-      this.createCityData = {
-        country: "",
-        country_code: "",
-        arms: "",
-        ru: {
-          name: "",
-        },
-        en: {
-          name: "",
-        },
-        zh: {
-          name: "",
-        },
-      };
-    });
-  };
+      // Update primary language data
+      runInAction(() => {
+        this.cities[language].data = [
+          ...this.cities[language].data,
+          cityResponse.data,
+        ];
+      });
+
+      // Reset form data
+      runInAction(() => {
+        this.createCityData = {
+          country_code: "",
+          arms: "",
+          ru: { name: "" },
+          en: { name: "" },
+          zh: { name: "" },
+        };
+      });
+    } catch (error) {
+      console.error("Error creating city:", error);
+      throw error;
+    }
+  }
 
   editCityData = {
-    country: "",
     country_code: "",
     arms: "",
     ru: {
@@ -209,14 +252,12 @@ class CityStore {
 
   setEditCityData = (
     name: string,
-    country: string,
     country_code: string,
     arms: string,
     language: keyof CashedCities
   ) => {
     this.editCityData = {
       ...this.editCityData,
-      country: country,
       country_code: country_code,
       arms: arms,
 
@@ -232,7 +273,7 @@ class CityStore {
       const { name } = this.editCityData[language as keyof CashedCities];
       const { countries } = countryStore;
 
-      const country = countries[language as keyof CashedCities].find(
+      const country = countries[language as keyof CashedCities].data.find(
         (country) => country.code === country_code
       );
 
@@ -255,9 +296,9 @@ class CityStore {
           }
 
           if (this.cities[language as keyof CashedCities]) {
-            this.cities[language as keyof CashedCities] = this.cities[
+            this.cities[language as keyof CashedCities].data = this.cities[
               language as keyof CashedCities
-            ].map((city) =>
+            ].data.map((city) =>
               city.id === Number(code)
                 ? {
                     id: city.id,