Merged in feature/grouping-bushes (pull request #4)

Добавлена группировка кустов на странице /deposit

Approved-by: Александр Васильевич Сироткин

src/pages/Deposit.jsx

@@ -1,13 +1,14 @@
 import { Map, Overlay } from 'pigeon-maps'
 import { useState, useEffect, memo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
+import { Popover, Badge } from 'antd'
 
 import { PointerIcon } from '@components/icons'
 import { LayoutPortal } from '@components/Layout'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { arrayOrDefault, limitValue, wrapPrivateComponent } from '@utils'
-import { ClusterService } from '@api'
+import { DepositService } from '@api'
 
 import '@styles/index.css'
 
@@ -42,7 +43,7 @@ const calcViewParams = (clusters) => {
 }
 
 const Deposit = memo(() => {
-  const [clustersData, setClustersData] = useState([])
+  const [depositsData, setDepositsData] = useState([])
   const [showLoader, setShowLoader] = useState(false)
   const [viewParams, setViewParams] = useState(defaultViewParams)
 
@@ -51,9 +52,9 @@ const Deposit = memo(() => {
   useEffect(() => {
       invokeWebApiWrapperAsync(
       async () => {
-        const data = await ClusterService.getClusters()
-        setClustersData(arrayOrDefault(data))
-        setViewParams(calcViewParams(data))
+        const deposits = await DepositService.getDeposits()
+        setDepositsData(arrayOrDefault(deposits))
+        setViewParams(calcViewParams(deposits))
       },
       setShowLoader,
       `Не удалось загрузить список кустов`,
@@ -66,16 +67,27 @@ const Deposit = memo(() => {
       <LoaderPortal show={showLoader}>
         <div className={'h-100vh'}>
           <Map {...viewParams}>
-            {clustersData.map(cluster => (
+            {depositsData.map(deposit => (
               <Overlay
                 width={32}
-                anchor={[cluster.latitude, cluster.longitude]}
-                key={`${cluster.latitude}  ${cluster.longitude}`}
+                anchor={[deposit.latitude, deposit.longitude]}
+                key={`${deposit.latitude}  ${deposit.longitude}`}
               >
-                <Link to={{ pathname: `/cluster/${cluster.id}`, state: { from: location.pathname }}}>
-                  <PointerIcon state={'active'} width={48} height={59} />
-                  <span>{cluster.caption}</span>
+                <Popover content={
+                  <div>
+                    {deposit.clusters.map(cluster => (
+                      <Link key={cluster.id} to={{ pathname: `/cluster/${cluster.id}`, state: { from: location.pathname }}}>
+                        <div>{cluster.caption}</div>
                       </Link>
+                    ))}
+                  </div>
+                } trigger={['click']} title={deposit.caption}>
+                  <div style={{cursor: 'pointer'}}>
+                    <Badge count={deposit.clusters.length}>
+                      <PointerIcon  state={'active'} width={48} height={59} />
+                    </Badge>
+                  </div>
+                </Popover>
               </Overlay>
             ))}
           </Map>