Removed unnecessary useEffect() from ClusterInfo tables

2021-09-02 09:52:57 +05:00 · 2021-09-02 09:52:57 +05:00 · c288b45dab
commit c288b45dab
parent bb84c348fc
5 changed files with 156 additions and 172 deletions
--- a/src/pages/Cluster/ClusterSections.jsx
+++ b/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,30 +38,10 @@ export default function ClusterSections({ clusterData }) {
  const [tvdDataForecast, setTvdDataForecast] = useState([]);
  const [wellOperations, setWellOperations] = useState([]);

-  calcAndUpdateStatsBySections(wellsStat ?? [], [
-    "sectionWellDepthPlan",
-    "sectionWellDepthFact",
-    "sectionBuildDaysPlan",
-    "sectionBuildDaysFact",
-    "sectionRateOfPenetrationPlan",
-    "sectionRateOfPenetrationFact",
-    "sectionRouteSpeedPlan",
-    "sectionRouteSpeedFact",
-    "sectionBhaDownSpeedPlan",
-    "sectionBhaDownSpeedFact",
-    "sectionBhaUpSpeedPlan",
-    "sectionBhaUpSpeedFact",
-    "sectionCasingDownSpeedPlan",
-    "sectionCasingDownSpeedFact",
-    "nonProductiveTimePlan",
-    "nonProductiveTimeFact",
-  ]);
-
-  useEffect(() => {
-    if (selectedWellId > 0) {
+  const getOperations = (wellId) => {
    invokeWebApiWrapperAsync(
      async () => {
-          const operations = await WellOperationStatService.getTvd(selectedWellId);
+        const operations = await WellOperationStatService.getTvd(wellId);
        
        setWellOperations(operations)

@ -86,12 +64,10 @@ export default function ClusterSections({ clusterData }) {
        setTvdDataForecast(tvdPredictData)
      },
      null,
-        `Не удалось загрузить операции по скважине "${selectedWellId}"`,
+      `Не удалось загрузить операции по скважине "${wellId}"`,
    );
  }
-  }, [selectedWellId]);

-  useEffect(() => {
  let rows = [];

  clusterData.statsWells?.forEach((well) => {
@ -136,8 +112,24 @@ export default function ClusterSections({ clusterData }) {
    });
  });

-    setWellsStat(rows);
-  }, [id, clusterData]);
+  calcAndUpdateStatsBySections(rows ?? [], [
+    "sectionWellDepthPlan",
+    "sectionWellDepthFact",
+    "sectionBuildDaysPlan",
+    "sectionBuildDaysFact",
+    "sectionRateOfPenetrationPlan",
+    "sectionRateOfPenetrationFact",
+    "sectionRouteSpeedPlan",
+    "sectionRouteSpeedFact",
+    "sectionBhaDownSpeedPlan",
+    "sectionBhaDownSpeedFact",
+    "sectionBhaUpSpeedPlan",
+    "sectionBhaUpSpeedFact",
+    "sectionCasingDownSpeedPlan",
+    "sectionCasingDownSpeedFact",
+    "nonProductiveTimePlan",
+    "nonProductiveTimeFact",
+  ]);

  const columns = [
    makeTextColumn("скв №", "caption", null, null, 
@ -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 }}
--- a/src/pages/Cluster/ClusterWells.jsx
+++ b/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 }) {
-  let { id } = useParams();
-  const [wellsStat, setWellsStat] = useState([]);
-  const [selectedWellId, setSelectedWellId] = useState([]);
+export default function ClusterWells({clusterData}) {
+
  const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
  const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
  const [tvdDataPlan, setTvdDataPlan] = useState([]);
@ -40,23 +37,10 @@ export default function ClusterWells({ clusterData }) {
  const [tvdDataForecast, setTvdDataForecast] = useState([]);
  const [wellOperations, setWellOperations] = useState([]);

-  calcAndUpdateStatsBySections(wellsStat ?? [], [
-    "factStart",
-    "factEnd",
-    "periodPlan",
-    "periodFact",
-    "rateOfPenetrationPlan",
-    "rateOfPenetrationFact",
-    "routeSpeedPlan",
-    "routeSpeedFact",
-    "notProductiveTime",
-  ]);
-
-  useEffect(() => {
-    if (selectedWellId > 0) {
+  const getOperations = (wellId) => {
    invokeWebApiWrapperAsync(
      async () => {
-          const operations = await WellOperationStatService.getTvd(selectedWellId);
+        const operations = await WellOperationStatService.getTvd(wellId);
        
        setWellOperations(operations)

@ -79,12 +63,10 @@ export default function ClusterWells({ clusterData }) {
        setTvdDataForecast(tvdPredictData)
      },
      null,
-        `Не удалось загрузить операции по скважине "${selectedWellId}"`,
+      `Не удалось загрузить операции по скважине "${wellId}"`,
    );
  }
-  }, [selectedWellId]);

-  useEffect(() => {
  let tableData = clusterData.statsWells?.map((well) => {
    
    if (!filtersWellsType.some((el) => el.text === well.wellType))
@ -118,8 +100,17 @@ export default function ClusterWells({ clusterData }) {
    };
  });

-    setWellsStat(tableData);
-  }, [id, clusterData]);
+  calcAndUpdateStatsBySections(tableData ?? [], [
+    "factStart",
+    "factEnd",
+    "periodPlan",
+    "periodFact",
+    "rateOfPenetrationPlan",
+    "rateOfPenetrationFact",
+    "routeSpeedPlan",
+    "routeSpeedFact",
+    "notProductiveTime",
+  ]);

  const columns = [
    makeTextColumn("скв №", "caption", null, null, 
@ -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
--- a/src/pages/Cluster/index.jsx
+++ b/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}"`
--- a/src/services/api/services/FileService.ts
+++ b/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({
--- a/src/services/api/services/WellOperationService.ts
+++ b/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({