Рефакторинг стиля кода

src/pages/WellOperations/WellCompositeEditor/WellCompositeInfo.jsx

@@ -1,25 +0,0 @@
-import { useEffect, useState } from 'react'
-import { invokeWebApiWrapperAsync } from '../../../components/factory'
-import LoaderPortal from '../../../components/LoaderPortal'
-import { OperationStatService } from '../../../services/api'
-import ClusterWells from '../../Cluster/ClusterWells'
-
-export const WellCompositeInfo = ({idWell, selectedIdWells}) => {
-    const [showLoader, setShowLoader] = useState(false)
-    const [statsWells, setStatsWells] = useState([])
-
-    useEffect(() => invokeWebApiWrapperAsync(
-        async () => {
-            const operations = await OperationStatService.getWellsStat(selectedIdWells)
-            setStatsWells(operations)
-        },
-        setShowLoader,
-        'Не удалось загрузить список операции по скважинам'
-    ), [selectedIdWells])
-
-    return (
-        <LoaderPortal show={showLoader}>
-            <ClusterWells statsWells={statsWells}/>
-        </LoaderPortal>
-    )
-}

src/pages/WellOperations/WellCompositeEditor/WellCompositeSections.jsx

@@ -14,8 +14,8 @@ import {
   makeFilterMinMaxFunction,
   getOperations
 } from '../../Cluster/functions'
-import { Tvd } from '../Tvd'
 import WellOperationsTable from '../../Cluster/WellOperationsTable'
+import { Tvd } from '../Tvd'
 import { getColumns } from '../WellDrillParams'
 
 
