[2] update list for /sight & /station routes

src/components/CustomDataGrid.tsx

@@ -1,14 +1,45 @@
-import {DataGrid, type DataGridProps} from '@mui/x-data-grid'
+import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
-import {Stack, Box} from '@mui/material'
+import {Stack, Box, Button} from '@mui/material'
+import React, {useState, useEffect} from 'react'
+import Cookies from 'js-cookie'
+
+interface CustomDataGridProps extends DataGridProps {
+  hasCoordinates?: boolean
+}
+
+export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}: CustomDataGridProps) => {
+  const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
+  const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
+  const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({
+    latitude: showCoordinates,
+    longitude: showCoordinates,
+  })
+
+  useEffect(() => {
+    if (hasCoordinates) {
+      setColumnVisibilityModel({
+        latitude: showCoordinates,
+        longitude: showCoordinates,
+      })
+      Cookies.set('showCoordinates', String(showCoordinates))
+    }
+  }, [showCoordinates, hasCoordinates])
+
+  const toggleCoordinates = () => {
+    setShowCoordinates((prev) => !prev)
+  }
 
-export const CustomDataGrid = (props: DataGridProps) => {
   return (
     <Stack spacing={2}>
-      <DataGrid {...props} />
+      <DataGrid {...props} columns={columns} columnVisibilityModel={hasCoordinates ? columnVisibilityModel : undefined} onColumnVisibilityModelChange={hasCoordinates ? (model) => setColumnVisibilityModel(model) : undefined} />
-      <Box>
+
-        {/* Ваши дополнительные элементы */}
+      {hasCoordinates && (
-        Дополнительный контент
+        <Box sx={{mb: 2}}>
+          <Button variant="contained" onClick={toggleCoordinates}>
+            {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
+          </Button>
         </Box>
+      )}
     </Stack>
   )
 }

src/pages/sight/list.tsx

@@ -1,19 +1,13 @@
-import React, {useState, useEffect} from 'react'
+import React from 'react'
-import {type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
+import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import {Box, Button, Stack} from '@mui/material'
+import {Stack} from '@mui/material'
-
+import {CustomDataGrid} from '../../components/CustomDataGrid'
-import Cookies from 'js-cookie'
 import {localeText} from '../../locales/ru/localeText'
 
 export const SightList = () => {
   const {dataGridProps} = useDataGrid({resource: 'sight/'})
 
-  const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
-  const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
-
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
@@ -84,33 +78,10 @@ export const SightList = () => {
     [],
   )
 
-  const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({
-    latitude: showCoordinates,
-    longitude: showCoordinates,
-  })
-
-  useEffect(() => {
-    setColumnVisibilityModel({
-      latitude: showCoordinates,
-      longitude: showCoordinates,
-    })
-    Cookies.set('showCoordinates', String(showCoordinates))
-  }, [showCoordinates])
-
-  const toggleCoordinates = () => {
-    setShowCoordinates((prev) => !prev)
-  }
-
   return (
     <List>
       <Stack gap={2.5}>
-        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} />
+        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
-
-        <Box sx={{mb: 2}}>
-          <Button variant="contained" onClick={toggleCoordinates}>
-            {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
-          </Button>
-        </Box>
       </Stack>
     </List>
   )

src/pages/station/list.tsx

@@ -1,19 +1,13 @@
-import React, {useState, useEffect} from 'react'
+import React from 'react'
-import {type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
+import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import {Box, Button, Stack} from '@mui/material'
+import {Stack} from '@mui/material'
-
+import {CustomDataGrid} from '../../components/CustomDataGrid'
-import Cookies from 'js-cookie'
 import {localeText} from '../../locales/ru/localeText'
 
 export const StationList = () => {
   const {dataGridProps} = useDataGrid({resource: 'station/'})
 
-  const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
-  const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
-
   const columns = React.useMemo<GridColDef[]>(
     () => [
       {
@@ -82,33 +76,11 @@ export const StationList = () => {
     ],
     [],
   )
-  const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({
-    latitude: showCoordinates,
-    longitude: showCoordinates,
-  })
-
-  useEffect(() => {
-    setColumnVisibilityModel({
-      latitude: showCoordinates,
-      longitude: showCoordinates,
-    })
-    Cookies.set('showCoordinates', String(showCoordinates))
-  }, [showCoordinates])
-
-  const toggleCoordinates = () => {
-    setShowCoordinates((prev) => !prev)
-  }
 
   return (
     <List>
       <Stack gap={2.5}>
-        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} />
+        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
-
-        <Box sx={{mb: 2}}>
-          <Button variant="contained" onClick={toggleCoordinates}>
-            {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
-          </Button>
-        </Box>
       </Stack>
     </List>
   )