From dd9c49c62697e3ff2901cf3d8d355d2ca01a5d7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?=
 <nikita.grigorevich@gmail.com>
Date: Wed, 15 Sep 2021 12:03:03 +0500
Subject: [PATCH] hotfix ui freeze (zoom in map)

---
 src/pages/Deposit.jsx | 39 ++++++++++++++++++---------------------
 src/pages/Main.jsx    |  4 ++--
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/pages/Deposit.jsx b/src/pages/Deposit.jsx
index d9d8a01..e30076f 100644
--- a/src/pages/Deposit.jsx
+++ b/src/pages/Deposit.jsx
@@ -4,7 +4,7 @@ import {Link} from "react-router-dom";
 import LoaderPortal from '../components/LoaderPortal'
 import { useState, useEffect } from "react";
 import {ClusterService} from '../services/api'
-import { notify } from "../components/factory"
+import { invokeWebApiWrapperAsync } from "../components/factory"
 
 const calcViewParams = (clusters) => {
   if ((!clusters) || clusters.length === 0)
@@ -23,31 +23,30 @@ const calcViewParams = (clusters) => {
     return d > max ? d : max
   }, 0)
 
-  return {center, zoom: maxDeg*25}
+  // zoom max = 20 (too close)
+  // zoom min = 1 (mega far)
+  // 4 - full Russia (161.6 deg)
+  // 13.5 - Khanty-Mansiysk
+  let zoom = 5 +  5/maxDeg
+  zoom = zoom < 5 ? 5: zoom
+  zoom = zoom > 15 ? 15: zoom
+
+  return {center, zoom}
 }
 
 export default function Deposit() {
   const [clustersData, setClustersData] = useState([])
   const [showLoader, setShowLoader] = useState(false)
 
-  useEffect(()=>{
-    const update = async()=>{
-      setShowLoader(true) 
-      try{
-        const data = await ClusterService.getClusters()
-        setClustersData(data)
-      }
-      catch(ex) {
-        notify(`Не удалось загрузить список кустов`, 'error')
-        console.log(ex)
-      }    
-      setShowLoader(false) 
-    }
-    update()
-  }, [])
+  useEffect(()=>invokeWebApiWrapperAsync(async()=>{
+    const data = await ClusterService.getClusters()
+    setClustersData(data)
+  },
+  setShowLoader,
+  `Не удалось загрузить список кустов`),
+  [])
 
   const viewParams = calcViewParams(clustersData)
-
   const markers = clustersData.map(cluster =>
     <Overlay  
       width={32} 
@@ -62,9 +61,7 @@ export default function Deposit() {
   return (
     <LoaderPortal show={showLoader}>
       <div className={'h-100vh'}>
-        <Map 
-          center={viewParams.center}
-          zoom={viewParams.zoom}>
+        <Map {...viewParams}>
           {markers}
         </Map>
       </div>
diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx
index bb6b6cd..e4edbe8 100644
--- a/src/pages/Main.jsx
+++ b/src/pages/Main.jsx
@@ -8,12 +8,12 @@ export default function Main() {
   return (
     <Switch>
       <Route path="/deposit">
-        <LayoutPortal noSheet>
+        <LayoutPortal noSheet title='Месторождение'>
           <Deposit />
         </LayoutPortal>
       </Route>
       <Route path="/cluster/:idClaster/:tab?">
-        <LayoutPortal>
+        <LayoutPortal title="Анализ скважин куста">
           <Cluster />
         </LayoutPortal>
       </Route>