Update multiple features popup; fix incorrect data in popup

src/Map/Popup/Popup.jsx

@@ -1,6 +1,5 @@
 import { Button } from "antd";
-import { useState } from "react";
+import { CATEGORIES, MODES, STATUSES } from "../../config";
-import { MODES, STATUSES } from "../../config";
 import { useMode } from "../../stores/useMode";
 import { LAYER_IDS } from "../Layers/constants";
 import { PopupWrapper } from "./PopupWrapper";
@@ -8,6 +7,7 @@ import { PendingPointPopup } from "./mode-popup/PendingPointPopup";
 import { OnApprovalPointPopup } from "./mode-popup/OnApprovalPointPopup";
 import { WorkingPointPopup } from "./mode-popup/WorkingPointPopup";
 import { FeatureProperties } from "./mode-popup/FeatureProperties";
+import { usePopup } from "../../stores/usePopup.js";
 
 const SingleFeaturePopup = ({ feature }) => {
   const { mode } = useMode();
@@ -35,22 +35,38 @@ const SingleFeaturePopup = ({ feature }) => {
   return <FeatureProperties feature={feature} />;
 };
 
-const MultipleFeaturesPopup = ({ features, onSelect }) => {
+const MultipleFeaturesPopup = ({ features }) => {
+  const { setPopup } = usePopup();
+
   return (
     <div className="space-y-2 p-1">
       {features.map((feature) => {
         return (
           <Button
-            type={
+            className="text-start w-full"
-              feature.layer.id === LAYER_IDS["initial-match"] ? "primary" : ""
-            }
-            className="flex items-center gap-x-1"
             block
-            onClick={() => onSelect(feature)}
+            onClick={() => {
+              setPopup({
+                features: [feature],
+                coordinates: feature.geometry.coordinates,
+              });
+            }}
             key={feature.properties.id}
           >
-            <span>{feature.properties.id}</span>
+            {feature.properties.category === CATEGORIES.residential ? (
-            <span>{feature.properties.category}</span>
+              <div className="space-x-2 flex items-center w-full">
+                <span className="flex-1 truncate inline-block">
+                  {feature.properties.address}
+                </span>
+                <span>{feature.properties.name}</span>
+              </div>
+            ) : (
+              <div className="flex w-full">
+                <span className="truncate">
+                  {feature.properties.name ?? feature.properties.category}
+                </span>
+              </div>
+            )}
           </Button>
         );
       })}
@@ -59,23 +75,12 @@ const MultipleFeaturesPopup = ({ features, onSelect }) => {
 };
 
 export const MapPopup = ({ features, lat, lng, onClose }) => {
-  const [selectedFeature, setSelectedFeature] = useState(null);
-
   const getContent = () => {
     if (features.length === 1) {
       return <SingleFeaturePopup feature={features[0]} />;
     }
 
-    if (selectedFeature) {
+    return <MultipleFeaturesPopup features={features} />;
-      return <SingleFeaturePopup feature={selectedFeature} />;
-    }
-
-    return (
-      <MultipleFeaturesPopup
-        features={features}
-        onSelect={setSelectedFeature}
-      />
-    );
   };
 
   return (

src/Map/Popup/mode-popup/OnApprovalPointPopup.jsx

@@ -17,8 +17,13 @@ export const OnApprovalPointPopup = ({ feature }) => {
   const { status: initialStatus, postamat_id: initialPostamatId } =
     feature.properties;
   const [status, setStatus] = useState(initialStatus);
-
   const [postamatId, setPostamatId] = useState(initialPostamatId);
+
+  useEffect(() => {
+    setStatus(initialStatus);
+    setPostamatId(initialPostamatId);
+  }, [initialStatus, initialPostamatId]);
+
   const [needToFillPostamatId, setNeedToFillPostamatId] = useState(
     status === STATUSES.working && isNil(postamatId)
   );

src/modules/Table/useMergeTableData.js

@@ -41,7 +41,7 @@ export const useMergeTableData = (fullData, onPageSizeChange) => {
 
   // merge data with clicked point
   useEffect(() => {
-    if (!clickedPointData) return;
+    if (!clickedPointData?.results?.[0]) return;
 
     lastClickedPointId.current = clickedPointData.results[0].id;
 

src/stores/useWorkingPointsFilters.js

@@ -5,8 +5,8 @@ import { persist } from "zustand/middleware";
 export const INITIAL = {
   region: null,
   deltaTraffic: [-10000, 10000],
-  factTraffic: [0, 0],
+  factTraffic: [-100, 0],
-  age: [0, 0],
+  age: [-1, 0],
 };
 
 const store = (set) => ({