update: open station-list on-marker-click and add unselect opportunity

src/features/map/ui/gas-station-map.tsx

@@ -56,7 +56,7 @@ interface StationListPanelProps {
   selectedStation: number | null;
   activeFilters: string[];
   activeCities: string[];
-  setSelectedStation: (id: number | null) => void;
+  handleMapStationClick: (id: number) => void;
   filterToFieldMap: { [key: string]: keyof Stations[number] };
   allFilters: string[];
   resetFilters: () => void;
@@ -205,7 +205,7 @@ function StationListPanel({
   selectedStation,
   activeFilters,
   activeCities,
-  setSelectedStation,
+  handleMapStationClick,
   filterToFieldMap,
   allFilters,
   resetCities,
@@ -275,7 +275,7 @@ function StationListPanel({
                       ? 'border-blue-500 bg-blue-50'
                       : 'border-gray-200 hover:bg-gray-50'
                   }`}
-                  onClick={() => setSelectedStation(station.id)}
+                  onClick={() => handleMapStationClick(station.id)}
                 >
                   <div className='flex items-start justify-between'>
                     <h4 className='font-medium'>{station.name}</h4>
@@ -365,6 +365,11 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
   const [isStationListOpen, setIsStationListOpen] = useState(false);
   const [activeFilterTab, setActiveFilterTab] = useState('cities');
 
+  useEffect(() => {
+    if (selectedStation === null) return;
+    setIsStationListOpen(true);
+  }, [selectedStation]);
+
   // Все доступные фильтры
   const allFilters = [
     // 'ДТ', -> нет значения в интерфейсе - TODO: поправить
@@ -434,6 +439,16 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
     [filteredStations],
   );
 
+  const handleMapStationClick = (stationId: number) => {
+    setSelectedStation(() => {
+      if (selectedStation !== null && selectedStation === stationId) {
+        return null;
+      }
+
+      return stationId;
+    });
+  };
+
   // Переключение фильтра услуг
   const toggleFilter = (filter: string) => {
     setActiveFilters((prev) =>
@@ -494,7 +509,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
         selectedStation={selectedStation}
         activeFilters={activeFilters}
         activeCities={activeCities}
-        setSelectedStation={setSelectedStation}
+        handleMapStationClick={handleMapStationClick}
         filterToFieldMap={filterToFieldMap}
         allFilters={allFilters}
         resetFilters={resetFilters}
@@ -506,7 +521,7 @@ export default function GasStationMap({ stations }: GasStationMapProps) {
         <YandexMap
           points={points}
           selectedStation={selectedStation}
-          setSelectedStation={setSelectedStation}
+          handleMapStationClick={handleMapStationClick}
         />
       </div>
 

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

@@ -7,7 +7,7 @@ import { Point } from '../model';
 type YandexMapProps = {
   points: Point[];
   selectedStation: number | null;
-  setSelectedStation: Dispatch<SetStateAction<number | null>>;
+  handleMapStationClick: (id: number) => void;
 };
 
 const mapCenter = [38.53575, 68.77905];
@@ -15,7 +15,7 @@ const mapCenter = [38.53575, 68.77905];
 export const YandexMap = ({
   points,
   selectedStation,
-  setSelectedStation,
+  handleMapStationClick,
 }: YandexMapProps) => {
   return (
     <YMaps
@@ -39,30 +39,25 @@ export const YandexMap = ({
         }}
         className='h-full max-h-[500px] w-full overflow-hidden rounded-md shadow-lg'
       >
-        {points.map((point) => (
+        {points.map((point) => {
-          <Placemark
+          const isSelectedStation = selectedStation === point.id;
-            key={point.id}
+          return (
-            geometry={point.coordinates}
+            <Placemark
-            options={{
+              key={point.id}
-              iconLayout: 'default#image',
+              geometry={point.coordinates}
-              iconImageHref:
+              options={{
-                !selectedStation || selectedStation === point.id
+                iconLayout: 'default#image',
-                  ? '/map/oriyo-marker.png'
+                iconImageHref:
-                  : '/map/oriyo-inactive-marker.png',
+                  !selectedStation || isSelectedStation
-              iconImageSize: selectedStation === point.id ? [70, 70] : [64, 64],
+                    ? '/map/oriyo-marker.png'
-              iconImageOffset: [-24, -36],
+                    : '/map/oriyo-inactive-marker.png',
-            }}
+                iconImageSize: isSelectedStation ? [70, 70] : [64, 64],
-            onClick={() =>
+                iconImageOffset: isSelectedStation ? [-28, -40] : [-24, -36],
-              setSelectedStation(() => {
+              }}
-                if (selectedStation !== null && selectedStation === point.id) {
+              onClick={() => handleMapStationClick(point.id)}
-                  return null;
+            />
-                }
+          );
-
+        })}
-                return point.id;
-              })
-            }
-          />
-        ))}
       </Map>
     </YMaps>
   );