fix: Update map with tables fixes

src/pages/City/CityListPage/index.tsx

@@ -1,11 +1,13 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
-import { languageStore, cityStore } from "@shared";
+import { ruRU } from "@mui/x-data-grid/locales";
+import { languageStore, cityStore, countryStore } from "@shared";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
 import { toast } from "react-toastify";
+import { Box, CircularProgress } from "@mui/material";
 
 export const CityListPage = observer(() => {
   const { cities, getCities, deleteCity } = cityStore;
@@ -14,12 +16,43 @@ export const CityListPage = observer(() => {
   const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
   const [rowId, setRowId] = useState<number | null>(null);
   const [ids, setIds] = useState<number[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [rows, setRows] = useState<any[]>([]);
   const { language } = languageStore;
 
   useEffect(() => {
-    getCities(language);
+    const fetchData = async () => {
+      setIsLoading(true);
+      await countryStore.getCountries("ru");
+      await countryStore.getCountries("en");
+      await countryStore.getCountries("zh");
+      await getCities(language);
+      setIsLoading(false);
+    };
+    fetchData();
   }, [language]);
 
+  useEffect(() => {
+    let newRows = cities[language]?.data?.map((city) => ({
+      id: city.id,
+      name: city.name,
+      country: city.country_code,
+    }));
+
+    let newRows2: any[] = [];
+    for (const city of newRows) {
+      const name = countryStore.countries[language]?.data?.find(
+        (country) => country.code === city.country
+      )?.name;
+      if (name) {
+        newRows2.push(city);
+      }
+    }
+
+    setRows(newRows2 || []);
+    console.log(newRows2);
+  }, [cities, countryStore.countries, language, isLoading]);
+
   const columns: GridColDef[] = [
     {
       field: "country",
@@ -29,7 +62,9 @@ export const CityListPage = observer(() => {
         return (
           <div className="w-full h-full flex items-center">
             {params.value ? (
-              params.value
+              countryStore.countries[language]?.data?.find(
+                (country) => country.code === params.value
+              )?.name
             ) : (
               <Minus size={20} className="text-red-500" />
             )}
@@ -83,12 +118,6 @@ export const CityListPage = observer(() => {
     },
   ];
 
-  const rows = cities[language]?.data?.map((city) => ({
-    id: city.id,
-    name: city.name,
-    country: city.country,
-  }));
-
   return (
     <>
       <LanguageSwitcher />
@@ -115,12 +144,20 @@ export const CityListPage = observer(() => {
         <DataGrid
           rows={rows}
           columns={columns}
-          hideFooterPagination
           hideFooter
           checkboxSelection
+          loading={isLoading}
+          localeText={ruRU.components.MuiDataGrid.defaultProps.localeText}
           onRowSelectionModelChange={(newSelection) => {
             setIds(Array.from(newSelection.ids as unknown as number[]));
           }}
+          slots={{
+            noRowsOverlay: () => (
+              <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
+                {isLoading ? <CircularProgress size={20} /> : "Нет городов"}
+              </Box>
+            ),
+          }}
         />
       </div>