feat: Add carriers translation on 3 languages

src/shared/store/CarrierStore/index.tsx

@@ -1,4 +1,10 @@
-import { authInstance, cityStore, languageStore } from "@shared";
+import {
+  authInstance,
+  cityStore,
+  languageStore,
+  languageInstance,
+  Language,
+} from "@shared";
 import { makeAutoObservable, runInAction } from "mobx";
 
 export type Carrier = {
@@ -14,17 +20,40 @@ export type Carrier = {
   // right_color: string;
 };
 
-type Carriers = {
+type CarrierData = {
   data: Carrier[];
   loaded: boolean;
 };
 
-type CashedCarrier = Record<number, Carrier>;
+type Carriers = {
+  ru: CarrierData;
+  en: CarrierData;
+  zh: CarrierData;
+};
+
+type CashedCarrier = Record<
+  number,
+  {
+    ru: Carrier | null;
+    en: Carrier | null;
+    zh: Carrier | null;
+  }
+>;
 
 class CarrierStore {
   carriers: Carriers = {
-    data: [],
-    loaded: false,
+    ru: {
+      data: [],
+      loaded: false,
+    },
+    en: {
+      data: [],
+      loaded: false,
+    },
+    zh: {
+      data: [],
+      loaded: false,
+    },
   };
   carrier: CashedCarrier = {};
 
@@ -32,14 +61,14 @@ class CarrierStore {
     makeAutoObservable(this);
   }
 
-  getCarriers = async () => {
-    if (this.carriers.loaded) return;
+  getCarriers = async (language: Language) => {
+    if (this.carriers[language as keyof Carriers].loaded) return;
 
     const response = await authInstance.get("/carrier");
 
     runInAction(() => {
-      this.carriers.data = response.data;
-      this.carriers.loaded = true;
+      this.carriers[language as keyof Carriers].data = response.data;
+      this.carriers[language as keyof Carriers].loaded = true;
     });
   };
 
@@ -47,116 +76,163 @@ class CarrierStore {
     await authInstance.delete(`/carrier/${id}`);
 
     runInAction(() => {
-      this.carriers.data = this.carriers.data.filter(
-        (carrier) => carrier.id !== id
-      );
+      for (const language of ["ru", "en", "zh"] as const) {
+        this.carriers[language].data = this.carriers[language].data.filter(
+          (carrier: Carrier) => carrier.id !== id
+        );
+      }
       delete this.carrier[id];
     });
   };
 
   getCarrier = async (id: number) => {
-    if (this.carrier[id]) return;
-    const response = await authInstance.get(`/carrier/${id}`);
+    if (this.carrier[id]?.ru && this.carrier[id]?.en && this.carrier[id]?.zh)
+      return;
+
+    const ruResponse = await languageInstance("ru").get(`/carrier/${id}`);
+    const enResponse = await languageInstance("en").get(`/carrier/${id}`);
+    const zhResponse = await languageInstance("zh").get(`/carrier/${id}`);
 
     runInAction(() => {
       if (!this.carrier[id]) {
         this.carrier[id] = {
-          id: 0,
-          short_name: "",
-          full_name: "",
-          slogan: "",
-          city: "",
-          city_id: 0,
-          logo: "",
-          // main_color: "",
-          // left_color: "",
-          // right_color: "",
+          ru: null,
+          en: null,
+          zh: null,
         };
       }
-      this.carrier[id] = response.data;
+      this.carrier[id].ru = ruResponse.data;
+      this.carrier[id].en = enResponse.data;
+      this.carrier[id].zh = zhResponse.data;
     });
-    return response.data;
+    return this.carrier[id];
   };
 
   createCarrier = async (
     fullName: string,
     shortName: string,
-
     cityId: number,
-    // main_color: string,
-    // left_color: string,
-    // right_color: string,
     slogan: string,
     logoId: string
   ) => {
-    const response = await authInstance.post("/carrier", {
+    const { language } = languageStore;
+    const cityName =
+      cityStore.cities[language].data.find((city) => city.id === cityId)
+        ?.name || "";
+
+    const response = await languageInstance(language).post("/carrier", {
       full_name: fullName,
       short_name: shortName,
-      city: "",
+      city: cityName,
       city_id: cityId,
-      // main_color,
-      // left_color,
-      // right_color,
       slogan,
       logo: logoId,
     });
+
+    const carrierId = response.data.id;
+
+    // Create translations for other languages
+    for (const lang of ["ru", "en", "zh"].filter((l) => l !== language)) {
+      await languageInstance(lang as Language).patch(`/carrier/${carrierId}`, {
+        full_name: fullName,
+        short_name: shortName,
+        city: cityName,
+        city_id: cityId,
+        slogan,
+        logo: logoId,
+      });
+    }
+
     runInAction(() => {
-      this.carriers.data.push(response.data);
+      for (const language of ["ru", "en", "zh"] as const) {
+        this.carriers[language].data.push(response.data);
+      }
     });
   };
 
   editCarrierData = {
-    full_name: "",
-    short_name: "",
+    ru: {
+      full_name: "",
+      short_name: "",
 
+      // main_color: "",
+      // left_color: "",
+      // right_color: "",
+      slogan: "",
+    },
+    en: {
+      full_name: "",
+      short_name: "",
+
+      // main_color: "",
+      // left_color: "",
+      // right_color: "",
+      slogan: "",
+    },
     city_id: 0,
-    // main_color: "",
-    // left_color: "",
-    // right_color: "",
-    slogan: "",
     logo: "",
+    zh: {
+      full_name: "",
+      short_name: "",
+
+      // main_color: "",
+      // left_color: "",
+      // right_color: "",
+      slogan: "",
+    },
   };
 
   setEditCarrierData = (
     fullName: string,
     shortName: string,
-
     cityId: number,
     // main_color: string,
     // left_color: string,
     // right_color: string,
     slogan: string,
-    logoId: string
+    logoId: string,
+    language: Language
   ) => {
-    this.editCarrierData = {
+    this.editCarrierData.city_id = cityId;
+    this.editCarrierData.logo = logoId;
+    this.editCarrierData[language] = {
       full_name: fullName,
       short_name: shortName,
-
-      city_id: cityId,
       // main_color: main_color,
       // left_color: left_color,
       // right_color: right_color,
       slogan: slogan,
-      logo: logoId,
     };
   };
 
   editCarrier = async (id: number) => {
-    const { language } = languageStore;
-    const response = await authInstance.patch(`/carrier/${id}`, {
-      ...this.editCarrierData,
-      city: cityStore.cities[language].data.find(
+    const cityName =
+      cityStore.cities[languageStore.language].data.find(
         (city) => city.id === this.editCarrierData.city_id
-      )?.name,
-    });
+      )?.name || "";
 
-    runInAction(() => {
-      this.carriers.data = this.carriers.data.map((carrier) =>
-        carrier.id === id ? { ...carrier, ...response.data } : carrier
+    for (const language of ["ru", "en", "zh"] as const) {
+      const response = await languageInstance(language).patch(
+        `/carrier/${id}`,
+        {
+          ...this.editCarrierData[language],
+          city: cityName,
+          logo: this.editCarrierData.logo,
+        }
       );
 
-      this.carrier[id] = response.data;
-    });
+      runInAction(() => {
+        if (this.carrier[id]) {
+          this.carrier[id][language] = response.data;
+        }
+        for (const language of ["ru", "en", "zh"] as const) {
+          this.carriers[language].data = this.carriers[language].data.map(
+            (carrier: Carrier) =>
+              carrier.id === id ? { ...carrier, ...response.data } : carrier
+          );
+        }
+      });
+    }
   };
 }