update: center the marker on station select

src/features/map/ui/yandex-map.tsx

@@ -5,6 +5,7 @@ import {
   YMaps,
 } from '@pbe/react-yandex-maps';
 import { isEmpty } from 'lodash';
+import { useEffect, useRef } from 'react';
 
 import { Point } from '../model';
 
@@ -21,6 +22,29 @@ export const YandexMap = ({
   selectedStation,
   handleMapStationClick,
 }: YandexMapProps) => {
+  const mapRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!mapRef.current) return;
+
+    if (selectedStation !== null) {
+      const selectedPoint = points.find(
+        (point) => point.id === selectedStation,
+      );
+      if (selectedPoint) {
+        mapRef.current
+          .setCenter(selectedPoint.coordinates, mapRef.current.getZoom(), {
+            duration: 1000,
+          })
+          .then(() => {
+            mapRef.current.setZoom(13, { duration: 300 });
+          });
+      }
+    } else {
+      mapRef.current.setZoom(11, { duration: 300 });
+    }
+  }, [selectedStation, points]);
+
   return (
     <YMaps
       query={{
@@ -42,6 +66,9 @@ export const YandexMap = ({
           suppressObsoleteBrowserNotifier: true,
         }}
         className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
+        instanceRef={(ref) => {
+          mapRef.current = ref;
+        }}
       >
         {points.map((point) => {
           const isSelectedStation = selectedStation === point.id;