Moved reusing TVD request to .getOperations() function

src/pages/Cluster/ClusterSections.jsx

@@ -1,16 +1,19 @@
 import { Table, Tag, Button, Badge, Divider, Modal } from "antd";
 import { Link } from "react-router-dom";
 import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   makeTextColumn,
   makeNumericColumnPlanFact
 } from "../../components/Table";
 import { invokeWebApiWrapperAsync } from '../../components/factory';
-import { WellOperationStatService } from '../../services/api';
 import ChartDepthToDay from '../../components/charts/ChartDepthToDay';
 import WellOperationsTable from './WellOperationsTable'
-import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction } from "./functions";
+import { 
+  calcAndUpdateStatsBySections, 
+  makeFilterMinMaxFunction,
+  getOperations 
+} from "./functions";
 
 
 const filtersMinMax = [
@@ -29,6 +32,7 @@ const filtersSectionsType = [];
 
 export default function ClusterSections({ clusterData }) {
 
+  const [selectedWellId, setSelectedWellId] = useState(0)
   const [selectedWells, setSelectedWells] = useState([]);
   const [selectedWellsKeys, setSelectedWellsKeys] = useState([]);
   const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
@@ -38,35 +42,25 @@ export default function ClusterSections({ clusterData }) {
   const [tvdDataForecast, setTvdDataForecast] = useState([]);
   const [wellOperations, setWellOperations] = useState([]);
 
-  const getOperations = (wellId) => {
-    invokeWebApiWrapperAsync(
-      async () => {
-        const operations = await WellOperationStatService.getTvd(wellId);
-        
-        setWellOperations(operations)
-
-        const tvdPlanData = operations.map(el => { 
-          return {key: el.caption, depth: el.plan?.wellDepth, date: el.plan?.startDate}
-        }).filter(el => el.key)
-        
-        setTvdDataPlan(tvdPlanData)
-
-        const tvdFactData = operations.map(el => { 
-          return {key: el.caption, depth: el.fact?.wellDepth, date: el.fact?.startDate}
-        }).filter(el => el.key)
-
-        setTvdDataFact(tvdFactData)
-
-        const tvdPredictData = operations.map(el => { 
-          return {key: el.caption, depth: el.predict?.wellDepth, date: el.predict?.startDate}
-        }).filter(el => el.key)
-
-        setTvdDataForecast(tvdPredictData)
-      },
-      null,
-      `Не удалось загрузить операции по скважине "${wellId}"`,
-    );
-  }
+  useEffect(() => {
+    if (selectedWellId > 0) {
+      invokeWebApiWrapperAsync(
+        async () => {
+          const operations = await getOperations(selectedWellId);
+          
+          setWellOperations(operations.operations)
+          
+          setTvdDataPlan(operations.plan)
+  
+          setTvdDataFact(operations.fact)
+  
+          setTvdDataForecast(operations.predict)
+        },
+        null,
+        `Не удалось загрузить операции по скважине "${selectedWellId}"`,
+      );
+    }
+  }, [selectedWellId]);
 
   let rows = [];
 
@@ -214,7 +208,7 @@ export default function ClusterSections({ clusterData }) {
     {
       title: "TVD",
       render: (value) => <Button onClick={()=> {
-        getOperations(value.id)
+        setSelectedWellId(value.id)
         setIsTVDModalVisible(true) 
       }}><LineChartOutlined /></Button>,
       align: 'center'
@@ -222,7 +216,7 @@ export default function ClusterSections({ clusterData }) {
     {
       title: "Операции",
       render: (value) => <Button onClick={()=> {
-        getOperations(value.id)
+        setSelectedWellId(value.id)
         setIsOpsModalVisible(true) 
       }}><ProfileOutlined /></Button>,
       align: 'center'

src/pages/Cluster/ClusterWells.jsx

@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Table, Tag, Button, Modal } from "antd";
 import { LineChartOutlined, ProfileOutlined } from "@ant-design/icons";
 import {
@@ -11,9 +11,9 @@ import {
 } from "../../components/Table";
 import { calcAndUpdateStatsBySections, makeFilterMinMaxFunction } from "./functions";
 import { invokeWebApiWrapperAsync } from '../../components/factory';
-import { WellOperationStatService } from '../../services/api';
 import ChartDepthToDay from '../../components/charts/ChartDepthToDay';
 import WellOperationsTable from './WellOperationsTable'
+import { getOperations } from "./functions";
 
 const filtersMinMax = [
   {
@@ -30,6 +30,7 @@ const filtersWellsType = [];
 
 export default function ClusterWells({clusterData}) {
 
+  const [selectedWellId, setSelectedWellId] = useState(0)
   const [isTVDModalVisible, setIsTVDModalVisible] = useState(false)
   const [isOpsModalVisible, setIsOpsModalVisible] = useState(false)
   const [tvdDataPlan, setTvdDataPlan] = useState([]);
@@ -37,35 +38,25 @@ export default function ClusterWells({clusterData}) {
   const [tvdDataForecast, setTvdDataForecast] = useState([]);
   const [wellOperations, setWellOperations] = useState([]);
 
-  const getOperations = (wellId) => {
+useEffect(() => {
+  if (selectedWellId > 0) {
     invokeWebApiWrapperAsync(
       async () => {
-        const operations = await WellOperationStatService.getTvd(wellId);
+        const operations = await getOperations(selectedWellId);
         
-        setWellOperations(operations)
-
-        const tvdPlanData = operations.map(el => { 
-          return {key: el.caption, depth: el.plan?.wellDepth, date: el.plan?.startDate}
-        }).filter(el => el.key)
+        setWellOperations(operations.operations)
         
-        setTvdDataPlan(tvdPlanData)
+        setTvdDataPlan(operations.plan)
 
-        const tvdFactData = operations.map(el => { 
-          return {key: el.caption, depth: el.fact?.wellDepth, date: el.fact?.startDate}
-        }).filter(el => el.key)
+        setTvdDataFact(operations.fact)
 
-        setTvdDataFact(tvdFactData)
-
-        const tvdPredictData = operations.map(el => { 
-          return {key: el.caption, depth: el.predict?.wellDepth, date: el.predict?.startDate}
-        }).filter(el => el.key)
-
-        setTvdDataForecast(tvdPredictData)
+        setTvdDataForecast(operations.predict)
       },
       null,
-      `Не удалось загрузить операции по скважине "${wellId}"`,
+      `Не удалось загрузить операции по скважине "${selectedWellId}"`,
     );
   }
+}, [selectedWellId]);
 
   let tableData = clusterData.statsWells?.map((well) => {
     
@@ -173,7 +164,7 @@ export default function ClusterWells({clusterData}) {
       title: "TVD",
       key: "tvd",
       render: (value) => <Button onClick={()=> {
-        getOperations(value.id)
+        setSelectedWellId(value.id)
         setIsTVDModalVisible(true) 
       }}><LineChartOutlined /></Button>,
       align: 'center'
@@ -182,7 +173,7 @@ export default function ClusterWells({clusterData}) {
       title: "Операции",
       key: "operations",
       render: (value) => <Button onClick={()=> {
-        getOperations(value.id)
+        setSelectedWellId(value.id)
         setIsOpsModalVisible(true) 
       }}><ProfileOutlined /></Button>,
       align: 'center'

src/pages/Cluster/functions.jsx

@@ -1,6 +1,26 @@
+import { WellOperationStatService } from '../../services/api';
+
 const maxPrefix = "isMax"
 const minPrefix = "isMin"
 
+export const getOperations = async (idWell) => {
+  const ops = await WellOperationStatService.getTvd(idWell);
+
+  const planData = ops.map(el => { 
+    return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
+  }).filter(el => el.key)
+
+  const factData = ops.map(el => { 
+    return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
+  }).filter(el => el.key)
+
+  const predictData = ops.map(el => { 
+    return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
+  }).filter(el => el.key)
+
+  return { operations: ops, plan: planData, fact: factData, predict: predictData }
+} 
+
 export const makeFilterMinMaxFunction = (key) => (filterValue, 
   dataItem) =>
     filterValue === "max"

src/pages/WellOperations/Tvd.jsx

@@ -1,7 +1,7 @@
 import ChartDepthToDay from '../../components/charts/ChartDepthToDay';
 import { useState, useEffect } from 'react';
 import { invokeWebApiWrapperAsync } from '../../components/factory';
-import { WellOperationStatService } from '../../services/api';
+import { getOperations } from '../Cluster/functions';
 
 
 export const Tvd = ({ idWell }) => {
@@ -12,23 +12,13 @@ export const Tvd = ({ idWell }) => {
   useEffect(() => {
     invokeWebApiWrapperAsync(
       async () => {
-        const operations = await WellOperationStatService.getTvd(idWell);
+        const operations = await getOperations(idWell);
 
-        const planData = operations.map(el => { 
-          return {key: el.plan?.id, depth: el.plan?.wellDepth, date: el.plan?.startDate}
-        }).filter(el => el.key)
+        setDataPlan(operations.plan)
 
-        setDataPlan(planData)
-        const factData = operations.map(el => { 
-          return {key: el.fact?.id, depth: el.fact?.wellDepth, date: el.fact?.startDate}
-        }).filter(el => el.key)
+        setDataFact(operations.fact)
 
-        setDataFact(factData)
-        const predictData = operations.map(el => { 
-          return {key: el.predict?.id, depth: el.predict?.wellDepth, date: el.predict?.startDate}
-        }).filter(el => el.key)
-
-        setDataForecast(predictData)
+        setDataForecast(operations.predict)
       },
       null,
       `Не удалось загрузить операции по скважине "${idWell}"`,