CF2-35 Переделать WellTreeSelector на работу с методом GET'/api/deposit'

src/components/WellTreeSelector.jsx

@@ -1,71 +1,55 @@
 import { useState, useEffect } from 'react'
-import { useParams } from 'react-router-dom'
-import { WellService } from '../services/api'
-import Loader from '../components/Loader'
+import { useRouteMatch } from 'react-router-dom'
+import { DepositService } from '../services/api'
+import LoaderPortal from './LoaderPortal'
 import { TreeSelect } from 'antd'
 import { useHistory } from 'react-router-dom'
 import notify from './notify'
 
-const groupBy = (table, ...keys) => {
-  let key = keys[0]
-
-  let groups = table.reduce((rv, item) => {
-    let keyValue = item[key]
-    let group = rv.find(o => o.title === keyValue)
-    if (!group) {
-      group = {
-        title: keyValue,
-        value: keys.length === 1 ? `${item['id']}` : `${key} ${keyValue} ${item['id']}`,
-        selectable: keys.length === 1,
-        children: []
-      }
-      rv.push(group)
-    }
-    if (keys.length > 1)
-      group.children.push(item);
-    return rv;
-  }, []);
-
-  if (keys.length > 1) {
-    for (let group of groups) {
-      group.children = groupBy(group.children, ...keys.slice(1))
-    }
-  }
-
-  return groups
-};
-
-export default function WellTreeSelector(props) {
-  // const [wells, setWells] = useState([])
+export default function WellTreeSelector({}) {
   const [wellsTree, setWellsTree] = useState([])
-  const [loader, setLoader] = useState(false)
+  const [showLoader, setShowLoader] = useState(false)
   const history = useHistory()
-  let { id } = useParams();
+  const routeMatch = useRouteMatch('/:route/:id')
 
-  let updateWellsList = async () => {
-    setLoader(true)
+  const updateWellsList = async () => {
+    setShowLoader(true)
     try {
-      let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
-      let wellsTree = groupBy(newWells, 'deposit', 'cluster', 'caption')
+      const deposits = await DepositService.getDeposits()
+      const wellsTree = deposits.map(deposit =>({
+        title: deposit.caption,
+        key: `/deposit/${deposit.id}`,
+        value: `/deposit/${deposit.id}`,
+        children: deposit.clusters.map(cluster => ({
+          title: cluster.caption,
+          key: `/cluster/${cluster.id}`,
+          value: `/cluster/${cluster.id}`,
+          children: cluster.wells.map(well => ({
+            title: well.caption,
+            key: `/well/${well.id}`,
+            value: `/well/${well.id}`,
+          })),
+        })),
+      }))
       setWellsTree(wellsTree)
     }
     catch (e) {
       notify('Не удалось загрузить список скважин', 'error')
-      console.error(`${e.message}`);
+      console.error(`${e.message}`)
     }
-    setLoader(false)
+    setShowLoader(false)
   }
 
   useEffect(() => { updateWellsList() }, [])
 
-  const onSelect = (value) => {
+  const onSelect = (value, node) => {
     if (value)
-      history.push(`/well/${value}/`);
+      history.push(value);
     console.log(value)
   }
 
   return (
-    <>
+    <LoaderPortal show={showLoader}>
       <TreeSelect
         className='header-tree-select'
         bordered={false}
@@ -74,9 +58,8 @@ export default function WellTreeSelector(props) {
         treeData={wellsTree}
         treeDefaultExpandAll
         onSelect={onSelect}
-        value = {id}
+        value = {routeMatch?.url}
       />
-      {loader && <Loader />}
-    </>
+    </LoaderPortal>
   )
 }