feat: Add edit pages with cache

src/shared/store/CityStore/fd.tsx

@@ -70,4 +70,4 @@ class CityStore {
   };
 }
 
-export const cityStore = new CityStore();
+// export const cityStore = new CityStore();

src/shared/store/CityStore/index.ts

@@ -0,0 +1,266 @@
+import {
+  authInstance,
+  languageInstance,
+  Language,
+  languageStore,
+  countryStore,
+} from "@shared";
+import { makeAutoObservable, runInAction } from "mobx";
+
+export type City = {
+  id?: number;
+  name: string;
+  country: string;
+  country_code: string;
+  arms: string;
+};
+
+export type CashedCities = {
+  ru: City[];
+  en: City[];
+  zh: City[];
+};
+
+export type CashedCity = {
+  ru: City | null;
+  en: City | null;
+  zh: City | null;
+};
+
+class CityStore {
+  cities: CashedCities = {
+    ru: [],
+    en: [],
+    zh: [],
+  };
+
+  city: Record<string, CashedCity> = {};
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  getCities = async (language: keyof CashedCities) => {
+    if (this.cities[language] && this.cities[language].length > 0) {
+      return;
+    }
+
+    const response = await authInstance.get(`/city`);
+
+    runInAction(() => {
+      this.cities[language] = response.data;
+    });
+  };
+
+  getCity = async (code: string, language: keyof CashedCities) => {
+    if (this.city[code]?.[language] && this.city[code][language] !== null) {
+      return;
+    }
+
+    const response = await authInstance.get(`/city/${code}`);
+
+    runInAction(() => {
+      if (!this.city[code]) {
+        this.city[code] = {
+          ru: null,
+          en: null,
+          zh: null,
+        };
+      }
+      this.city[code][language] = response.data;
+    });
+
+    return response.data;
+  };
+
+  deleteCity = async (code: string, language: keyof CashedCities) => {
+    await authInstance.delete(`/city/${code}`);
+
+    runInAction(() => {
+      this.cities[language] = this.cities[language].filter(
+        (city) => city.country_code !== code
+      );
+      this.city[code][language] = null;
+    });
+  };
+
+  createCityData = {
+    country: "",
+    country_code: "",
+    arms: "",
+    ru: {
+      name: "",
+    },
+    en: {
+      name: "",
+    },
+    zh: {
+      name: "",
+    },
+  };
+
+  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]: {
+        name: name,
+      },
+    };
+  };
+
+  createCity = async () => {
+    const { language } = languageStore;
+    const { country, country_code, arms } = this.createCityData;
+    const { name } = this.createCityData[language as keyof CashedCities];
+
+    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,
+        }
+      );
+
+      runInAction(() => {
+        this.cities[language as keyof CashedCities] = [
+          ...this.cities[language as keyof CashedCities],
+          cityResponse.data,
+        ];
+      });
+
+      for (const secondaryLanguage of ["ru", "en", "zh"].filter(
+        (l) => l !== language
+      )) {
+        const { name } =
+          this.createCityData[secondaryLanguage as keyof CashedCities];
+
+        const patchResponse = await languageInstance(
+          secondaryLanguage as Language
+        ).patch(`/city/${cityResponse.data.id}`, {
+          name: name,
+          country: country,
+          country_code: country_code,
+          arms: arms,
+        });
+
+        runInAction(() => {
+          this.cities[secondaryLanguage as keyof CashedCities] = [
+            ...this.cities[secondaryLanguage as keyof CashedCities],
+            patchResponse.data,
+          ];
+        });
+      }
+    }
+
+    runInAction(() => {
+      this.createCityData = {
+        country: "",
+        country_code: "",
+        arms: "",
+        ru: {
+          name: "",
+        },
+        en: {
+          name: "",
+        },
+        zh: {
+          name: "",
+        },
+      };
+    });
+  };
+
+  editCityData = {
+    country: "",
+    country_code: "",
+    arms: "",
+    ru: {
+      name: "",
+    },
+    en: {
+      name: "",
+    },
+    zh: {
+      name: "",
+    },
+  };
+
+  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,
+
+      [language]: {
+        name: name,
+      },
+    };
+  };
+
+  editCity = async (code: string) => {
+    for (const language of ["ru", "en", "zh"]) {
+      const { country_code, arms } = this.editCityData;
+      const { name } = this.editCityData[language as keyof CashedCities];
+      const { countries } = countryStore;
+
+      const country = countries[language as keyof CashedCities].find(
+        (country) => country.code === country_code
+      );
+
+      await languageInstance(language as Language).patch(`/city/${code}`, {
+        name,
+        country: country?.name || "",
+        country_code: country_code,
+        arms,
+      });
+
+      runInAction(() => {
+        if (this.city[code]) {
+          this.city[code][language as keyof CashedCities] = {
+            name,
+            country: country?.name || "",
+            country_code: country_code,
+            arms,
+          };
+        }
+
+        if (this.cities[language as keyof CashedCities]) {
+          this.cities[language as keyof CashedCities] = this.cities[
+            language as keyof CashedCities
+          ].map((city) =>
+            city.id === Number(code)
+              ? {
+                  id: city.id,
+                  name,
+                  country: country?.name || "",
+                  country_code: country_code,
+                  arms,
+                }
+              : city
+          );
+        }
+      });
+    }
+  };
+}
+
+export const cityStore = new CityStore();