import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid"; import { languageStore, cityStore, CashedCities } from "@shared"; import { useEffect, useState } from "react"; import { observer } from "mobx-react-lite"; import { Eye, Pencil, Trash2 } from "lucide-react"; import { useNavigate } from "react-router-dom"; import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets"; export const CityListPage = observer(() => { const { cities, getCities, deleteCity } = cityStore; const navigate = useNavigate(); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [rowId, setRowId] = useState(null); const { language } = languageStore; useEffect(() => { getCities(language); }, [language]); const columns: GridColDef[] = [ { field: "country", headerName: "Страна", width: 150, }, { field: "name", headerName: "Название", flex: 1, }, { field: "actions", headerName: "Действия", align: "center", headerAlign: "center", width: 200, renderCell: (params: GridRenderCellParams) => { return (
); }, }, ]; const rows = cities[language].map((city) => ({ id: city.id, name: city.name, country: city.country, })); return ( <>

Города

{ if (rowId) { deleteCity(rowId.toString(), language as keyof CashedCities); } setIsDeleteModalOpen(false); setRowId(null); }} onCancel={() => { setIsDeleteModalOpen(false); setRowId(null); }} /> ); });