fix: Update map with tables fixes

src/pages/Route/route-preview/MapDataContext.tsx

@@ -29,10 +29,13 @@ const MapDataContext = createContext<{
   isRouteLoading: boolean;
   isStationLoading: boolean;
   isSightLoading: boolean;
+  selectedSight?: SightData;
+  setSelectedSight: (sight?: SightData) => void;
   setScaleRange: (min: number, max: number) => void;
   setMapRotation: (rotation: number) => void;
   setMapCenter: (x: number, y: number) => void;
   setStationOffset: (stationId: number, x: number, y: number) => void;
+  setStationAlign: (stationId: number, align: number) => void;
   setSightCoordinates: (
     sightId: number,
     latitude: number,
@@ -50,10 +53,13 @@ const MapDataContext = createContext<{
   isRouteLoading: true,
   isStationLoading: true,
   isSightLoading: true,
+  selectedSight: undefined,
+  setSelectedSight: () => {},
   setScaleRange: () => {},
   setMapRotation: () => {},
   setMapCenter: () => {},
   setStationOffset: () => {},
+  setStationAlign: () => {},
   setSightCoordinates: () => {},
   saveChanges: () => {},
 });
@@ -87,6 +93,7 @@ export const MapDataProvider = observer(
     const [isRouteLoading, setIsRouteLoading] = useState(true);
     const [isStationLoading, setIsStationLoading] = useState(true);
     const [isSightLoading, setIsSightLoading] = useState(true);
+    const [selectedSight, setSelectedSight] = useState<SightData>();
 
     useEffect(() => {
       const fetchData = async () => {
@@ -106,17 +113,18 @@ export const MapDataProvider = observer(
             languageInstance("ru").get(`/route/${routeId}/station`),
             languageInstance("en").get(`/route/${routeId}/station`),
             languageInstance("zh").get(`/route/${routeId}/station`),
-            authInstance.get(`/route/${routeId}/sight`),
+            languageInstance("ru").get(`/route/${routeId}/sight`),
           ]);
 
-          setOriginalRouteData(routeResponse.data as RouteData);
+          const routeData = routeResponse.data as RouteData;
+          setOriginalRouteData(routeData);
           setOriginalStationData(ruStationResponse.data as StationData[]);
           setStationData({
             ru: ruStationResponse.data as StationData[],
             en: enStationResponse.data as StationData[],
             zh: zhStationResponse.data as StationData[],
           });
-          setOriginalSightData(sightResponse as unknown as SightData[]);
+          setOriginalSightData(sightResponse.data as SightData[]);
 
           setIsRouteLoading(false);
           setIsStationLoading(false);
@@ -176,43 +184,136 @@ export const MapDataProvider = observer(
     }
 
     async function saveSightChanges() {
-      console.log("sightChanges", sightChanges);
       for (const sight of sightChanges) {
         await authInstance.patch(`/route/${routeId}/sight`, sight);
       }
     }
 
     function setStationOffset(stationId: number, x: number, y: number) {
-      setStationChanges((prev) => {
-        let found = prev.find((station) => station.station_id === stationId);
-        if (found) {
-          found.offset_x = x;
-          found.offset_y = y;
+      const currentStation = stationData.ru?.find(
+        (station) => station.id === stationId
+      );
+      if (
+        currentStation &&
+        Math.abs(currentStation.offset_x - x) < 0.01 &&
+        Math.abs(currentStation.offset_y - y) < 0.01
+      ) {
+        return;
+      }
 
-          return prev.map((station) => {
-            if (station.station_id === stationId) {
-              return found;
+      setStationChanges((prev) => {
+        const existingIndex = prev.findIndex(
+          (station) => station.station_id === stationId
+        );
+
+        if (existingIndex !== -1) {
+          const newChanges = [...prev];
+          newChanges[existingIndex] = {
+            ...newChanges[existingIndex],
+            offset_x: x,
+            offset_y: y,
+          };
+          return newChanges;
+        } else {
+          const originalStation = originalStationData?.find(
+            (s) => s.id === stationId
+          );
+          return [
+            ...prev,
+            {
+              station_id: stationId,
+              offset_x: x,
+              offset_y: y,
+              align: originalStation?.align ?? 1,
+              transfers: originalStation?.transfers ?? {
+                bus: "",
+                metro_blue: "",
+                metro_green: "",
+                metro_orange: "",
+                metro_purple: "",
+                metro_red: "",
+                train: "",
+                tram: "",
+                trolleybus: "",
+              },
+            },
+          ];
+        }
+      });
+
+      setStationData((prev) => {
+        const updated = { ...prev };
+        Object.keys(updated).forEach((lang) => {
+          updated[lang] = updated[lang].map((station) => {
+            if (station.id === stationId) {
+              return { ...station, offset_x: x, offset_y: y };
             }
             return station;
           });
+        });
+        return updated;
+      });
+    }
+
+    function setStationAlign(stationId: number, align: number) {
+      const currentStation = stationData.ru?.find(
+        (station) => station.id === stationId
+      );
+      if (currentStation && currentStation.align === align) {
+        return;
+      }
+
+      setStationChanges((prev) => {
+        const existingIndex = prev.findIndex(
+          (station) => station.station_id === stationId
+        );
+
+        if (existingIndex !== -1) {
+          const newChanges = [...prev];
+          newChanges[existingIndex] = {
+            ...newChanges[existingIndex],
+            align: align,
+          };
+          return newChanges;
         } else {
-          const foundStation = stationData.ru?.find(
-            (station) => station.id === stationId
+          const originalStation = originalStationData?.find(
+            (s) => s.id === stationId
           );
-          if (foundStation) {
-            return [
-              ...prev,
-              {
-                station_id: stationId,
-                offset_x: x,
-                offset_y: y,
-                transfers: foundStation.transfers,
+          return [
+            ...prev,
+            {
+              station_id: stationId,
+              align: align,
+              offset_x: originalStation?.offset_x ?? 0,
+              offset_y: originalStation?.offset_y ?? 0,
+              transfers: originalStation?.transfers ?? {
+                bus: "",
+                metro_blue: "",
+                metro_green: "",
+                metro_orange: "",
+                metro_purple: "",
+                metro_red: "",
+                train: "",
+                tram: "",
+                trolleybus: "",
               },
-            ];
-          }
-          return prev;
+            },
+          ];
         }
       });
+
+      setStationData((prev) => {
+        const updated = { ...prev };
+        Object.keys(updated).forEach((lang) => {
+          updated[lang] = updated[lang].map((station) => {
+            if (station.id === stationId) {
+              return { ...station, align: align };
+            }
+            return station;
+          });
+        });
+        return updated;
+      });
     }
 
     function setSightCoordinates(
@@ -221,14 +322,18 @@ export const MapDataProvider = observer(
       longitude: number
     ) {
       setSightChanges((prev) => {
-        let found = prev.find((sight) => sight.sight_id === sightId);
-        if (found) {
-          found.latitude = latitude;
-          found.longitude = longitude;
+        const existingIndex = prev.findIndex(
+          (sight) => sight.sight_id === sightId
+        );
 
-          return prev.map((sight) => {
-            if (sight.sight_id === sightId) {
-              return found;
+        if (existingIndex !== -1) {
+          return prev.map((sight, index) => {
+            if (index === existingIndex) {
+              return {
+                ...sight,
+                latitude,
+                longitude,
+              };
             }
             return sight;
           });
@@ -249,9 +354,7 @@ export const MapDataProvider = observer(
       });
     }
 
-    useEffect(() => {
-      console.log("sightChanges", sightChanges);
-    }, [sightChanges]);
+    useEffect(() => {}, [sightChanges]);
 
     const value = useMemo(
       () => ({
@@ -264,11 +367,14 @@ export const MapDataProvider = observer(
         isRouteLoading,
         isStationLoading,
         isSightLoading,
+        selectedSight,
+        setSelectedSight,
         setScaleRange,
         setMapRotation,
         setMapCenter,
         saveChanges,
         setStationOffset,
+        setStationAlign,
         setSightCoordinates,
       }),
       [
@@ -281,6 +387,7 @@ export const MapDataProvider = observer(
         isRouteLoading,
         isStationLoading,
         isSightLoading,
+        selectedSight,
       ]
     );