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,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 }}
--- 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,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
--- 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({