station edit in the route edit page

src/pages/station/edit.tsx

@@ -15,6 +15,10 @@ import { Controller } from "react-hook-form";
 import { useParams } from "react-router";
 import { LinkedItems } from "../../components/LinkedItems";
 import { type SightItem, sightFields } from "./types";
+import { observer } from "mobx-react-lite";
+import { languageStore } from "../../store/LanguageStore";
+import { useEffect, useState } from "react";
+import { LanguageSwitch } from "../../components/LanguageSwitch/index";
 
 const TRANSFER_FIELDS = [
   { name: "bus", label: "Автобус" },
@@ -28,16 +32,126 @@ const TRANSFER_FIELDS = [
   { name: "trolleybus", label: "Троллейбус" },
 ];
 
-export const StationEdit = () => {
+export const StationEdit = observer(() => {
+  const { language, setLanguageAction } = languageStore;
+  const [stationData, setStationData] = useState({
+    ru: {
+      name: "",
+      system_name: "",
+      description: "",
+      address: "",
+      latitude: "",
+      longitude: "",
+    },
+    en: {
+      name: "",
+      system_name: "",
+      description: "",
+      address: "",
+      latitude: "",
+      longitude: "",
+    },
+    zh: {
+      name: "",
+      system_name: "",
+      description: "",
+      address: "",
+      latitude: "",
+      longitude: "",
+    },
+  });
+
+  const handleLanguageChange = () => {
+    setStationData((prevData) => ({
+      ...prevData,
+      [language]: {
+        name: watch("name") ?? "",
+        system_name: watch("system_name") ?? "",
+        description: watch("description") ?? "",
+        address: watch("address") ?? "",
+        latitude: watch("latitude") ?? "",
+        longitude: watch("longitude") ?? "",
+      },
+    }));
+  };
+
+  const [coordinatesPreview, setCoordinatesPreview] = useState({
+    latitude: "",
+    longitude: "",
+  });
+
   const {
     saveButtonProps,
     register,
     control,
+    getValues,
+    setValue,
+    watch,
     formState: { errors },
-  } = useForm({});
+  } = useForm({
+    refineCoreProps: {
+      meta: {
+        headers: { "Accept-Language": language },
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (stationData[language as keyof typeof stationData]?.name) {
+      setValue("name", stationData[language as keyof typeof stationData]?.name);
+    }
+    if (stationData[language as keyof typeof stationData]?.address) {
+      setValue(
+        "system_name",
+        stationData[language as keyof typeof stationData]?.system_name || ""
+      );
+    }
+    if (stationData[language as keyof typeof stationData]?.description) {
+      setValue(
+        "description",
+        stationData[language as keyof typeof stationData]?.description || ""
+      );
+    }
+    if (stationData[language as keyof typeof stationData]?.latitude) {
+      setValue(
+        "latitude",
+        stationData[language as keyof typeof stationData]?.latitude || ""
+      );
+    }
+    if (stationData[language as keyof typeof stationData]?.longitude) {
+      setValue(
+        "longitude",
+        stationData[language as keyof typeof stationData]?.longitude || ""
+      );
+    }
+  }, [language, stationData, setValue]);
+
+  useEffect(() => {
+    setLanguageAction("ru");
+  }, []);
 
   const { id: stationId } = useParams<{ id: string }>();
 
+  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const [lat, lon] = e.target.value.split(",").map((s) => s.trim());
+    setCoordinatesPreview({
+      latitude: lat,
+      longitude: lon,
+    });
+    setValue("latitude", lat);
+    setValue("longitude", lon);
+  };
+
+  const latitudeContent = watch("latitude");
+  const longitudeContent = watch("longitude");
+
+  useEffect(() => {
+    setCoordinatesPreview({
+      latitude: latitudeContent || "",
+      longitude: longitudeContent || "",
+    });
+  }, [latitudeContent, longitudeContent]);
+
   const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
     resource: "city",
     onSearch: (value) => [
@@ -47,8 +161,28 @@ export const StationEdit = () => {
         value,
       },
     ],
+
+    meta: {
+      headers: {
+        "Accept-Language": "ru",
+      },
+    },
+    queryOptions: {
+      queryKey: ["city"],
+    },
   });
 
+  useEffect(() => {
+    const latitude = getValues("latitude");
+    const longitude = getValues("longitude");
+    if (latitude && longitude) {
+      setCoordinatesPreview({
+        latitude: latitude,
+        longitude: longitude,
+      });
+    }
+  }, [getValues]);
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Box
@@ -56,6 +190,7 @@ export const StationEdit = () => {
         sx={{ display: "flex", flexDirection: "column" }}
         autoComplete="off"
       >
+        <LanguageSwitch action={handleLanguageChange} />
         <TextField
           {...register("name", {
             required: "Это поле является обязательным",
@@ -125,33 +260,27 @@ export const StationEdit = () => {
           label={"Адрес"}
           name="address"
         />
+
         <TextField
-          {...register("latitude", {
-            required: "Это поле является обязательным",
-            valueAsNumber: true,
-          })}
+          value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
+          onChange={handleCoordinatesChange}
           error={!!(errors as any)?.latitude}
           helperText={(errors as any)?.latitude?.message}
           margin="normal"
           fullWidth
           InputLabelProps={{ shrink: true }}
-          type="number"
-          label={"Широта *"}
-          name="latitude"
+          type="text"
+          label={"Координаты *"}
         />
-        <TextField
-          {...register("longitude", {
-            required: "Это поле является обязательным",
-            valueAsNumber: true,
+        <input
+          type="hidden"
+          {...register("latitude", {
+            value: coordinatesPreview.latitude,
           })}
-          error={!!(errors as any)?.longitude}
-          helperText={(errors as any)?.longitude?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{ shrink: true }}
-          type="number"
-          label={"Долгота *"}
-          name="longitude"
+        />
+        <input
+          type="hidden"
+          {...register("longitude", { value: coordinatesPreview.longitude })}
         />
 
         <Controller
@@ -210,4 +339,4 @@ export const StationEdit = () => {
       )}
     </Edit>
   );
-};
+});