feat: Add carriers translation on 3 languages

src/pages/Carrier/CarrierEditPage/index.tsx

@@ -12,9 +12,9 @@ import { ArrowLeft, Save } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
-import { carrierStore, cityStore, mediaStore } from "@shared";
+import { carrierStore, cityStore, mediaStore, languageStore } from "@shared";
 import { useState, useEffect } from "react";
-import { MediaViewer, ImageUploadCard } from "@widgets";
+import { ImageUploadCard, LanguageSwitcher } from "@widgets";
 import {
   SelectMediaDialog,
   UploadMediaDialog,
@@ -24,8 +24,8 @@ import {
 export const CarrierEditPage = observer(() => {
   const navigate = useNavigate();
   const { id } = useParams();
-  const { carrier, getCarrier, setEditCarrierData, editCarrierData } =
-    carrierStore;
+  const { getCarrier, setEditCarrierData, editCarrierData } = carrierStore;
+  const { language } = languageStore;
 
   const [isLoading, setIsLoading] = useState(false);
   const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
@@ -41,16 +41,34 @@ export const CarrierEditPage = observer(() => {
       await cityStore.getCities("ru");
       await cityStore.getCities("en");
       await cityStore.getCities("zh");
-      await getCarrier(Number(id));
+      const carrierData = await getCarrier(Number(id));
 
-      setEditCarrierData(
-        carrier?.[Number(id)]?.full_name as string,
-        carrier?.[Number(id)]?.short_name as string,
-
-        carrier?.[Number(id)]?.city_id as number,
-        carrier?.[Number(id)]?.slogan as string,
-        carrier?.[Number(id)]?.logo as string
-      );
+      if (carrierData) {
+        setEditCarrierData(
+          carrierData.ru?.full_name || "",
+          carrierData.ru?.short_name || "",
+          carrierData.ru?.city_id || 0,
+          carrierData.ru?.slogan || "",
+          carrierData.ru?.logo || "",
+          "ru"
+        );
+        setEditCarrierData(
+          carrierData.en?.full_name || "",
+          carrierData.en?.short_name || "",
+          carrierData.en?.city_id || 0,
+          carrierData.en?.slogan || "",
+          carrierData.en?.logo || "",
+          "en"
+        );
+        setEditCarrierData(
+          carrierData.zh?.full_name || "",
+          carrierData.zh?.short_name || "",
+          carrierData.zh?.city_id || 0,
+          carrierData.zh?.slogan || "",
+          carrierData.zh?.logo || "",
+          "zh"
+        );
+      }
 
       mediaStore.getMedia();
     })();
@@ -76,12 +94,12 @@ export const CarrierEditPage = observer(() => {
     media_type: number;
   }) => {
     setEditCarrierData(
-      editCarrierData.full_name,
-      editCarrierData.short_name,
-
+      editCarrierData[language].full_name,
+      editCarrierData[language].short_name,
       editCarrierData.city_id,
-      editCarrierData.slogan,
-      media.id
+      editCarrierData[language].slogan,
+      media.id,
+      language
     );
   };
 
@@ -91,6 +109,7 @@ export const CarrierEditPage = observer(() => {
 
   return (
     <Paper className="w-full h-full p-3 flex flex-col gap-10">
+      <LanguageSwitcher />
       <div className="flex items-center gap-4">
         <button
           className="flex items-center gap-2"
@@ -101,6 +120,9 @@ export const CarrierEditPage = observer(() => {
         </button>
       </div>
 
+      <div className="flex gap-10 items-center mb-5 max-w-[80%] self-start">
+        <h1 className="text-3xl break-words">{editCarrierData.ru.full_name}</h1>
+      </div>
       <div className="flex flex-col gap-10 w-full items-end">
         <FormControl fullWidth>
           <InputLabel>Город</InputLabel>
@@ -110,15 +132,16 @@ export const CarrierEditPage = observer(() => {
             required
             onChange={(e) =>
               setEditCarrierData(
-                editCarrierData.full_name,
-                editCarrierData.short_name,
+                editCarrierData[language].full_name,
+                editCarrierData[language].short_name,
                 Number(e.target.value),
-                editCarrierData.slogan,
-                editCarrierData.logo
+                editCarrierData[language].slogan,
+                editCarrierData.logo,
+                language
               )
             }
           >
-            {cityStore.cities.ru.data?.map((city) => (
+            {cityStore.cities[language].data?.map((city) => (
               <MenuItem key={city.id} value={city.id}>
                 {city.name}
               </MenuItem>
@@ -129,16 +152,16 @@ export const CarrierEditPage = observer(() => {
         <TextField
           fullWidth
           label="Полное название"
-          value={editCarrierData.full_name}
+          value={editCarrierData[language].full_name}
           required
           onChange={(e) =>
             setEditCarrierData(
               e.target.value,
-              editCarrierData.short_name,
-
+              editCarrierData[language].short_name,
               editCarrierData.city_id,
-              editCarrierData.slogan,
-              editCarrierData.logo
+              editCarrierData[language].slogan,
+              editCarrierData.logo,
+              language
             )
           }
         />
@@ -146,16 +169,16 @@ export const CarrierEditPage = observer(() => {
         <TextField
           fullWidth
           label="Короткое название"
-          value={editCarrierData.short_name}
+          value={editCarrierData[language].short_name}
           required
           onChange={(e) =>
             setEditCarrierData(
-              editCarrierData.full_name,
+              editCarrierData[language].full_name,
               e.target.value,
-
               editCarrierData.city_id,
-              editCarrierData.slogan,
-              editCarrierData.logo
+              editCarrierData[language].slogan,
+              editCarrierData.logo,
+              language
             )
           }
         />
@@ -163,15 +186,15 @@ export const CarrierEditPage = observer(() => {
         <TextField
           fullWidth
           label="Слоган"
-          value={editCarrierData.slogan}
+          value={editCarrierData[language].slogan}
           onChange={(e) =>
             setEditCarrierData(
-              editCarrierData.full_name,
-              editCarrierData.short_name,
-
+              editCarrierData[language].full_name,
+              editCarrierData[language].short_name,
               editCarrierData.city_id,
               e.target.value,
-              editCarrierData.logo
+              editCarrierData.logo,
+              language
             )
           }
         />
@@ -187,12 +210,12 @@ export const CarrierEditPage = observer(() => {
             }}
             onDeleteImageClick={() => {
               setEditCarrierData(
-                editCarrierData.full_name,
-                editCarrierData.short_name,
-
+                editCarrierData[language].full_name,
+                editCarrierData[language].short_name,
                 editCarrierData.city_id,
-                editCarrierData.slogan,
-                ""
+                editCarrierData[language].slogan,
+                "",
+                language
               );
               setActiveMenuType(null);
             }}
@@ -214,8 +237,8 @@ export const CarrierEditPage = observer(() => {
           onClick={handleEdit}
           disabled={
             isLoading ||
-            !editCarrierData.full_name ||
-            !editCarrierData.short_name ||
+            !editCarrierData[language].full_name ||
+            !editCarrierData[language].short_name ||
             !editCarrierData.city_id ||
             !editCarrierData.logo
           }