Refresh layer after status update

src/Map/Layers.jsx

@@ -3,6 +3,7 @@ import { Layer, Source } from "react-map-gl";
 import { aoLayer, rayonLayer, selectedRegionLayer } from "./layers-config";
 import { useLayersVisibility } from "../stores/useLayersVisibility";
 import { useFilters } from "../stores/useFilters";
+import { BASE_URL } from "../api";
 
 export const Layers = () => {
   const {
@@ -15,9 +16,7 @@ export const Layers = () => {
       <Source
         id="ao"
         type="vector"
-        tiles={[
-          "https://postamates.spatiality.website/martin/public.msk_ao/{z}/{x}/{y}.pbf",
-        ]}
+        tiles={[`${BASE_URL}/martin/public.service_ao/{z}/{x}/{y}.pbf`]}
       >
         <Layer
           {...aoLayer}
@@ -31,9 +30,7 @@ export const Layers = () => {
       <Source
         id="rayon"
         type="vector"
-        tiles={[
-          "https://postamates.spatiality.website/martin/public.msk_rayoni/{z}/{x}/{y}.pbf",
-        ]}
+        tiles={[`${BASE_URL}/martin/public.service_rayon/{z}/{x}/{y}.pbf`]}
       >
         <Layer
           {...rayonLayer}

src/Map/Points.jsx

@@ -4,6 +4,7 @@ import { useLayersVisibility } from "../stores/useLayersVisibility";
 import { BASE_URL } from "../api";
 import { useFilters } from "../stores/useFilters";
 import { usePointSelection } from "../stores/usePointSelection";
+import { useUpdateLayerCounter } from "../stores/useUpdateLayerCounter";
 
 const getRegionField = (selectedRegion) => {
   if (!selectedRegion) return null;
@@ -22,6 +23,8 @@ export const Points = () => {
   const includedArr = [...selection.included];
   const excludedArr = [...selection.excluded];
 
+  const { updateCounter } = useUpdateLayerCounter();
+
   const includedExpression = [
     "in",
     ["get", "location_id"],
@@ -83,6 +86,7 @@ export const Points = () => {
       <Source
         id="points"
         type="vector"
+        key={`points-${updateCounter}`}
         tiles={[
           `${BASE_URL}/martin/public.service_placementpoint/{z}/{x}/{y}.pbf`,
         ]}

src/Map/layers-config.js

@@ -84,7 +84,7 @@ export const aoLayer = {
   id: "ao",
   type: "line",
   source: "ao",
-  "source-layer": "public.msk_ao",
+  "source-layer": "public.service_ao",
   layout: {
     "line-join": "round",
     "line-cap": "round",
@@ -100,7 +100,7 @@ export const rayonLayer = {
   id: "rayon",
   type: "line",
   source: "rayon",
-  "source-layer": "public.msk_rayoni",
+  "source-layer": "public.service_rayon",
   layout: {
     "line-join": "round",
     "line-cap": "round",

src/modules/Sidebar/RegionSelect.jsx

@@ -40,7 +40,7 @@ export const RegionSelect = ({ disabled }) => {
     const getRegions = async () => {
       setLoading(true);
       try {
-        const response = await api.get("/api/placement_points/ao_rayons");
+        const response = await api.get("/api/ao_rayons");
         setData(response.data);
       } catch (err) {
         console.error(err);

src/modules/Sidebar/TakeToWorkButton.jsx

@@ -4,12 +4,14 @@ import { api } from "../../api";
 import { useFilters } from "../../stores/useFilters";
 import { usePointSelection } from "../../stores/usePointSelection";
 import { STATUSES } from "../../config";
+import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter";
 
 export const TakeToWorkButton = () => {
   const { filters } = useFilters();
   const { prediction, categories } = filters;
   const { selection } = usePointSelection();
   const queryClient = useQueryClient();
+  const { toggleUpdateCounter } = useUpdateLayerCounter();
 
   const { mutate } = useMutation({
     mutationFn: () => {
@@ -25,7 +27,10 @@ export const TakeToWorkButton = () => {
         `/api/placement_points/update_status?${params.toString()}`
       );
     },
-    onSuccess: () => queryClient.invalidateQueries(["table", 1, filters]),
+    onSuccess: () => {
+      queryClient.invalidateQueries(["table", 1, filters]);
+      toggleUpdateCounter();
+    },
   });
 
   const takeToWork = () => {

src/modules/Table/Table.jsx

@@ -73,12 +73,13 @@ const PAGE_SIZE = 30;
 const useTableData = (page) => {
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
   const { filters } = useFilters();
-  const { prediction, status, categories } = filters;
+  const { prediction, status, categories, region } = filters;
+  const { selection } = usePointSelection();
   const { clickedPointConfig } = useClickedPointConfig();
   const [finalData, setFinalData] = useState();
 
   const { data } = useQuery(
-    ["table", page, filters],
+    ["table", page, filters, selection],
     async () => {
       const params = new URLSearchParams({
         page,
@@ -86,8 +87,19 @@ const useTableData = (page) => {
         "prediction_current[]": prediction,
         "status[]": status,
         "categories[]": categories,
+        "included[]": [...selection.included],
       });
 
+      if (region) {
+        if (region.type === "ao") {
+          params.append("ao[]", region.id);
+        }
+
+        if (region.type === "rayon") {
+          params.append("rayon[]", region.id);
+        }
+      }
+
       const { data } = await api.get(
         `/api/placement_points?${params.toString()}`
       );
@@ -251,10 +263,6 @@ export const Table = React.memo(({ height = 200 }) => {
               return {
                 onClick: () => {
                   const geometry = parse(record.geometry);
-                  // const feature = {
-                  //   properties: record,
-                  //   geometry,
-                  // };
                   map.flyTo({
                     center: [geometry.coordinates[0], geometry.coordinates[1]],
                     zoom: 15,

src/stores/useUpdateLayerCounter.js

@@ -0,0 +1,14 @@
+import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
+
+const store = (set) => ({
+  updateCounter: -1,
+
+  toggleUpdateCounter: () => {
+    set((state) => {
+      state.updateCounter = state.updateCounter === -1 ? 1 : -1;
+    });
+  },
+});
+
+export const useUpdateLayerCounter = create(immer(store));