feat: Add edit pages with cache

src/shared/store/CountryStore/index.ts

@@ -1,4 +1,9 @@
-import { authInstance } from "@shared";
+import {
+  authInstance,
+  languageInstance,
+  Language,
+  languageStore,
+} from "@shared";
 import { makeAutoObservable, runInAction } from "mobx";
 
 export type Country = {
@@ -6,43 +11,208 @@ export type Country = {
   name: string;
 };
 
+export type CashedCountries = {
+  ru: Country[];
+  en: Country[];
+  zh: Country[];
+};
+
+export type CashedCountry = {
+  ru: Country | null;
+  en: Country | null;
+  zh: Country | null;
+};
+
 class CountryStore {
-  countries: Country[] = [];
-  country: Country | null = null;
+  countries: CashedCountries = {
+    ru: [],
+    en: [],
+    zh: [],
+  };
+
+  country: Record<string, CashedCountry> = {};
 
   constructor() {
     makeAutoObservable(this);
   }
 
-  getCountries = async () => {
-    const response = await authInstance.get("/country");
+  getCountries = async (language: keyof CashedCountries) => {
+    if (this.countries[language] && this.countries[language].length > 0) {
+      return;
+    }
+
+    const response = await authInstance.get(`/country`);
 
     runInAction(() => {
-      this.countries = response.data;
+      this.countries[language] = response.data;
     });
   };
 
-  getCountry = async (code: string) => {
+  getCountry = async (code: string, language: keyof CashedCountries) => {
+    if (
+      this.country[code]?.[language] &&
+      this.country[code][language] !== null
+    ) {
+      return;
+    }
+
     const response = await authInstance.get(`/country/${code}`);
 
     runInAction(() => {
-      this.country = response.data;
+      if (!this.country[code]) {
+        this.country[code] = {
+          ru: null,
+          en: null,
+          zh: null,
+        };
+      }
+      this.country[code][language] = response.data;
     });
+
+    return response.data;
   };
 
-  deleteCountry = async (code: string) => {
+  deleteCountry = async (code: string, language: keyof CashedCountries) => {
     await authInstance.delete(`/country/${code}`);
 
     runInAction(() => {
-      this.countries = this.countries.filter(
+      this.countries[language] = this.countries[language].filter(
         (country) => country.code !== code
       );
+      this.country[code][language] = null;
     });
   };
 
-  createCountry = async (code: string, name: string) => {
-    await authInstance.post("/country", { code: code, name: name });
-    await this.getCountries();
+  createCountryData = {
+    code: "",
+    ru: {
+      name: "",
+    },
+    en: {
+      name: "",
+    },
+    zh: {
+      name: "",
+    },
+  };
+  setCountryData = (
+    code: string,
+    name: string,
+    language: keyof CashedCountries
+  ) => {
+    this.createCountryData = {
+      ...this.createCountryData,
+      code: code,
+      [language]: {
+        name: name,
+      },
+    };
+  };
+
+  createCountry = async () => {
+    const { code } = this.createCountryData;
+    const { language } = languageStore;
+    const { name } = this.createCountryData[language as keyof CashedCountries];
+
+    if (code && this.createCountryData[language].name) {
+      await languageInstance(language as Language).post("/country", {
+        code: code,
+        name: name,
+      });
+
+      runInAction(() => {
+        this.countries[language as keyof CashedCountries] = [
+          ...this.countries[language as keyof CashedCountries],
+          { code: code, name: name },
+        ];
+      });
+
+      for (const secondaryLanguage of ["ru", "en", "zh"].filter(
+        (l) => l !== language
+      )) {
+        const { name } =
+          this.createCountryData[secondaryLanguage as keyof CashedCountries];
+
+        if (name) {
+          await languageInstance(secondaryLanguage as Language).patch(
+            `/country/${code}`,
+            {
+              name: name,
+            }
+          );
+        }
+        runInAction(() => {
+          this.countries[secondaryLanguage as keyof CashedCountries] = [
+            ...this.countries[secondaryLanguage as keyof CashedCountries],
+            { code: code, name: name },
+          ];
+        });
+      }
+    }
+
+    runInAction(() => {
+      this.createCountryData = {
+        code: "",
+        ru: {
+          name: "",
+        },
+        en: {
+          name: "",
+        },
+        zh: {
+          name: "",
+        },
+      };
+    });
+  };
+
+  editCountryData = {
+    ru: {
+      name: "",
+    },
+    en: {
+      name: "",
+    },
+    zh: {
+      name: "",
+    },
+  };
+
+  setEditCountryData = (name: string, language: keyof CashedCountries) => {
+    this.editCountryData = {
+      ...this.editCountryData,
+      [language]: {
+        name: name,
+      },
+    };
+  };
+
+  editCountry = async (code: string) => {
+    for (const language of ["ru", "en", "zh"]) {
+      const { name } = this.editCountryData[language as keyof CashedCountries];
+
+      if (name) {
+        await languageInstance(language as Language).patch(`/country/${code}`, {
+          name: name,
+        });
+
+        runInAction(() => {
+          if (this.country[code]) {
+            this.country[code][language as keyof CashedCountries] = {
+              code,
+              name,
+            };
+          }
+          if (this.countries[language as keyof CashedCountries]) {
+            this.countries[language as keyof CashedCountries] = this.countries[
+              language as keyof CashedCountries
+            ].map((country) =>
+              country.code === code ? { code, name } : country
+            );
+          }
+        });
+      }
+    }
   };
 }