Removed unnecessary useEffect() from ClusterInfo tables

src/pages/Cluster/ClusterSections.jsx

@@ -1,7 +1,7 @@
 import { Table, Tag, Button, Badge, Divider, Modal } from "antd";
-import { useParams, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import {
   makeTextColumn,
   makeNumericColumnPlanFact
@@ -28,11 +28,9 @@ const filtersSectionsType = [];
 
 
 export default function ClusterSections({ clusterData }) {
-  let { id } = useParams();
+
-  const [wellsStat, setWellsStat] = useState([]);
   const [selectedWells, setSelectedWells] = useState([]);
   const [selectedWellsKeys, setSelectedWellsKeys] = useState([]);
-  const [selectedWellId, setSelectedWellId] = useState([]);
   const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
   const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
   const [tvdDataPlan, setTvdDataPlan] = useState([]);
@@ -40,7 +38,81 @@ export default function ClusterSections({ clusterData }) {
   const [tvdDataForecast, setTvdDataForecast] = useState([]);
   const [wellOperations, setWellOperations] = useState([]);
 
-  calcAndUpdateStatsBySections(wellsStat ?? [], [
+  const getOperations = (wellId) => {
+    invokeWebApiWrapperAsync(
+      async () => {
+        const operations = await WellOperationStatService.getTvd(wellId);
+        
+        setWellOperations(operations)
+
+        const tvdPlanData = operations.map(el => { 
+          return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
+        }).filter(el => el.key)
+        
+        setTvdDataPlan(tvdPlanData)
+
+        const tvdFactData = operations.map(el => { 
+          return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
+        }).filter(el => el.key)
+
+        setTvdDataFact(tvdFactData)
+
+        const tvdPredictData = operations.map(el => { 
+          return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
+        }).filter(el => el.key)
+
+        setTvdDataForecast(tvdPredictData)
+      },
+      null,
+      `Не удалось загрузить операции по скважине "${wellId}"`,
+    );
+  }
+
+  let rows = [];
+
+  clusterData.statsWells?.forEach((well) => {
+    well.sections.forEach((section) => {
+      let row = {
+        key: well.caption + section.id,
+        id: well.id,
+        caption: well.caption,
+        sectionType: section.caption,
+        sectionWellDepthPlan: section.plan?.wellDepthEnd,
+        sectionWellDepthFact: section.fact?.wellDepthEnd,
+        sectionBuildDaysPlan: (
+          (new Date(section.plan?.end) - new Date(section.plan?.start)) /
+            (1000 * 60 * 60 * 24)
+        ),
+        sectionBuildDaysFact: (
+          (new Date(section.fact?.end) - new Date(section.fact?.start)) /
+            (1000 * 60 * 60 * 24)
+        ),
+        sectionRateOfPenetrationPlan: section.plan?.rop,
+        sectionRateOfPenetrationFact: section.fact?.rop,
+        sectionRouteSpeedPlan: section.plan?.routeSpeed,
+        sectionRouteSpeedFact: section.fact?.routeSpeed,
+        sectionBhaDownSpeedPlan: section.plan?.bhaDownSpeed,
+        sectionBhaDownSpeedFact: section.fact?.bhaDownSpeed,
+        sectionBhaUpSpeedPlan: section.plan?.bhaUpSpeed,
+        sectionBhaUpSpeedFact: section.fact?.bhaUpSpeed,
+        sectionCasingDownSpeedPlan: section.plan?.casingDownSpeed,
+        sectionCasingDownSpeedFact: section.fact?.casingDownSpeed,
+        nonProductiveTimePlan: section.plan?.nonProductiveHours,
+        nonProductiveTimeFact: section.fact?.nonProductiveHours,
+        companies: well.companies,
+      };
+
+      rows.push(row);
+
+      if (!filtersSectionsType.some((el) => el.text === section.caption))
+        filtersSectionsType.push({
+          text: section.caption,
+          value: section.caption,
+        });
+    });
+  });
+
+  calcAndUpdateStatsBySections(rows ?? [], [
     "sectionWellDepthPlan",
     "sectionWellDepthFact",
     "sectionBuildDaysPlan",
@@ -59,86 +131,6 @@ export default function ClusterSections({ clusterData }) {
     "nonProductiveTimeFact",
   ]);
 
-  useEffect(() => {
-    if (selectedWellId > 0) {
-      invokeWebApiWrapperAsync(
-        async () => {
-          const operations = await WellOperationStatService.getTvd(selectedWellId);
-          
-          setWellOperations(operations)
-
-          const tvdPlanData = operations.map(el => { 
-            return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
-          }).filter(el => el.key)
-          
-          setTvdDataPlan(tvdPlanData)
-  
-          const tvdFactData = operations.map(el => { 
-            return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
-          }).filter(el => el.key)
-  
-          setTvdDataFact(tvdFactData)
-  
-          const tvdPredictData = operations.map(el => { 
-            return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
-          }).filter(el => el.key)
-  
-          setTvdDataForecast(tvdPredictData)
-        },
-        null,
-        `Не удалось загрузить операции по скважине "${selectedWellId}"`,
-      );
-    }
-  }, [selectedWellId]);
-
-  useEffect(() => {
-    let rows = [];
-
-    clusterData.statsWells?.forEach((well) => {
-      well.sections.forEach((section) => {
-        let row = {
-          key: well.caption + section.id,
-          id: well.id,
-          caption: well.caption,
-          sectionType: section.caption,
-          sectionWellDepthPlan: section.plan?.wellDepthEnd,
-          sectionWellDepthFact: section.fact?.wellDepthEnd,
-          sectionBuildDaysPlan: (
-            (new Date(section.plan?.end) - new Date(section.plan?.start)) /
-              (1000 * 60 * 60 * 24)
-          ),
-          sectionBuildDaysFact: (
-            (new Date(section.fact?.end) - new Date(section.fact?.start)) /
-              (1000 * 60 * 60 * 24)
-          ),
-          sectionRateOfPenetrationPlan: section.plan?.rop,
-          sectionRateOfPenetrationFact: section.fact?.rop,
-          sectionRouteSpeedPlan: section.plan?.routeSpeed,
-          sectionRouteSpeedFact: section.fact?.routeSpeed,
-          sectionBhaDownSpeedPlan: section.plan?.bhaDownSpeed,
-          sectionBhaDownSpeedFact: section.fact?.bhaDownSpeed,
-          sectionBhaUpSpeedPlan: section.plan?.bhaUpSpeed,
-          sectionBhaUpSpeedFact: section.fact?.bhaUpSpeed,
-          sectionCasingDownSpeedPlan: section.plan?.casingDownSpeed,
-          sectionCasingDownSpeedFact: section.fact?.casingDownSpeed,
-          nonProductiveTimePlan: section.plan?.nonProductiveHours,
-          nonProductiveTimeFact: section.fact?.nonProductiveHours,
-          companies: well.companies,
-        };
-
-        rows.push(row);
-
-        if (!filtersSectionsType.some((el) => el.text === section.caption))
-          filtersSectionsType.push({
-            text: section.caption,
-            value: section.caption,
-          });
-      });
-    });
-
-    setWellsStat(rows);
-  }, [id, clusterData]);
-
   const columns = [
     makeTextColumn("скв №", "caption", null, null, 
       (_, item) => <Link to={`/well/${item.id}`}>{item.caption ?? '-'}</Link>
@@ -222,7 +214,7 @@ export default function ClusterSections({ clusterData }) {
     {
       title: "TVD",
       render: (value) => <Button onClick={()=> {
-        setSelectedWellId(value.id)
+        getOperations(value.id)
         setIsTVDModalVisible(true) 
       }}><LineChartOutlined /></Button>,
       align: 'center'
@@ -230,7 +222,7 @@ export default function ClusterSections({ clusterData }) {
     {
       title: "Операции",
       render: (value) => <Button onClick={()=> {
-        setSelectedWellId(value.id)
+        getOperations(value.id)
         setIsOpsModalVisible(true) 
       }}><ProfileOutlined /></Button>,
       align: 'center'
@@ -255,7 +247,7 @@ export default function ClusterSections({ clusterData }) {
     <>
       <Table
         columns={columns}
-        dataSource={wellsStat}
+        dataSource={rows}
         size={"small"}
         bordered
         scroll={{ x: true, y: 620 }}

src/pages/Cluster/ClusterWells.jsx

@@ -1,6 +1,5 @@
-import { useParams } from "react-router-dom";
 import { Link } from "react-router-dom";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Table, Tag, Button, Modal } from "antd";
 import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons";
 import {
@@ -29,10 +28,8 @@ const filtersMinMax = [
 
 const filtersWellsType = [];
 
-export default function ClusterWells({ clusterData }) {
+export default function ClusterWells({clusterData}) {
-  let { id } = useParams();
+
-  const [wellsStat, setWellsStat] = useState([]);
-  const [selectedWellId, setSelectedWellId] = useState([]);
   const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
   const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
   const [tvdDataPlan, setTvdDataPlan] = useState([]);
@@ -40,7 +37,70 @@ export default function ClusterWells({ clusterData }) {
   const [tvdDataForecast, setTvdDataForecast] = useState([]);
   const [wellOperations, setWellOperations] = useState([]);
 
-  calcAndUpdateStatsBySections(wellsStat ?? [], [
+  const getOperations = (wellId) => {
+    invokeWebApiWrapperAsync(
+      async () => {
+        const operations = await WellOperationStatService.getTvd(wellId);
+        
+        setWellOperations(operations)
+
+        const tvdPlanData = operations.map(el => { 
+          return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
+        }).filter(el => el.key)
+        
+        setTvdDataPlan(tvdPlanData)
+
+        const tvdFactData = operations.map(el => { 
+          return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
+        }).filter(el => el.key)
+
+        setTvdDataFact(tvdFactData)
+
+        const tvdPredictData = operations.map(el => { 
+          return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
+        }).filter(el => el.key)
+
+        setTvdDataForecast(tvdPredictData)
+      },
+      null,
+      `Не удалось загрузить операции по скважине "${wellId}"`,
+    );
+  }
+
+  let tableData = clusterData.statsWells?.map((well) => {
+    
+    if (!filtersWellsType.some((el) => el.text === well.wellType))
+    filtersWellsType.push({
+      text: well.wellType,
+      value: well.wellType,
+    });
+
+    return {
+      key: well.id,
+      id: well.id,
+      caption: well.caption,
+      wellType: well.wellType,
+      factStart: well.total?.fact?.start,
+      factEnd: well.total?.fact?.end,
+      periodPlan: (
+        (new Date(well.total?.plan?.end) - new Date(well.total?.plan?.start)) /
+          (1000 * 60 * 60 * 24)
+      ),
+      periodFact: (
+        (new Date(well.total?.fact?.end) - new Date(well.total?.fact?.start)) /
+          (1000 * 60 * 60 * 24)
+      ),
+      rateOfPenetrationPlan: well.total?.plan?.rop,
+      rateOfPenetrationFact: well.total?.fact?.rop,
+      routeSpeedPlan: well.total?.plan?.routeSpeed,
+      routeSpeedFact: well.total?.fact?.routeSpeed,
+      notProductiveTimePlan: well.total?.plan?.nonProductiveHours,
+      notProductiveTimeFact: well.total?.fact?.nonProductiveHours,
+      companies: well.companies,
+    };
+  });
+
+  calcAndUpdateStatsBySections(tableData ?? [], [
     "factStart",
     "factEnd",
     "periodPlan",
@@ -52,75 +112,6 @@ export default function ClusterWells({ clusterData }) {
     "notProductiveTime",
   ]);
 
-  useEffect(() => {
-    if (selectedWellId > 0) {
-      invokeWebApiWrapperAsync(
-        async () => {
-          const operations = await WellOperationStatService.getTvd(selectedWellId);
-          
-          setWellOperations(operations)
-
-          const tvdPlanData = operations.map(el => { 
-            return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
-          }).filter(el => el.key)
-          
-          setTvdDataPlan(tvdPlanData)
-  
-          const tvdFactData = operations.map(el => { 
-            return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
-          }).filter(el => el.key)
-  
-          setTvdDataFact(tvdFactData)
-  
-          const tvdPredictData = operations.map(el => { 
-            return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
-          }).filter(el => el.key)
-  
-          setTvdDataForecast(tvdPredictData)
-        },
-        null,
-        `Не удалось загрузить операции по скважине "${selectedWellId}"`,
-      );
-    }
-  }, [selectedWellId]);
-
-  useEffect(() => {
-    let tableData = clusterData.statsWells?.map((well) => {
-      
-      if (!filtersWellsType.some((el) => el.text === well.wellType))
-      filtersWellsType.push({
-        text: well.wellType,
-        value: well.wellType,
-      });
-
-      return {
-        key: well.id,
-        id: well.id,
-        caption: well.caption,
-        wellType: well.wellType,
-        factStart: well.total?.fact?.start,
-        factEnd: well.total?.fact?.end,
-        periodPlan: (
-          (new Date(well.total?.plan?.end) - new Date(well.total?.plan?.start)) /
-            (1000 * 60 * 60 * 24)
-        ),
-        periodFact: (
-          (new Date(well.total?.fact?.end) - new Date(well.total?.fact?.start)) /
-            (1000 * 60 * 60 * 24)
-        ),
-        rateOfPenetrationPlan: well.total?.plan?.rop,
-        rateOfPenetrationFact: well.total?.fact?.rop,
-        routeSpeedPlan: well.total?.plan?.routeSpeed,
-        routeSpeedFact: well.total?.fact?.routeSpeed,
-        notProductiveTimePlan: well.total?.plan?.nonProductiveHours,
-        notProductiveTimeFact: well.total?.fact?.nonProductiveHours,
-        companies: well.companies,
-      };
-    });
-
-    setWellsStat(tableData);
-  }, [id, clusterData]);
-
   const columns = [
     makeTextColumn("скв №", "caption", null, null, 
       (_, item) => (<Link to={`/well/${item.id}`}>{item.caption ?? '-'}</Link>
@@ -181,7 +172,7 @@ export default function ClusterWells({ clusterData }) {
     {
       title: "TVD",
       render: (value) => <Button onClick={()=> {
-        setSelectedWellId(value.id)
+        getOperations(value.id)
         setIsTVDModalVisible(true) 
       }}><LineChartOutlined /></Button>,
       align: 'center'
@@ -189,7 +180,7 @@ export default function ClusterWells({ clusterData }) {
     {
       title: "Операции",
       render: (value) => <Button onClick={()=> {
-        setSelectedWellId(value.id)
+        getOperations(value.id)
         setIsOpsModalVisible(true) 
       }}><ProfileOutlined /></Button>,
       align: 'center'
@@ -207,7 +198,7 @@ export default function ClusterWells({ clusterData }) {
     <div>
       <Table
         columns={columns}
-        dataSource={wellsStat}
+        dataSource={tableData}
         size={"small"}
         bordered
         pagination={false}
@@ -225,7 +216,8 @@ export default function ClusterWells({ clusterData }) {
         <ChartDepthToDay 
           dataPlan={tvdDataPlan} 
           dataFact={tvdDataFact} 
-          dataForecast={tvdDataForecast} />
+          dataForecast={tvdDataForecast} 
+        />
       </Modal>
 
       <Modal

src/pages/Cluster/index.jsx

@@ -21,7 +21,7 @@ export default function Cluster() {
         const clusterData = await WellOperationStatService.getStatCluster(
           idClaster
         );
-        setData(clusterData);
+        setData(clusterData ?? []);
       },
       setShowLoader,
       `Не удалось загрузить данные по кусту "${idClaster}"`

src/services/api/services/FileService.ts

@@ -51,7 +51,7 @@ companyName?: string,
 fileName?: string,
 begin?: string,
 end?: string,
-skip: number = 0,
+skip?: number,
 take: number = 32,
 ): Promise<FileInfoDtoPaginationContainer> {
         const result = await __request({

src/services/api/services/WellOperationService.ts

@@ -48,7 +48,7 @@ begin?: string,
 end?: string,
 minDepth: number = -1.7976931348623157e+308,
 maxDepth: number = 1.7976931348623157e+308,
-skip: number = 0,
+skip?: number,
 take: number = 32,
 ): Promise<WellOperationDtoPaginationContainer> {
         const result = await __request({