asb_cloud_front/src/components/WellTreeSelector.jsx

import { useState, useEffect } from 'react'
import { WellService } from '../services/api'
import Loader from '../components/Loader'
import { TreeSelect } from 'antd'
import { useHistory } from 'react-router-dom'

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([])
  const [wellsTree, setWellsTree] = useState([])
  const [loader, setLoader] = useState(false)
  const history = useHistory()

  let updateWellsList = async () => {
    setLoader(true)
    try {
      let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
      let wellsTree = groupBy(newWells, 'deposit', 'cluster', 'caption')
      // setWells( newWells )
      setWellsTree(wellsTree)
    }
    catch (e) {
      console.error(`${e.message}`);
    }
    setLoader(false)
  }

  useEffect(() => { updateWellsList() }, [])

  const onSelect = (value) => {
    if (value)
      history.replace(`/well/${value}/`);
    console.log(value)
  }

  return (
    <>
      <TreeSelect
        style={{
          width: '25%',
          alignItems: 'center'
        }}
        placeholder="Выберите месторождение"
        treeData={wellsTree}
        treeDefaultExpandAll
        onSelect={onSelect}
      />
      {loader && <Loader />}
    </>
  )
}