From 7fc6c9dc7cd50a7e91f4ad9a096ac2a3e0e2ea6f Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Sun, 16 Mar 2025 16:52:31 +0300
Subject: [PATCH] [2] update `list` for `/sight` & `/station` routes

---
 src/components/CustomDataGrid.tsx | 47 +++++++++++++++++++++++++------
 src/pages/sight/list.tsx          | 39 ++++---------------------
 src/pages/station/list.tsx        | 38 ++++---------------------
 3 files changed, 49 insertions(+), 75 deletions(-)

diff --git a/src/components/CustomDataGrid.tsx b/src/components/CustomDataGrid.tsx
index eec3ad5..e4fa5ff 100644
--- a/src/components/CustomDataGrid.tsx
+++ b/src/components/CustomDataGrid.tsx
@@ -1,14 +1,45 @@
-import {DataGrid, type DataGridProps} from '@mui/x-data-grid'
-import {Stack, Box} from '@mui/material'
+import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
+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} />
-      <Box>
-        {/* Ваши дополнительные элементы */}
-        Дополнительный контент
-      </Box>
+      <DataGrid {...props} columns={columns} columnVisibilityModel={hasCoordinates ? columnVisibilityModel : undefined} onColumnVisibilityModelChange={hasCoordinates ? (model) => setColumnVisibilityModel(model) : undefined} />
+
+      {hasCoordinates && (
+        <Box sx={{mb: 2}}>
+          <Button variant="contained" onClick={toggleCoordinates}>
+            {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
+          </Button>
+        </Box>
+      )}
     </Stack>
   )
 }
diff --git a/src/pages/sight/list.tsx b/src/pages/sight/list.tsx
index 16892c9..6df9e38 100644
--- a/src/pages/sight/list.tsx
+++ b/src/pages/sight/list.tsx
@@ -1,19 +1,13 @@
-import React, {useState, useEffect} from 'react'
-import {type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-
+import React from 'react'
+import {type GridColDef} from '@mui/x-data-grid'
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import {Box, Button, Stack} from '@mui/material'
-
-import Cookies from 'js-cookie'
+import {Stack} from '@mui/material'
+import {CustomDataGrid} from '../../components/CustomDataGrid'
 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)} />
-
-        <Box sx={{mb: 2}}>
-          <Button variant="contained" onClick={toggleCoordinates}>
-            {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
-          </Button>
-        </Box>
+        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
       </Stack>
     </List>
   )
diff --git a/src/pages/station/list.tsx b/src/pages/station/list.tsx
index 629c33b..fcd60f0 100644
--- a/src/pages/station/list.tsx
+++ b/src/pages/station/list.tsx
@@ -1,19 +1,13 @@
-import React, {useState, useEffect} from 'react'
-import {type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-
+import React from 'react'
+import {type GridColDef} from '@mui/x-data-grid'
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import {Box, Button, Stack} from '@mui/material'
-
-import Cookies from 'js-cookie'
+import {Stack} from '@mui/material'
+import {CustomDataGrid} from '../../components/CustomDataGrid'
 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)} />
-
-        <Box sx={{mb: 2}}>
-          <Button variant="contained" onClick={toggleCoordinates}>
-            {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
-          </Button>
-        </Box>
+        <CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
       </Stack>
     </List>
   )