* Дополнена меморизация компонентов

* Стилистические исправления

src/pages/Cluster/functions.jsx

@@ -3,7 +3,7 @@ import { OperationStatService } from '@api'
 const maxPrefix = 'isMax'
 const minPrefix = 'isMin'
 
-export const getPrecision = (number) => Number.isNaN(number ?? NaN) ? '-' : number.toFixed(2)
+export const getPrecision = (number) => Number.isFinite(number) ? number.toFixed(2) : '-'
 
 export const getOperations = async (idWell) => {
   const ops = await OperationStatService.getTvd(idWell)

src/pages/Deposit.jsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { useState, useEffect, memo } from 'react'
 
 import { ClusterService } from '@api'
+import { arrayOrDefault } from '@utils'
 import { PointerIcon } from '@components/icons'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
@@ -43,7 +44,7 @@ export const Deposit = memo(() => {
   useEffect(() => invokeWebApiWrapperAsync(
     async () => {
       const data = await ClusterService.getClusters()
-      setClustersData(data)
+      setClustersData(arrayOrDefault(data))
       setViewParams(calcViewParams(data))
     },
     setShowLoader,
@@ -54,7 +55,7 @@ export const Deposit = memo(() => {
     <LoaderPortal show={showLoader}>
       <div className={'h-100vh'}>
         <Map {...viewParams}>
-          {clustersData.map(cluster =>
+          {clustersData.map(cluster => (
             <Overlay
               width={32}
               anchor={[cluster.latitude, cluster.longitude]}
@@ -65,7 +66,7 @@ export const Deposit = memo(() => {
                 <span>{cluster.caption}</span>
               </Link>
             </Overlay>
-          )}
+          ))}
         </Map>
       </div>
     </LoaderPortal>

src/pages/Login.jsx

@@ -1,20 +1,20 @@
+import { memo, useState } from 'react'
+import { Link, useHistory } from 'react-router-dom'
 import { Card, Form, Input, Button } from 'antd'
 import { UserOutlined, LockOutlined } from '@ant-design/icons'
-import { useState } from 'react'
-import { Link, useHistory } from 'react-router-dom'
 
 import { AuthService } from '@api'
+import { setUser } from '@utils/storage'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { loginRules, passwordRules } from '@utils/validationRules'
-import { setUser } from '@utils/storage'
 
 import '@styles/index.css'
 import logo from '@images/logo_32.png'
 
 const logoIcon = <img src={logo} alt={'АСБ'} className={'logo'} width={130} />
 
-export const Login = () => {
+export const Login = memo(() => {
   const history = useHistory()
   const [showLoader, setShowLoader] = useState(false)
 
@@ -51,6 +51,6 @@ export const Login = () => {
       </Card>
     </LoaderPortal>
   )
-}
+})
 
 export default Login

src/pages/Measure/MeasureTable.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, memo } from 'react'
 import { Button, Form, Input, Popconfirm, Timeline } from 'antd'
 import {
   CheckSquareOutlined,
@@ -9,20 +9,20 @@ import {
   DeleteOutlined
 } from '@ant-design/icons'
 
-import LoaderPortal from '../../components/LoaderPortal'
+import LoaderPortal from '@components/LoaderPortal'
-import { MeasureService } from '../../services/api'
+import { invokeWebApiWrapperAsync } from '@components/factory'
-import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { MeasureService } from '@api'
+import { formatDate } from '@utils'
 
 import { View } from './View'
 
-import '../../styles/index.css'
+import '@styles/index.css'
-import '../../styles/measure.css'
+import '@styles/measure.css'
-import { formatDate } from '../../utils'
 
 const createEditingColumns = (cols, renderDelegate) =>
   cols.map(col => ({ render: renderDelegate, ...col }))
 
-export const MeasureTable = ({idWell, group, updateMeasuresFunc, additionalButtons}) => {
+export const MeasureTable = memo(({idWell, group, updateMeasuresFunc, additionalButtons}) => {
   const [showLoader, setShowLoader] = useState(false)
   const [displayedValues, setDisplayedValues] = useState({})
   const [editingColumns, setEditingColumns] = useState(group.columns)
@@ -160,4 +160,6 @@ export const MeasureTable = ({idWell, group, updateMeasuresFunc, additionalButto
       </div>
     </>
   )
-}
+})
+
+export default MeasureTable

src/pages/Measure/index.jsx

@@ -1,5 +1,5 @@
 import { Button } from 'antd'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, memo } from 'react'
 import { TableOutlined } from '@ant-design/icons'
 
 import { MeasureService } from '@api'
@@ -41,7 +41,7 @@ const defaultData = [
   }
 ]
 
-export const Measure = ({ idWell }) => {
+export const Measure = memo(({ idWell }) => {
   const [showLoader, setShowLoader] = useState(false)
   const [isMeasuresUpdating, setIsMeasuresUpdating] = useState(true)
   const [data, setData] = useState(defaultData)
@@ -85,6 +85,6 @@ export const Measure = ({ idWell }) => {
       />
     </LoaderPortal>
   )
-}
+})
 
 export default Measure

src/pages/Messages.jsx

@@ -3,8 +3,8 @@ import { useState, useEffect, memo } from 'react'
 import { Table, Select, DatePicker, Input } from 'antd'
 
 import { MessageService } from '@api'
-import { invokeWebApiWrapperAsync } from '@components/factory'
 import LoaderPortal from '@components/LoaderPortal'
+import { invokeWebApiWrapperAsync } from '@components/factory'
 
 import '@styles/message.css'
 
@@ -103,8 +103,8 @@ export const Messages = memo(({ idWell }) => {
 
   return (
     <>
-      <div className='filter-group'>
+      <div className={'filter-group'}>
-        <h3 className='filter-group-heading'>Фильтр сообщений</h3>
+        <h3 className={'filter-group-heading'}>Фильтр сообщений</h3>
         <Select
           mode={'multiple'}
           allowClear

src/pages/Report/ReportCreationNotify.jsx

@@ -1,8 +1,19 @@
+import { memo } from 'react'
 import { Progress, Button } from 'antd'
 
 import { downloadFile } from '@components/factory'
 
-export const ReportCreationNotify = ({ progressData }) => (
+export const defaultProgressData = {
+  progressData: {
+    progress: 0.0,
+    operation: 'Создание отчета',
+    currentPage: 0,
+    totalPages: 0,
+    file: null
+  }
+}
+
+export const ReportCreationNotify = memo(({ progressData = defaultProgressData }) => (
   <>
     <Progress percent={ Number(progressData.progress?.toFixed(2)) } />
     <br/>
@@ -17,14 +28,4 @@ export const ReportCreationNotify = ({ progressData }) => (
       </Button>
     )}
   </>
-)
+))
-
-ReportCreationNotify.defaultProps = {
-  progressData: {
-    progress: 0.0,
-    operation: 'Создание отчета',
-    currentPage: 0,
-    totalPages: 0,
-    file: null
-  }
-}

src/pages/Report/Reports.jsx

@@ -1,5 +1,5 @@
 import { Button, Tooltip } from 'antd'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, memo } from 'react'
 import { FilePdfOutlined, FileTextOutlined } from '@ant-design/icons'
 
 import { ReportService } from '@api'
@@ -55,7 +55,7 @@ const columns = [
   },
 ]
 
-export const Reports = ({ idWell }) => {
+export const Reports = memo(({ idWell }) => {
   const [reports, setReports] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
@@ -80,6 +80,6 @@ export const Reports = ({ idWell }) => {
       />
     </LoaderPortal>
   )
-}
+})
 
 export default Reports

src/pages/Report/index.jsx

@@ -1,12 +1,12 @@
 import 'moment/locale/ru'
 import moment from 'moment'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, memo } from 'react'
 import { DatePicker, Radio, Button, Select, notification } from 'antd'
 
-import { ReportService } from '../../services/api'
+import { ReportService } from '@api'
-import { Subscribe } from '../../services/signalr'
+import { Subscribe } from '@services/signalr'
-import LoaderPortal from '../../components/LoaderPortal'
+import LoaderPortal from '@components/LoaderPortal'
-import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { invokeWebApiWrapperAsync } from '@components/factory'
 
 import { Reports } from './Reports'
 import { ReportCreationNotify } from './ReportCreationNotify'
@@ -31,7 +31,7 @@ const reportFormats = [
   { value: 1, label: 'LAS' },
 ]
 
-export default function Report({ idWell }) {
+export const Report = memo(({ idWell }) => {
   const [aviableDateRange, setAviableDateRange] = useState([moment(), moment()])
   const [filterDateRange, setFilterDateRange] = useState([
     moment().subtract(1, 'days').startOf('day'),
@@ -167,4 +167,6 @@ export default function Report({ idWell }) {
       <Reports idWell={idWell} />
     </div>
   )
-}
+})
+
+export default Report

src/pages/TelemetryView/SetpointSender.jsx

@@ -2,11 +2,11 @@ import { useState } from 'react'
 import { Select, Modal, Input, InputNumber } from 'antd'
 
 import { SetpointsService } from '@api'
+import { Grid, GridItem } from '@components/Grid'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { makeNumericRender, EditableTable } from '@components/Table'
 import { PeriodPicker, defaultPeriod } from '@components/PeriodPicker'
-import { Grid, GridItem } from '@components/Grid'
 
 export const SetpointSender = ({ idWell, onClose, visible, setpointNames }) => {
     const [expirePeriod, setExpirePeriod] = useState(defaultPeriod)

src/pages/TelemetryView/Setpoints.jsx

@@ -2,12 +2,12 @@ import moment from 'moment'
 import { Button, Modal } from 'antd'
 import { useState, useEffect } from 'react'
 
-import { Table } from '../../components/Table'
+import { Table } from '@components/Table'
-import { UserView } from '../../components/views'
+import { UserView } from '@components/views'
-import LoaderPortal from '../../components/LoaderPortal'
+import LoaderPortal from '@components/LoaderPortal'
-import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { invokeWebApiWrapperAsync } from '@components/factory'
-import { makeStringCutter } from '../../utils/string'
+import { makeStringCutter } from '@utils/string'
-import { SetpointsService } from '../../services/api'
+import { SetpointsService } from '@api'
 
 import { SetpointSender } from './SetpointSender'
 import { SetpointViewer, getSetpointStatus } from './SetpointViewer'

src/pages/WellOperations/ImportOperations.jsx

@@ -1,12 +1,13 @@
 import { Switch } from 'antd'
-import { useState } from 'react'
+import { memo, useState } from 'react'
+
 import { ErrorFetch } from '@components/ErrorFetch'
 import { UploadForm } from '@components/UploadForm'
 
 const errorTextStyle = { color: 'red', fontWeight: 'bold' }
 const uploadFormStyle = { marginTop: '24px' }
 
-export const ImportOperations = ({ idWell, onDone }) =>{
+export const ImportOperations = memo(({ idWell, onDone }) =>{
   const [deleteBeforeImport, setDeleteBeforeImport] = useState(false)
   const [errorText, setErrorText] = useState('')
 
@@ -38,4 +39,6 @@ export const ImportOperations = ({ idWell, onDone }) =>{
       <span style={errorTextStyle}>{errorText}</span>
     </div>
   )
-}
+})
+
+export default ImportOperations

src/pages/WellOperations/WellSectionsStat.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, memo } from 'react'
 
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
@@ -19,7 +19,7 @@ const columns = [
   makeColumnsPlanFact('Спуск ОК, м/ч'         ,'casingDownSpeed', { render: numericRender }),
 ]
 
-export const WellSectionsStat = ({idWell}) => {
+export const WellSectionsStat = memo(({ idWell }) => {
   const [sections, setSections] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
@@ -64,4 +64,6 @@ export const WellSectionsStat = ({idWell}) => {
       />
     </LoaderPortal>
   )
-}
+})
+
+export default WellSectionsStat