hide specific data for users into CustomDataGrid

src/components/CustomDataGrid.tsx

@@ -1,45 +1,87 @@
 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 {Stack, Button} from '@mui/material'
+import React, {useState, useEffect, useMemo} from 'react'
 import Cookies from 'js-cookie'
 
 interface CustomDataGridProps extends DataGridProps {
   hasCoordinates?: boolean
 }
 
+const DEV_FIELDS = ['id', 'city_id', 'carrier_id'] as const
+
 export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}: CustomDataGridProps) => {
+  const isDev = import.meta.env.DEV
+
   const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
+  const initialShowDevData = Cookies.get('showDevData') === 'true'
+
   const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
-  const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({
-    latitude: showCoordinates,
-    longitude: showCoordinates,
-  })
+  const [showDevData, setShowDevData] = useState(initialShowDevData)
+
+  const availableDevFields = useMemo(() => DEV_FIELDS.filter((field) => columns.some((column) => column.field === field)), [columns])
+
+  const initialVisibilityModel = useMemo(() => {
+    const model: GridColumnVisibilityModel = {}
+
+    availableDevFields.forEach((field) => {
+      model[field] = initialShowDevData
+    })
+
+    if (hasCoordinates) {
+      model.latitude = initialShowCoordinates
+      model.longitude = initialShowCoordinates
+    }
+
+    return model
+  }, [availableDevFields, hasCoordinates, initialShowCoordinates, initialShowDevData])
+
+  const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>(initialVisibilityModel)
 
   useEffect(() => {
-    if (hasCoordinates) {
-      setColumnVisibilityModel({
-        latitude: showCoordinates,
-        longitude: showCoordinates,
+    setColumnVisibilityModel((prevModel) => {
+      const newModel = {...prevModel}
+
+      availableDevFields.forEach((field) => {
+        newModel[field] = showDevData
       })
+
+      if (hasCoordinates) {
+        newModel.latitude = showCoordinates
+        newModel.longitude = showCoordinates
+      }
+
+      return newModel
+    })
+
+    if (hasCoordinates) {
       Cookies.set('showCoordinates', String(showCoordinates))
     }
-  }, [showCoordinates, hasCoordinates])
+    Cookies.set('showDevData', String(showDevData))
+  }, [showCoordinates, showDevData, hasCoordinates, availableDevFields])
 
   const toggleCoordinates = () => {
     setShowCoordinates((prev) => !prev)
   }
 
+  const toggleDevData = () => {
+    setShowDevData((prev) => !prev)
+  }
+
   return (
     <Stack spacing={2}>
-      <DataGrid {...props} columns={columns} columnVisibilityModel={hasCoordinates ? columnVisibilityModel : undefined} onColumnVisibilityModelChange={hasCoordinates ? (model) => setColumnVisibilityModel(model) : undefined} />
-
-      {hasCoordinates && (
-        <Box sx={{mb: 2}}>
+      <DataGrid {...props} columns={columns} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={setColumnVisibilityModel} />
+      <Stack direction="row" spacing={2} sx={{mb: 2}}>
+        {hasCoordinates && (
           <Button variant="contained" onClick={toggleCoordinates}>
             {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
           </Button>
-        </Box>
-      )}
+        )}
+        {isDev && availableDevFields.length > 0 && (
+          <Button variant="contained" onClick={toggleDevData}>
+            {showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
+          </Button>
+        )}
+      </Stack>
     </Stack>
   )
 }

src/pages/media/list.tsx

@@ -41,10 +41,10 @@ export const MediaList = () => {
         field: 'actions',
         headerName: 'Действия',
         align: 'right',
-        headerAlign: 'center',
-        minWidth: 130,
-        sortable: false,
+        headerAlign: 'right',
         display: 'flex',
+        flex: 1,
+        sortable: false,
         renderCell: function render({row}) {
           return (
             <>

src/pages/sight/list.tsx

@@ -60,10 +60,10 @@ export const SightList = () => {
         field: 'actions',
         headerName: 'Действия',
         align: 'right',
-        headerAlign: 'center',
-        minWidth: 120,
-        sortable: false,
+        headerAlign: 'right',
         display: 'flex',
+        flex: 1,
+        sortable: false,
         renderCell: function render({row}) {
           return (
             <>

src/pages/vehicle/list.tsx

@@ -51,10 +51,11 @@ export const VehicleList = () => {
         field: 'actions',
         headerName: 'Действия',
         align: 'right',
-        headerAlign: 'center',
-        minWidth: 120,
-        sortable: false,
+        headerAlign: 'right',
         display: 'flex',
+        flex: 1,
+        sortable: false,
+
         renderCell: function render({row}) {
           return (
             <>