Show popup with search from address input and table

src/Map/AddressSearch.jsx

@@ -5,6 +5,8 @@ import { api } from "../api";
 import { useEffect, useMemo, useState } from "react";
 import { useMap } from "react-map-gl";
 import parse from "wellknown";
+import { usePopup } from "../stores/usePopup.js";
+import { useClickedPointConfig } from "../stores/useClickedPointConfig.js";
 
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState(value);
@@ -22,6 +24,8 @@ export const AddressSearch = () => {
   const { map } = useMap();
   const [value, setValue] = useState("");
   const debouncedValue = useDebounce(value);
+  const { setPopup } = usePopup();
+  const { setClickedPointConfig } = useClickedPointConfig();
 
   const { data } = useQuery(["address", debouncedValue], async () => {
     const result = await api.get(
@@ -56,6 +60,13 @@ export const AddressSearch = () => {
       zoom: 13,
       essential: true,
     });
+
+    const feature = {
+      properties: option.item,
+    };
+
+    setPopup({ features: [feature], coordinates: geometry.coordinates });
+    setClickedPointConfig(feature.properties.id, false);
   };
 
   return (

src/Map/Popup/Popup.jsx

@@ -12,10 +12,11 @@ import { FeatureProperties } from "./mode-popup/FeatureProperties";
 const SingleFeaturePopup = ({ feature }) => {
   const { mode } = useMode();
   const isRivals =
-    feature.layer.id === LAYER_IDS.pvz || feature.layer.id === LAYER_IDS.other;
+    feature.layer?.id === LAYER_IDS.pvz ||
+    feature.layer?.id === LAYER_IDS.other;
   const isInitialLayer =
-    feature.layer.id === LAYER_IDS["initial-match"] ||
-    feature.layer.id === LAYER_IDS["initial-unmatch"];
+    feature.layer?.id === LAYER_IDS["initial-match"] ||
+    feature.layer?.id === LAYER_IDS["initial-unmatch"];
 
   if (isRivals) {
     return <FeatureProperties feature={feature} />;

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

@@ -16,7 +16,8 @@ export const FeatureProperties = ({ feature, dynamicStatus, postamatId }) => {
   const isResidential = feature.properties.category === CATEGORIES.residential;
   const isWorking = feature.properties.status === STATUSES.working;
   const isRivals =
-    feature.layer.id === LAYER_IDS.pvz || feature.layer.id === LAYER_IDS.other;
+    feature.layer?.id === LAYER_IDS.pvz ||
+    feature.layer?.id === LAYER_IDS.other;
 
   const getConfig = () => {
     if (isRivals) {

src/modules/Table/Table.jsx

@@ -8,6 +8,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import { twMerge } from "tailwind-merge";
 import { HeaderWrapper } from "./HeaderWrapper";
 import { useTable } from "../../stores/useTable";
+import { usePopup } from "../../stores/usePopup.js";
 
 export const Table = React.memo(
   ({
@@ -22,9 +23,11 @@ export const Table = React.memo(
     fullWidth,
     loading,
   }) => {
-    const { clickedPointConfig } = useClickedPointConfig();
+    const { clickedPointConfig, setClickedPointConfig } =
+      useClickedPointConfig();
     const { map } = useMap();
     const { tableState, toggleOpened } = useTable();
+    const { setPopup } = usePopup();
 
     const SCROLL = {
       y: tableState.fullScreen ? "calc(100vh - 136px)" : "200px",
@@ -77,6 +80,15 @@ export const Table = React.memo(
                     zoom: 13,
                     essential: true,
                   });
+
+                  const feature = {
+                    properties: record,
+                  };
+
+                  setPopup({
+                    features: [feature],
+                    coordinates: geometry.coordinates,
+                  });
                 },
               };
             }}