feat: Route list page

src/shared/store/ArticlesStore/index.tsx

@@ -15,6 +15,29 @@ type Media = {
   media_type: number;
 };
 
+type ArticleListCashed = {
+  ru: {
+    data: Article[];
+    loaded: boolean;
+  };
+  en: {
+    data: Article[];
+    loaded: boolean;
+  };
+  zh: {
+    data: Article[];
+    loaded: boolean;
+  };
+};
+
+type PreviewCashed = {
+  ru: Article;
+  en: Article;
+  zh: Article;
+};
+
+type ArticlePreviewCashed = Record<string, PreviewCashed>;
+
 class ArticlesStore {
   constructor() {
     makeAutoObservable(this);
@@ -25,19 +48,47 @@ class ArticlesStore {
     en: [],
     zh: [],
   };
-  articleList: Article[] = [];
+  articleList: ArticleListCashed = {
+    ru: {
+      data: [],
+      loaded: false,
+    },
+    en: {
+      data: [],
+      loaded: false,
+    },
+    zh: {
+      data: [],
+      loaded: false,
+    },
+  };
+  articlePreview: ArticlePreviewCashed = {};
   articleData: Article | null = null;
   articleMedia: Media | null = null;
   articleLoading: boolean = false;
 
   getArticleList = async () => {
+    const { language } = languageStore;
+    if (this.articleList[language].loaded) {
+      return;
+    }
     const response = await authInstance.get("/article");
 
     runInAction(() => {
-      this.articleList = response.data;
+      this.articleList[language].data = response.data;
+      this.articleList[language].loaded = true;
     });
   };
 
+  getArticlePreview = async (id: number) => {
+    const { language } = languageStore;
+    if (this.articlePreview[id][language]) {
+      return;
+    }
+    const response = await authInstance.get(`/article/${id}/preview`);
+    this.articlePreview[id][language] = response.data;
+  };
+
   getArticles = async (language: Language) => {
     this.articleLoading = true;
     const response = await authInstance.get("/article");

src/shared/store/CarrierStore/index.tsx

@@ -14,23 +14,32 @@ export type Carrier = {
   right_color: string;
 };
 
-type Carriers = Carrier[];
+type Carriers = {
+  data: Carrier[];
+  loaded: boolean;
+};
 
 type CashedCarrier = Record<number, Carrier>;
 
 class CarrierStore {
-  carriers: Carriers = [];
+  carriers: Carriers = {
+    data: [],
+    loaded: false,
+  };
   carrier: CashedCarrier = {};
+
   constructor() {
     makeAutoObservable(this);
   }
 
   getCarriers = async () => {
-    if (this.carriers.length > 0) return;
+    if (this.carriers.loaded) return;
+
     const response = await authInstance.get("/carrier");
 
     runInAction(() => {
-      this.carriers = response.data;
+      this.carriers.data = response.data;
+      this.carriers.loaded = true;
     });
   };
 
@@ -38,13 +47,15 @@ class CarrierStore {
     await authInstance.delete(`/carrier/${id}`);
 
     runInAction(() => {
-      this.carriers = this.carriers.filter((carrier) => carrier.id !== id);
+      this.carriers.data = this.carriers.data.filter(
+        (carrier) => carrier.id !== id
+      );
       delete this.carrier[id];
     });
   };
 
   getCarrier = async (id: number) => {
-    if (this.carrier[id]) return this.carrier[id];
+    if (this.carrier[id]) return;
     const response = await authInstance.get(`/carrier/${id}`);
 
     runInAction(() => {
@@ -90,7 +101,7 @@ class CarrierStore {
       logo: logoId,
     });
     runInAction(() => {
-      this.carriers.push(response.data);
+      this.carriers.data.push(response.data);
     });
   };
 
@@ -137,7 +148,7 @@ class CarrierStore {
     );
 
     runInAction(() => {
-      this.carriers = this.carriers.map((carrier) =>
+      this.carriers.data = this.carriers.data.map((carrier) =>
         carrier.id === id ? { ...carrier, ...response.data } : carrier
       );
 

src/shared/store/CityStore/index.ts

@@ -236,39 +236,41 @@ class CityStore {
         (country) => country.code === country_code
       );
 
-      await languageInstance(language as Language).patch(`/city/${code}`, {
-        name,
-        country: country?.name || "",
-        country_code: country_code,
-        arms,
-      });
+      if (name) {
+        await languageInstance(language as Language).patch(`/city/${code}`, {
+          name,
+          country: country?.name || "",
+          country_code: country_code,
+          arms,
+        });
 
-      runInAction(() => {
-        if (this.city[code]) {
-          this.city[code][language as keyof CashedCities] = {
-            name,
-            country: country?.name || "",
-            country_code: country_code,
-            arms,
-          };
-        }
+        runInAction(() => {
+          if (this.city[code]) {
+            this.city[code][language as keyof CashedCities] = {
+              name,
+              country: country?.name || "",
+              country_code: country_code,
+              arms,
+            };
+          }
 
-        if (this.cities[language as keyof CashedCities]) {
-          this.cities[language as keyof CashedCities] = this.cities[
-            language as keyof CashedCities
-          ].map((city) =>
-            city.id === Number(code)
-              ? {
-                  id: city.id,
-                  name,
-                  country: country?.name || "",
-                  country_code: country_code,
-                  arms,
-                }
-              : city
-          );
-        }
-      });
+          if (this.cities[language as keyof CashedCities]) {
+            this.cities[language as keyof CashedCities] = this.cities[
+              language as keyof CashedCities
+            ].map((city) =>
+              city.id === Number(code)
+                ? {
+                    id: city.id,
+                    name,
+                    country: country?.name || "",
+                    country_code: country_code,
+                    arms,
+                  }
+                : city
+            );
+          }
+        });
+      }
     }
   };
 }

src/shared/store/RouteStore/index.ts

@@ -19,17 +19,38 @@ export type Route = {
 };
 
 class RouteStore {
-  routes: Route[] = [];
+  routes: {
+    data: Route[];
+    loaded: boolean;
+  } = {
+    data: [],
+    loaded: false,
+  };
+  route: Record<string, Route> = {};
 
   constructor() {
     makeAutoObservable(this);
   }
 
   getRoutes = async () => {
+    if (this.routes.loaded) return;
     const response = await authInstance.get("/route");
 
     runInAction(() => {
-      this.routes = response.data;
+      this.routes = {
+        data: response.data,
+        loaded: true,
+      };
+    });
+  };
+
+  createRoute = async (route: any) => {
+    const response = await authInstance.post("/route", route);
+    const id = response.data.id;
+
+    runInAction(() => {
+      this.route[id] = { ...route, id };
+      this.routes.data = [...this.routes.data, { ...route, id }];
     });
   };
 
@@ -37,9 +58,12 @@ class RouteStore {
     await authInstance.delete(`/route/${id}`);
 
     runInAction(() => {
-      this.routes = this.routes.filter((route) => route.id !== id);
+      this.routes = {
+        data: this.routes.data.filter((route) => route.id !== id),
+        loaded: true,
+      };
     });
   };
 }
 
-export const routeStore = new RouteStore();
+export const routeStore = new RouteStore();

src/shared/store/StationsStore/index.ts

@@ -1,6 +1,42 @@
-import { authInstance } from "@shared";
+import { authInstance, languageInstance, languageStore } from "@shared";
 import { makeAutoObservable, runInAction } from "mobx";
 
+type Language = "ru" | "en" | "zh";
+
+type StationLanguageData = {
+  name: string;
+  system_name: string;
+  description: string;
+  address: string;
+  loaded: boolean; // Indicates if this language's data has been loaded/modified
+};
+
+type StationCommonData = {
+  city_id: number;
+  direction: boolean;
+  icon: string;
+  latitude: number;
+  longitude: number;
+  offset_x: number;
+  offset_y: number;
+  transfers: {
+    bus: string;
+    metro_blue: string;
+    metro_green: string;
+    metro_orange: string;
+    metro_purple: string;
+    metro_red: string;
+    train: string;
+    tram: string;
+    trolleybus: string;
+  };
+  city: string;
+};
+
+type EditStationData = {
+  [key in Language]: StationLanguageData;
+} & { common: StationCommonData };
+
 type Station = {
   id: number;
   address: string;
@@ -32,6 +68,77 @@ class StationsStore {
   stations: Station[] = [];
   station: Station | null = null;
 
+  stationLists: {
+    [key in Language]: {
+      data: Station[];
+      loaded: boolean;
+    };
+  } = {
+    ru: {
+      data: [],
+      loaded: false,
+    },
+    en: {
+      data: [],
+      loaded: false,
+    },
+    zh: {
+      data: [],
+      loaded: false,
+    },
+  };
+
+  // This will store the full station data, keyed by ID and then by language
+  stationPreview: Record<
+    string,
+    Record<string, { loaded: boolean; data: Station }>
+  > = {};
+
+  editStationData: EditStationData = {
+    ru: {
+      name: "",
+      system_name: "",
+      description: "",
+      address: "",
+      loaded: false,
+    },
+    en: {
+      name: "",
+      system_name: "",
+      description: "",
+      address: "",
+      loaded: false,
+    },
+    zh: {
+      name: "",
+      system_name: "",
+      description: "",
+      address: "",
+      loaded: false,
+    },
+    common: {
+      city: "",
+      city_id: 0,
+      direction: false,
+      icon: "",
+      latitude: 0,
+      longitude: 0,
+      offset_x: 0,
+      offset_y: 0,
+      transfers: {
+        bus: "",
+        metro_blue: "",
+        metro_green: "",
+        metro_orange: "",
+        metro_purple: "",
+        metro_red: "",
+        train: "",
+        tram: "",
+        trolleybus: "",
+      },
+    },
+  };
+
   constructor() {
     makeAutoObservable(this);
   }
@@ -44,11 +151,157 @@ class StationsStore {
     });
   };
 
+  getStationList = async () => {
+    const { language } = languageStore;
+    if (this.stationLists[language].loaded) {
+      return;
+    }
+    const response = await authInstance.get("/station");
+
+    runInAction(() => {
+      this.stationLists[language].data = response.data;
+      this.stationLists[language].loaded = true;
+    });
+  };
+
+  setEditCommonData = (data: Partial<StationCommonData>) => {
+    this.editStationData.common = {
+      ...this.editStationData.common,
+      ...data,
+    };
+  };
+
+  getEditStation = async (id: number) => {
+    if (this.editStationData.ru.loaded) {
+      return;
+    }
+    const ruResponse = await languageInstance("ru").get(`/station/${id}`);
+    const enResponse = await languageInstance("en").get(`/station/${id}`);
+    const zhResponse = await languageInstance("zh").get(`/station/${id}`);
+
+    this.editStationData = {
+      ru: {
+        name: ruResponse.data.name,
+        system_name: ruResponse.data.system_name,
+        description: ruResponse.data.description,
+        address: ruResponse.data.address,
+        loaded: true,
+      },
+      en: {
+        name: enResponse.data.name,
+        system_name: enResponse.data.system_name,
+        description: enResponse.data.description,
+        address: enResponse.data.address,
+        loaded: true,
+      },
+      zh: {
+        name: zhResponse.data.name,
+        system_name: zhResponse.data.system_name,
+        description: zhResponse.data.description,
+        address: zhResponse.data.address,
+        loaded: true,
+      },
+      common: {
+        city: ruResponse.data.city,
+        city_id: ruResponse.data.city_id,
+        direction: ruResponse.data.direction,
+        icon: ruResponse.data.icon,
+        latitude: ruResponse.data.latitude,
+        longitude: ruResponse.data.longitude,
+        offset_x: ruResponse.data.offset_x,
+        offset_y: ruResponse.data.offset_y,
+        transfers: ruResponse.data.transfers,
+      },
+    };
+  };
+
+  // Sets language-specific station data
+  setLanguageEditStationData = (
+    language: Language,
+    data: Partial<StationLanguageData>
+  ) => {
+    this.editStationData[language] = {
+      ...this.editStationData[language],
+      ...data,
+    };
+  };
+
+  editStation = async (id: number) => {
+    const commonDataPayload = {
+      city_id: this.editStationData.common.city_id,
+      direction: this.editStationData.common.direction,
+      icon: this.editStationData.common.icon,
+      latitude: this.editStationData.common.latitude,
+      longitude: this.editStationData.common.longitude,
+      offset_x: this.editStationData.common.offset_x,
+      offset_y: this.editStationData.common.offset_y,
+      transfers: this.editStationData.common.transfers,
+      city: this.editStationData.common.city,
+    };
+
+    for (const language of ["ru", "en", "zh"] as const) {
+      const { name, description, address } = this.editStationData[language];
+      const response = await languageInstance(language).patch(
+        `/station/${id}`,
+        {
+          name: name || "",
+          system_name: name || "", // system_name is often derived from name
+          description: description || "",
+          address: address || "",
+          ...commonDataPayload,
+        }
+      );
+
+      runInAction(() => {
+        // Update the cached preview data and station lists after successful patch
+        if (this.stationPreview[id]) {
+          this.stationPreview[id][language] = {
+            ...this.stationPreview[id][language], // Preserve common fields that might not be in the language-specific patch response
+            id: response.data.id,
+            name: response.data.name,
+            system_name: response.data.system_name,
+            description: response.data.description,
+            address: response.data.address,
+            ...commonDataPayload,
+          } as Station; // Cast to Station to satisfy type
+        }
+        if (this.stationLists[language].data) {
+          this.stationLists[language].data = this.stationLists[
+            language
+          ].data.map((station: Station) =>
+            station.id === id
+              ? ({
+                  ...station,
+                  name: response.data.name,
+                  system_name: response.data.system_name,
+                  description: response.data.description,
+                  address: response.data.address,
+                  ...commonDataPayload,
+                } as Station)
+              : station
+          );
+        }
+      });
+    }
+  };
+
   deleteStation = async (id: number) => {
     await authInstance.delete(`/station/${id}`);
 
     runInAction(() => {
       this.stations = this.stations.filter((station) => station.id !== id);
+      // Also clear from stationPreview cache
+      if (this.stationPreview[id]) {
+        delete this.stationPreview[id];
+      }
+      // Clear from stationLists as well for all languages
+      for (const lang of ["ru", "en", "zh"] as const) {
+        if (this.stationLists[lang].data) {
+          this.stationLists[lang].data = this.stationLists[lang].data.filter(
+            (station) => station.id !== id
+          );
+        }
+      }
     });
   };
 
@@ -57,6 +310,29 @@ class StationsStore {
     this.station = response.data;
   };
 
+  getStationPreview = async (id: number) => {
+    const { language } = languageStore;
+
+    if (this.stationPreview[id]?.[language]?.loaded) {
+      return;
+    }
+
+    const response = await languageInstance(language).get(`/station/${id}`);
+    runInAction(() => {
+      if (!this.stationPreview[id]) {
+        this.stationPreview[id] = {
+          ru: { loaded: false, data: {} as Station },
+          en: { loaded: false, data: {} as Station },
+          zh: { loaded: false, data: {} as Station },
+        };
+      }
+      this.stationPreview[id][language] = {
+        data: response.data,
+        loaded: true,
+      };
+    });
+  };
+
   createStation = async (
     name: string,
     systemName: string,
@@ -69,8 +345,72 @@ class StationsStore {
     });
     runInAction(() => {
       this.stations.push(response.data);
+      const newStation = response.data as Station;
+      if (!this.stationPreview[newStation.id]) {
+        this.stationPreview[newStation.id] = {
+          ru: { loaded: false, data: newStation },
+          en: { loaded: false, data: newStation },
+          zh: { loaded: false, data: newStation },
+        };
+      }
+      this.stationPreview[newStation.id]["ru"] = {
+        loaded: true,
+        data: newStation,
+      };
+      this.stationPreview[newStation.id]["en"] = {
+        loaded: true,
+        data: newStation,
+      };
     });
   };
+
+  // Reset editStationData when navigating away or after saving
+  resetEditStationData = () => {
+    this.editStationData = {
+      ru: {
+        name: "",
+        system_name: "",
+        description: "",
+        address: "",
+        loaded: false,
+      },
+      en: {
+        name: "",
+        system_name: "",
+        description: "",
+        address: "",
+        loaded: false,
+      },
+      zh: {
+        name: "",
+        system_name: "",
+        description: "",
+        address: "",
+        loaded: false,
+      },
+      common: {
+        city: "",
+        city_id: 0,
+        direction: false,
+        icon: "",
+        latitude: 0,
+        longitude: 0,
+        offset_x: 0,
+        offset_y: 0,
+        transfers: {
+          bus: "",
+          metro_blue: "",
+          metro_green: "",
+          metro_orange: "",
+          metro_purple: "",
+          metro_red: "",
+          train: "",
+          tram: "",
+          trolleybus: "",
+        },
+      },
+    };
+  };
 }
 
 export const stationsStore = new StationsStore();

src/shared/store/UserStore/index.ts

@@ -10,7 +10,13 @@ export type User = {
 };
 
 class UserStore {
-  users: User[] = [];
+  users: {
+    data: User[];
+    loaded: boolean;
+  } = {
+    data: [],
+    loaded: false,
+  };
   user: Record<string, User> = {};
 
   constructor() {
@@ -18,12 +24,13 @@ class UserStore {
   }
 
   getUsers = async () => {
-    if (this.users.length > 0) return;
+    if (this.users.loaded) return;
 
     const response = await authInstance.get("/user");
 
     runInAction(() => {
-      this.users = response.data;
+      this.users.data = response.data;
+      this.users.loaded = true;
     });
   };
 
@@ -42,7 +49,7 @@ class UserStore {
     await authInstance.delete(`/user/${id}`);
 
     runInAction(() => {
-      this.users = this.users.filter((user) => user.id !== id);
+      this.users.data = this.users.data.filter((user) => user.id !== id);
       delete this.user[id];
     });
   };
@@ -64,12 +71,15 @@ class UserStore {
   };
 
   createUser = async () => {
-    const id = this.users[this.users.length - 1].id + 1;
+    let id = 1;
+    if (this.users.data.length > 0) {
+      id = this.users.data[this.users.data.length - 1].id + 1;
+    }
     const response = await authInstance.post("/user", this.createUserData);
 
     runInAction(() => {
-      this.users.push({
-        id,
+      this.users.data.push({
+        id: id,
         ...response.data,
       });
     });
@@ -95,7 +105,7 @@ class UserStore {
     const response = await authInstance.patch(`/user/${id}`, this.editUserData);
 
     runInAction(() => {
-      this.users = this.users.map((user) =>
+      this.users.data = this.users.data.map((user) =>
         user.id === id ? { ...user, ...response.data } : user
       );
       this.user[id] = { ...this.user[id], ...response.data };

src/shared/store/VehicleStore/index.ts

@@ -21,7 +21,13 @@ export type Vehicle = {
 };
 
 class VehicleStore {
-  vehicles: Vehicle[] = [];
+  vehicles: {
+    data: Vehicle[];
+    loaded: boolean;
+  } = {
+    data: [],
+    loaded: false,
+  };
   vehicle: Record<string, Vehicle> = {};
 
   constructor() {
@@ -29,10 +35,13 @@ class VehicleStore {
   }
 
   getVehicles = async () => {
+    if (this.vehicles.loaded) return;
+
     const response = await languageInstance("ru").get(`/vehicle`);
 
     runInAction(() => {
-      this.vehicles = response.data;
+      this.vehicles.data = response.data;
+      this.vehicles.loaded = true;
     });
   };
 
@@ -40,7 +49,7 @@ class VehicleStore {
     await languageInstance("ru").delete(`/vehicle/${id}`);
 
     runInAction(() => {
-      this.vehicles = this.vehicles.filter(
+      this.vehicles.data = this.vehicles.data.filter(
         (vehicle) => vehicle.vehicle.id !== id
       );
     });
@@ -68,7 +77,7 @@ class VehicleStore {
     });
 
     runInAction(() => {
-      this.vehicles.push({
+      this.vehicles.data.push({
         vehicle: {
           id: response.data.id,
           tail_number: response.data.tail_number,
@@ -128,7 +137,7 @@ class VehicleStore {
           ...response.data,
         },
       };
-      this.vehicles = this.vehicles.map((vehicle) =>
+      this.vehicles.data = this.vehicles.data.map((vehicle) =>
         vehicle.vehicle.id === id
           ? {
               ...vehicle,