Fix popup after address search

src/Map/AddressSearch.jsx

@@ -69,7 +69,7 @@ export const AddressSearch = ({ autoFocus = false }) => {
     };
 
     setPopup({ features: [feature], coordinates: geometry.coordinates });
-    setClickedPointConfig(feature.properties.id, false);
+    setClickedPointConfig(feature.properties.id);
   };
 
   useEffect(() => {

src/Map/Popup/Popup.jsx

@@ -1,6 +1,6 @@
 import { Button } from "antd";
 import { useState } from "react";
-import { MODES } from "../../config";
+import { MODES, STATUSES } from "../../config";
 import { useMode } from "../../stores/useMode";
 import { LAYER_IDS } from "../Layers/constants";
 import { PopupWrapper } from "./PopupWrapper";
@@ -14,23 +14,22 @@ const SingleFeaturePopup = ({ feature }) => {
   const isRivals =
     feature.layer?.id === LAYER_IDS.pvz ||
     feature.layer?.id === LAYER_IDS.other;
-  const isInitialLayer =
+  const isPendingPoint = feature.properties.status === STATUSES.pending;
-    feature.layer?.id === LAYER_IDS["initial-match"] ||
+  const isWorkingPoint = feature.properties.status === STATUSES.working;
-    feature.layer?.id === LAYER_IDS["initial-unmatch"];
 
   if (isRivals) {
     return <FeatureProperties feature={feature} />;
   }
 
-  if (mode === MODES.ON_APPROVAL) {
+  if (mode === MODES.ON_APPROVAL && !isPendingPoint) {
     return <OnApprovalPointPopup feature={feature} />;
   }
 
-  if (mode === MODES.WORKING) {
+  if (mode === MODES.WORKING && isWorkingPoint) {
     return <WorkingPointPopup feature={feature} />;
   }
 
-  if (mode === MODES.PENDING && isInitialLayer)
+  if (mode === MODES.PENDING && isPendingPoint)
     return <PendingPointPopup feature={feature} />;
 
   return <FeatureProperties feature={feature} />;

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

@@ -25,7 +25,7 @@ export const OnApprovalPointPopup = ({ feature }) => {
 
   const [error, setError] = useState("");
 
-  useEffect(() => setClickedPointConfig(featureId, false), [feature]);
+  useEffect(() => setClickedPointConfig(featureId), [featureId]);
 
   const queryClient = useQueryClient();
 

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

@@ -1,19 +1,54 @@
 import { usePointSelection } from "../../../stores/usePointSelection";
 import { useClickedPointConfig } from "../../../stores/useClickedPointConfig";
-import { LAYER_IDS } from "../../Layers/constants";
 import { useEffect } from "react";
 import { FeatureProperties } from "./FeatureProperties";
 import { Button } from "antd";
 import { useCanEdit } from "../../../api";
+import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
 
 export const PendingPointPopup = ({ feature }) => {
   const { include, selection, exclude } = usePointSelection();
   const { setClickedPointConfig } = useClickedPointConfig();
-  const doesMatchFilter = feature.layer.id === LAYER_IDS["initial-match"];
+  const { filters } = usePendingPointsFilters();
+  const doesMatchFilter = () => {
+    const { prediction, categories, region } = filters;
+    const {
+      prediction_current,
+      category,
+      area,
+      district,
+      area_id,
+      district_id,
+    } = feature.properties;
+
+    const doesMatchPredictionFilter =
+      prediction_current >= prediction[0] &&
+      prediction_current <= prediction[1];
+
+    const doesMatchCategoriesFilter =
+      categories.length > 0 ? categories.includes(category) : true;
+
+    const doesMatchRegionFilter = () => {
+      if (!region) return true;
+
+      if (region.type === "ao") {
+        return (district ?? district_id) === region.id;
+      } else {
+        return (area ?? area_id) === region.id;
+      }
+    };
+
+    return (
+      doesMatchPredictionFilter &&
+      doesMatchCategoriesFilter &&
+      doesMatchRegionFilter()
+    );
+  };
+
   const featureId = feature.properties.id;
 
   const isSelected =
-    (doesMatchFilter && !selection.excluded.has(featureId)) ||
+    (doesMatchFilter() && !selection.excluded.has(featureId)) ||
     selection.included.has(featureId);
 
   useEffect(

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

@@ -6,7 +6,7 @@ export const WorkingPointPopup = ({ feature }) => {
   const featureId = feature.properties.id;
   const { setClickedPointConfig } = useClickedPointConfig();
 
-  useEffect(() => setClickedPointConfig(featureId, false), [feature]);
+  useEffect(() => setClickedPointConfig(featureId), [feature]);
 
   return <FeatureProperties feature={feature} />;
 };

src/modules/Table/PendingTable/PendingTable.jsx

@@ -7,15 +7,25 @@ import { HeaderWrapper } from "../HeaderWrapper";
 import { useExportPendingData } from "./useExportPendingData";
 import { useCanEdit } from "../../../api";
 import { useColumns } from "../useColumns.jsx";
+import { PAGE_SIZE } from "../constants.js";
+import { usePopup } from "../../../stores/usePopup.js";
 
 export const PendingTable = ({ fullWidth }) => {
   const { selection, include, exclude } = usePointSelection();
-  const { clickedPointConfig } = useClickedPointConfig();
+  const { clickedPointConfig, setClickedPointConfig } = useClickedPointConfig();
   const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const columns = useColumns();
+  const { setPopup } = usePopup();
 
-  const { data, pageSize, isClickedPointLoading, isDataLoading } =
+  const { data, isClickedPointLoading, isDataLoading } = usePendingTableData(
-    usePendingTableData(page, () => setPage(1));
+    page,
+    () => setPage(1),
+    pageSize,
+    setPageSize
+  );
+
+  const resetPageSize = () => setPageSize(PAGE_SIZE);
 
   const getSelectedRowKeys = useCallback(() => {
     const ids = data?.results.map((item) => item.id) ?? [];
@@ -50,7 +60,12 @@ export const PendingTable = ({ fullWidth }) => {
     hideSelectAll: true,
   };
 
-  const handlePageChange = useCallback((page) => setPage(page), []);
+  const handlePageChange = useCallback((page) => {
+    resetPageSize();
+    setClickedPointConfig(null);
+    setPopup(null);
+    setPage(page);
+  }, []);
 
   const canEdit = useCanEdit();
 

src/modules/Table/PendingTable/usePendingTableData.js

@@ -1,24 +1,15 @@
-import { useState } from "react";
-import { PAGE_SIZE } from "../constants";
-import { usePointSelection } from "../../../stores/usePointSelection";
 import { useQuery } from "@tanstack/react-query";
 import { getPoints } from "../../../api";
 import { useMergeTableData } from "../useMergeTableData";
 import { STATUSES } from "../../../config";
 import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
 
-export const usePendingTableData = (page, resetPage) => {
+export const usePendingTableData = (page, resetPage, pageSize, setPageSize) => {
-  const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const { filters } = usePendingPointsFilters();
   const { prediction, categories, region } = filters;
-  const {
-    selection: { included },
-  } = usePointSelection();
-
-  const includedIds = [...included];
 
   const { data, isInitialLoading } = useQuery(
-    ["table", page, filters, includedIds],
+    ["table", page, filters],
     async () => {
       const params = new URLSearchParams({
         page,
@@ -26,7 +17,6 @@ export const usePendingTableData = (page, resetPage) => {
         "prediction_current[]": prediction,
         "status[]": [STATUSES.pending],
         "categories[]": categories,
-        "included[]": includedIds,
       });
 
       return await getPoints(params, region);

src/modules/Table/Table.jsx

@@ -89,6 +89,11 @@ export const Table = React.memo(
                     features: [feature],
                     coordinates: geometry.coordinates,
                   });
+
+                  setClickedPointConfig(
+                    record.id,
+                    rowSelection?.selectedRowKeys.includes(record.id)
+                  );
                 },
               };
             }}

src/stores/useClickedPointConfig.js

@@ -4,7 +4,7 @@ import { immer } from "zustand/middleware/immer";
 const store = (set) => ({
   clickedPointConfig: null,
 
-  setClickedPointConfig: (id, shouldSelect = true) => {
+  setClickedPointConfig: (id, shouldSelect = false) => {
     set((state) => {
       if (id === null) {
         state.clickedPointConfig = null;