@@ -28,19 +28,18 @@ const filtersSectionsType = []
 const DAY_IN_MS = 1000 * 60 * 60 * 24
 
 export const WellCompositeSections = ({ idWell, statsWells, selectedSections }) => {
-
-  const [showLoader, setShowLoader] = useState(false)
-  const [showParamsLoader, setShowParamsLoader] = useState(false)
-  const [selectedWellId, setSelectedWellId] = useState(0)
-  const [selectedWells, setSelectedWells] = useState([])
-  const [selectedWellsKeys, setSelectedWellsKeys] = useState([])
-  const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
-  const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
-  const [isParamsModalVisible, setIsParamsModalVisible] = useState(false)
-  const [wellOperations, setWellOperations] = useState([])
   const [rows, setRows] = useState([])
   const [params, setParams] = useState([])
   const [paramsColumns, setParamsColumns] = useState([])
+  const [selectedWells, setSelectedWells] = useState([])
+  const [wellOperations, setWellOperations] = useState([])
+  const [selectedWellsKeys, setSelectedWellsKeys] = useState([])
+  const [selectedWellId, setSelectedWellId] = useState(0)
+  const [showLoader, setShowLoader] = useState(false)
+  const [showParamsLoader, setShowParamsLoader] = useState(false)
+  const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
+  const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
+  const [isParamsModalVisible, setIsParamsModalVisible] = useState(false)
 
   useEffect(() => (async() => setParamsColumns(await getColumns(idWell)))(), [idWell])
 
@@ -63,7 +62,7 @@ export const WellCompositeSections = ({ idWell, statsWells, selectedSections })
         if (!filtersSectionsType.some((el) => el.text === section.caption))
           filtersSectionsType.push({ text: section.caption, value: section.caption })
 
-        let row = {
+        const row = {
           key: well.caption + section.id,
           id: well.id,
           sectionId: section.id,
@@ -138,18 +137,26 @@ export const WellCompositeSections = ({ idWell, statsWells, selectedSections })
     makeNumericColumnPlanFact('НПВ, сут', 'nonProductiveTime', filtersMinMax, makeFilterMinMaxFunction, null, '70px'),
     {
       title: 'TVD',
-      render: (value) => <Button onClick={()=> {
+      render: (value) => (
-        setSelectedWellId(value.id)
+        <Button onClick={() => {
-        setIsTVDModalVisible(true)
+          setSelectedWellId(value.id)
-      }}><LineChartOutlined /></Button>,
+          setIsTVDModalVisible(true)
+        }}>
+          <LineChartOutlined />
+        </Button>
+      ),
       align: 'center'
     },
     {
       title: 'Операции',
-      render: (value) => <Button onClick={()=> {
+      render: (value) => (
-        setSelectedWellId(value.id)
+        <Button onClick={()=> {
-        setIsOpsModalVisible(true)
+          setSelectedWellId(value.id)
-      }}><ProfileOutlined /></Button>,
+          setIsOpsModalVisible(true)
+        }}>
+          <ProfileOutlined />
+        </Button>
+      ),
       align: 'center'
     },
     {
@@ -221,13 +228,17 @@ export const WellCompositeSections = ({ idWell, statsWells, selectedSections })
         scroll={{ x: true }}
         pagination={false}
       />
-      <Row justify={'end'} style={{margin: '1rem 0'}}><Col>
+      <Row justify={'end'} style={{ margin: '1rem 0' }}>
+        <Col>
           <Button
             size={'large'}
             disabled={selectedWells.length <= 0}
             onClick={onParamButtonClick}
-          >Режимы</Button>
+          >
-      </Col></Row>
+            Режимы
+          </Button>
+        </Col>
+      </Row>
 
       <Modal
         title={'TVD'}
@@ -259,14 +270,11 @@ export const WellCompositeSections = ({ idWell, statsWells, selectedSections })
         visible={isParamsModalVisible}
         onCancel={() => setIsParamsModalVisible(false)}
         width={1700}
-        footer={
+        footer={(
-          <Popconfirm title='Заменить существующие режимы выбранными?' onConfirm={onParamsAddClick}>
+          <Popconfirm title={'Заменить существующие режимы выбранными?'} onConfirm={onParamsAddClick}>
-            <Button
+            <Button size={'large'} disabled={params.length <= 0}>Сохранить</Button>
-              size={'large'}
-              disabled={params.length <= 0}
-            >Сохранить</Button>
           </Popconfirm>
-        }
+        )}
       >
         <LoaderPortal show={showParamsLoader}>
           <Table

src/pages/WellOperations/WellCompositeEditor/index.jsx

@@ -1,26 +1,32 @@
-import { Col, Layout, Menu, Row, Tag, TreeSelect } from 'antd'
 import { useState, useEffect } from 'react'
 import { Redirect, Route, Switch, Link, useParams } from 'react-router-dom'
-import { DepositService, WellCompositeService } from '../../../services/api'
+import { Col, Layout, Menu, Row, Tag, TreeSelect } from 'antd'
-import { invokeWebApiWrapperAsync } from '../../../components/factory'
+
 import LoaderPortal from '../../../components/LoaderPortal'
-import { WellCompositeSections } from './WellCompositeSections'
+import { invokeWebApiWrapperAsync } from '../../../components/factory'
-import { OperationStatService } from '../../../services/api'
+import {
+    DepositService,
+    OperationStatService,
+    WellCompositeService,
+} from '../../../services/api'
+import { arrayOrDefault } from '../../../utils'
+
 import ClusterWells from '../../Cluster/ClusterWells'
+import { WellCompositeSections } from './WellCompositeSections'
 
 const { Content } = Layout
 
-export const WellCompositeEditor = ({idWell}) => {
+export const WellCompositeEditor = ({ idWell }) => {
-    const { tab } = useParams()
     const rootPath = `/well/${idWell}/operations/composite`
+    const { tab } = useParams()
 
     const [wellsTree, setWellsTree] = useState([])
+    const [wellLabels, setWellLabels] = useState([])
+    const [statsWells, setStatsWells] = useState([])
     const [showLoader, setShowLoader] = useState(false)
     const [showTabLoader, setShowTabLoader] = useState(false)
     const [selectedIdWells, setSelectedIdWells] = useState([])
-    const [statsWells, setStatsWells] = useState([])
     const [selectedSections, setSelectedSections] = useState([])
-    const [wellLabels, setWellLabels] = useState([])
 
     useEffect(() => {
         invokeWebApiWrapperAsync(
@@ -44,14 +50,14 @@ export const WellCompositeEditor = ({idWell}) => {
                                 value: well.id,
                             })
                         }),
-                    }))
+                    })),
                 }))
                 setWellsTree(wellsTree)
                 setWellLabels(labels)
 
                 try {
                     const selected = await WellCompositeService.get(idWell)
-                    setSelectedSections(Array.isArray(selected) ? selected : [])
+                    setSelectedSections(arrayOrDefault(selected))
                 } catch(e) {
                     setSelectedSections([])
                 }
@@ -69,7 +75,7 @@ export const WellCompositeEditor = ({idWell}) => {
     useEffect(() => invokeWebApiWrapperAsync(
         async () => {
             const stats = await OperationStatService.getWellsStat(selectedIdWells)
-            setStatsWells(Array.isArray(stats) ? stats : [])
+            setStatsWells(arrayOrDefault(stats))
         },
         setShowTabLoader,
         'Не удалось загрузить статистику по скважинам/секциям'
@@ -85,7 +91,7 @@ export const WellCompositeEditor = ({idWell}) => {
                         showCheckedStrategy={TreeSelect.SHOW_CHILD}
                         treeDefaultExpandAll
                         treeData={wellsTree}
-                        treeLine={{showLeafIcon: false}}
+                        treeLine={{ showLeafIcon: false }}
                         onChange={(value) => setSelectedIdWells(value)}
                         size={'middle'}
                         style={{width: '100%'}}