refactoring

src/Map/Layers/Layers.jsx

@@ -43,7 +43,7 @@ export const Layers = ({ postGroups, otherGroups }) => {
         type="vector"
         tiles={[`${BASE_URL}/martin/public.service_post_and_pvz/{z}/{x}/{y}.pbf`]}
       >
-        {postGroups && postGroups.map((item) => {
+        {postGroups?.map((item) => {
           return item.groups.map((itemGroup) =>
             <PVZ
               id={itemGroup.id}

src/Map/Layers/PendingPoints.jsx

@@ -11,6 +11,7 @@ import { LAYER_IDS } from "./constants";
 import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "../../stores/usePendingPointsFilters";
 import { usePostamatesAndPvzGroups } from "../../api.js";
 import { useMemo } from "react";
+import {fieldHasChanged} from "../../utils.js";
 
 const statusExpression = ["==", ["get", "status"], STATUSES.pending];
 
@@ -70,23 +71,12 @@ const useFilterExpression = () => {
 
   const dynamicKeyExpressions = dynamicKeyFiltersExpressions.filter((expression) => {
     const filterKey = expression[0][1][1];
-    const range = ranges[filterKey];
-    const gtValue = expression[0][2] || 0;
-    const gtInitial = range ? range[0] : 0;
-    const ltValue = expression[1][2] || 0;
-    const ltInitial = range ? range[1] : 0;
-
-    return !(gtValue === gtInitial && ltValue === ltInitial);
+    return fieldHasChanged(filters, ranges, filterKey).result;
   }).flat();
 
   const staticKeyExpressions = staticKeyFiltersExpressions.filter((expression) => {
     const filterKey = expression[0][1][1];
-    const gtValue = expression[0][2];
-    const gtInitial = ranges[filterKey][0];
-    const ltValue = expression[1][2];
-    const ltInitial = ranges[filterKey][1];
-
-    return !(gtValue === gtInitial && ltValue === ltInitial);
+    return fieldHasChanged(filters, ranges, filterKey).result;
   }).flat();
 
   const categoryExpression =

src/Map/LayersControl/LayersVisibility.jsx

@@ -28,7 +28,7 @@ export const LayersVisibility = ({ postGroups, otherGroups }) => {
           </Checkbox>
         </>
       )}
-      {postGroups && postGroups.map((item) => {
+      {postGroups?.map((item) => {
         return (
           <Checkbox
             key={item.id}

src/Map/Legend.jsx

@@ -125,12 +125,12 @@ export function Legend({ postGroups, otherGroups }) {
       </div>
 
       <div className="space-y-1">
-        {postGroups && postGroups?.map((item) => {
+        {postGroups?.map((item) => {
           return <LegendGroupItem key={item.id} item={item} color={PVZ_COLOR}/>
         })}
       </div>
       <div className="space-y-1">
-        {otherGroups && otherGroups?.map((item) => {
+        {otherGroups?.map((item) => {
           return <LegendGroupItem key={item.id} item={item} color={OTHER_POSTAMATES_COLOR}/>
         })}
       </div>

src/Map/MapComponent.jsx

@@ -23,7 +23,7 @@ import { Header } from "./Header";
 import { icons } from "../icons/icons-config";
 import { LastMLRun } from "./LastMLRun";
 import { useGetPendingPointsRange, useOtherGroups, usePostamatesAndPvzGroups } from "../api.js";
-import {transliterate} from "../utils.js";
+import { getFilteredGroups, transliterate } from "../utils.js";
 import { usePendingPointsFilters } from "../stores/usePendingPointsFilters.js";
 
 export const MapComponent = () => {
@@ -35,10 +35,9 @@ export const MapComponent = () => {
   const { setLayersVisibility } = useLayersVisibility();
   const { mode } = useMode();
   const { tableState, openTable } = useTable();
-  const { toggleVisibility } = useLayersVisibility();
 
   const { ranges, setRanges } = usePendingPointsFilters();
-  const { data: fullRange, isInitialLoading } = useGetPendingPointsRange();
+  const { data: fullRange } = useGetPendingPointsRange();
 
   useEffect(() => {
     if (fullRange) setRanges({...ranges, ...fullRange});
@@ -48,45 +47,21 @@ export const MapComponent = () => {
   const { data: otherGroups } = useOtherGroups();
 
   const filteredPostamatesGroups = useMemo(() => {
-    if (!postamatesAndPvzGroups) return [];
-    return postamatesAndPvzGroups
-      .filter((category) => category.visible)
-      .map((category) => {
-        toggleVisibility(LAYER_IDS.pvz_category + category.id)
-        return {
-          ...category,
-          groups: [...category.groups.filter((group) => group.visible)],
-        }
-      })
+    return getFilteredGroups(postamatesAndPvzGroups);
   }, [postamatesAndPvzGroups]);
 
   const filteredOtherGroups = useMemo(() => {
-    if (!otherGroups) return [];
-    return otherGroups
-      .filter((category) => !category.visible)
-      .map((category) => {
-        return {
-          ...category,
-          groups: [...category.groups.filter((group) => group.visible)],
-        }
-      })
+    return getFilteredGroups(otherGroups);
   }, [otherGroups]);
 
   const mapIcons = useMemo(() => {
     const res = [];
 
-    filteredPostamatesGroups.map((category) => {
+    [...filteredOtherGroups, ...filteredPostamatesGroups].map((category) => {
       category.groups.map((group) => {
-        res.push({name: transliterate(group.name + group.id), url: group.image})
+        res.push({name: transliterate(group.name + group.id), url: group.image});
       })
     });
-
-    filteredOtherGroups.map((category) => {
-      category.groups.map((group) => {
-        res.push({name: transliterate(group.name + group.id), url: group.image})
-      })
-    });
-
     return [...res, ...icons];
   }, [icons, filteredPostamatesGroups, filteredOtherGroups]);
 
@@ -220,7 +195,7 @@ export const MapComponent = () => {
                   );
                   img.onload = () =>
                     mapRef.current.addImage(icon.name, img);
-                  img.src = icon.url;
+                  img.src = 'https://docs.mapbox.com/mapbox-gl-js/assets/cat.png';
                   img.crossOrigin = "Anonymous";
                 });
               }}

src/Map/Popup/Popup.jsx

@@ -11,6 +11,7 @@ import { usePopup } from "../../stores/usePopup.js";
 import { PanoramaIcon } from "../../icons/PanoramaIcon";
 import {usePostamatesAndPvzGroups} from "../../api.js";
 import {useMemo} from "react";
+import {getFilteredGroups} from "../../utils.js";
 
 const SingleFeaturePopup = ({ feature, groups, categories }) => {
   const { mode } = useMode();
@@ -94,24 +95,16 @@ export const MapPopup = ({ features, lat, lng, onClose }) => {
   const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
 
   const filteredPostamatesCategories = useMemo(() => {
-    if (!postamatesAndPvzGroups) return [];
-    return postamatesAndPvzGroups
-      .filter((category) => category.visible)
-      .map((category) => {
-        return {
-          ...category,
-          groups: [...category.groups.filter((group) => group.visible)],
-        }
-      })
+    return getFilteredGroups(postamatesAndPvzGroups);
   }, [postamatesAndPvzGroups]);
 
   const postamatesGroups = useMemo(() => {
     if (!filteredPostamatesCategories) return [];
     return filteredPostamatesCategories
       .map((category) => {
-        return [...category.groups.filter((group) => group.visible)]
+        return [...category.groups]
       }).flat();
-  }, [postamatesAndPvzGroups]);
+  }, [filteredPostamatesCategories]);
 
   const getContent = () => {
     if (features.length === 1) {

src/api.js

@@ -2,7 +2,7 @@ import axios from "axios";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { STATUSES } from "./config";
 import { usePointSelection } from "./stores/usePointSelection";
-import { usePendingPointsFilters } from "./stores/usePendingPointsFilters";
+import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "./stores/usePendingPointsFilters";
 
 export const BASE_URL = import.meta.env.VITE_API_URL;
 
@@ -189,16 +189,19 @@ export const useGetPendingPointsRange = () => {
       select: (data) => {
         const distToGroupsArr = data.dist_to_groups.map((groupRange) => {
           return {
-            [`d${groupRange.group_id}`]: groupRange.dist,
+            [`d${groupRange.group_id}`]:  [Math.floor(groupRange.dist[0]), Math.ceil(groupRange.dist[1])],
           }
-        })
+        });
         const distToGroups = Object.assign({}, ...distToGroupsArr);
+        const rangesArr = RANGE_FILTERS_KEYS.map((key) => {
+          return {
+            [key]: [Math.floor(data[key][0]), Math.ceil(data[key][1])]
+          }
+        });
+        const ranges = Object.assign({}, ...rangesArr);
         return {
           prediction: data.prediction_current,
-          doors: data.doors,
-          flat_cnt: data.flat_cnt,
-          flats_cnt: data.flats_cnt,
-          target_post_cnt: data.target_post_cnt,
+          ...ranges,
           ...distToGroups
         };
       },

src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFilters.jsx

@@ -4,26 +4,15 @@ import { Collapse } from "antd";
 import React, { useMemo } from "react";
 import { Title } from "../../../../components/Title.jsx";
 import { usePostamatesAndPvzGroups } from "../../../../api.js";
+import { getFilteredGroups } from "../../../../utils.js";
 
 export const AdvancedFilters = () => {
-  const {
-    filters,
-    setFilterWithKey,
-    ranges
-  } = usePendingPointsFilters();
+  const { filters, ranges } = usePendingPointsFilters();
 
   const { data: postamatesAndPvzGroups } = usePostamatesAndPvzGroups();
 
   const filteredPostamatesGroups = useMemo(() => {
-    if (!postamatesAndPvzGroups) return [];
-    return postamatesAndPvzGroups
-      .filter((category) => category.visible)
-      .map((category) => {
-        return {
-          ...category,
-          groups: [...category.groups.filter((group) => group.visible)],
-        }
-      })
+    return getFilteredGroups(postamatesAndPvzGroups);
   }, [postamatesAndPvzGroups]);
 
   return (
@@ -45,7 +34,6 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.doors__gt, filters.doors__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во подъездов в жилом доме"}
                 fullRange={ranges.doors || [0, 0]}
                 filterKey={"doors"}
@@ -54,7 +42,6 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.flat_cnt__gt, filters.flat_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во квартир в подъезде жилого дома"}
                 fullRange={ranges.flat_cnt || [0, 0]}
                 filterKey={"flat_cnt"}
@@ -82,23 +69,22 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.rival_post_cnt__gt, filters.rival_post_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во постаматов других сетей"}
-                fullRange={[0, 5000]}
+                fullRange={ranges.rival_post_cnt || [0, 0]}
+                filterKey={"rival_post_cnt"}
               />
             </div>
             <div>
               <FilterSlider
                 filterRange={[filters.rival_pvz_cnt__gt, filters.rival_pvz_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во ПВЗ"}
-                fullRange={[0, 5000]}
+                fullRange={ranges.rival_pvz_cnt || [0, 0]}
+                filterKey={"rival_pvz_cnt"}
               />
             </div>
             <div>
               <FilterSlider
                 filterRange={[filters.target_post_cnt__gt, filters.target_post_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во постаматов Мой постамат"}
                 fullRange={ranges.target_post_cnt || [0, 0]}
                 filterKey={"target_post_cnt"}
@@ -107,7 +93,6 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.flats_cnt__gt, filters.flats_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во квартир в окрестности"}
                 fullRange={ranges.flats_cnt || [0, 0]}
                 filterKey={"flats_cnt"}
@@ -116,7 +101,6 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.tc_cnt__gt, filters.tc_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во торговых центров"}
                 fullRange={ranges.tc_cnt || [0, 0]}
                 filterKey={"tc_cnt"}
@@ -125,25 +109,22 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.culture_cnt__gt, filters.culture_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во объектов культуры (театры, музей и тд)"}
-                fullRange={ranges.tc_cnt || [0, 0]}
-                filterKey={"tc_cnt"}
+                fullRange={ranges.culture_cnt || [0, 0]}
+                filterKey={"culture_cnt"}
               />
             </div>
             <div>
               <FilterSlider
                 filterRange={[filters.mfc_cnt__gt, filters.mfc_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во МФЦ"}
-                fullRange={ranges.tc_cnt || [0, 0]}
-                filterKey={"tc_cnt"}
+                fullRange={ranges.mfc_cnt || [0, 0]}
+                filterKey={"mfc_cnt"}
               />
             </div>
             <div>
               <FilterSlider
                 filterRange={[filters.public_stop_cnt__gt, filters.public_stop_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во остановок ОТ"}
                 fullRange={ranges.public_stop_cnt || [0, 0]}
                 filterKey={"public_stop_cnt"}
@@ -152,7 +133,6 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.supermarket_cnt__gt, filters.supermarket_cnt__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Кол-во супермаркетов"}
                 fullRange={ranges.supermarket_cnt || [0, 0]}
                 filterKey={"supermarket_cnt"}
@@ -161,7 +141,6 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.target_dist__gt, filters.target_dist__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Расстояние до постамата Мой постамат"}
                 fullRange={ranges.target_dist || [0, 0]}
                 filterKey={"target_dist"}
@@ -170,7 +149,6 @@ export const AdvancedFilters = () => {
             <div>
               <FilterSlider
                 filterRange={[filters.metro_dist__gt, filters.metro_dist__lt]}
-                setFilterRange={setFilterWithKey}
                 title={"Расстояние до метро"}
                 fullRange={ranges.metro_dist || [0, 0]}
                 filterKey={"metro_dist"}
@@ -183,6 +161,7 @@ export const AdvancedFilters = () => {
       {filteredPostamatesGroups.map((category) => {
         return (
           <Collapse
+            key={`filter_${category.id}`}
             bordered={false}
             expandIconPosition={"end"}
             style={{
@@ -198,10 +177,9 @@ export const AdvancedFilters = () => {
               <div className="mt-4 mb-12">
                 {category.groups.map((group) => {
                   return (
-                    <div>
+                    <div key={group.id}>
                       <FilterSlider
                         filterRange={[filters[`d${group.id}__gt`], filters[`d${group.id}__lt`]]}
-                        setFilterRange={setFilterWithKey}
                         title={group.name}
                         fullRange={ranges[`d${group.id}`] || [0, 0]}
                         filterKey={`d${group.id}`}
@@ -211,7 +189,6 @@ export const AdvancedFilters = () => {
                   )
                 })}
               </div>
-
             </Collapse.Panel>
           </Collapse>
         )

src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/AdvancedFiltersWrapper.jsx

@@ -1,5 +1,6 @@
-import {Button, Dropdown} from "antd";
-import {AdvancedFilters} from "./AdvancedFilters.jsx";
+import { Button, Dropdown } from "antd";
+import { AdvancedFilters } from "./AdvancedFilters.jsx";
+import { RightOutlined } from "@ant-design/icons";
 
 export const AdvancedFiltersWrapper = () => {
   const filtersRender = () => {
@@ -17,9 +18,10 @@ export const AdvancedFiltersWrapper = () => {
     >
       <Button
         onClick={(e) => e.stopPropagation()}
-        className="w-full"
+        className="w-full text-left flex justify-between items-center border-0 p-0 mt-16"
       >
         Расширенные фильтры
+        <RightOutlined className="mt-0.5 mr-1"/>
       </Button>
     </Dropdown>
   );

src/modules/Sidebar/PendingPointsFilters/AdvancedFilters/Slider.jsx

@@ -1,11 +1,13 @@
 import { SliderComponent as Slider } from "../../../../components/SliderComponent";
 import { useEffect } from "react";
 import {
-  INITIAL,
+  INITIAL, usePendingPointsFilters,
 } from "../../../../stores/usePendingPointsFilters";
 
-export const FilterSlider = ({ filterRange, setFilterRange, disabled, fullRange, title, filterKey, dynamicKey }) => {
-  const handleAfterChange = (range) => setFilterRange(range, filterKey);
+export const FilterSlider = ({ filterRange, disabled, fullRange, title, filterKey, dynamicKey }) => {
+
+  const { setFilterWithKey } = usePendingPointsFilters();
+  const handleAfterChange = (range) => setFilterWithKey(range, filterKey);
 
   useEffect(() => {
     if (!fullRange) return;
@@ -24,7 +26,7 @@ export const FilterSlider = ({ filterRange, setFilterRange, disabled, fullRange,
       filterRange[1] === 0);
 
     if (shouldSetFullRange || (shouldSetDynamicKeyRange && dynamicKey)) {
-      setFilterRange([min, max], filterKey);
+      setFilterWithKey([min, max], filterKey);
     }
   }, [fullRange]);
 

src/modules/Table/PendingTable/usePendingTableData.js

@@ -3,6 +3,7 @@ import { getPoints } from "../../../api";
 import { useMergeTableData } from "../useMergeTableData";
 import { STATUSES } from "../../../config";
 import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
+import {fieldHasChanged} from "../../../utils.js";
 
 export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort) => {
   const { filters, ranges } = usePendingPointsFilters();
@@ -23,12 +24,7 @@ export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort
     };
 
     RANGE_FILTERS_KEYS.map((filterKey) => {
-      const gtValue = filters[`${filterKey}__gt`];
-      const gtInitial = ranges[filterKey][0];
-      const ltValue = filters[`${filterKey}__lt`];
-      const ltInitial = ranges[filterKey][1];
-
-      if (gtValue === gtInitial && ltValue === ltInitial) return;
+      if (!fieldHasChanged(filters, ranges, filterKey).result) return;
       tempParams = {
         ...tempParams,
         [`${filterKey}__gt`]: filters[`${filterKey}__gt`] - 1,

src/stores/usePendingPointsFilters.js

@@ -18,6 +18,22 @@ export const RANGE_FILTERS_KEYS = [
   'metro_dist',
 ]
 
+export const RANGE_FILTERS_MAP = {
+  doors: "Кол-во подъездов в жилом доме",
+  flat_cnt: "Кол-во квартир в подъезде жилого дома",
+  rival_post_cnt: "Кол-во постаматов других сетей",
+  rival_pvz_cnt: "Кол-во ПВЗ",
+  target_post_cnt: "Кол-во постаматов Мой постамат",
+  flats_cnt: "Кол-во квартир в окрестности",
+  tc_cnt: "Кол-во торговых центров",
+  culture_cnt: "Кол-во объектов культуры (театры, музей и тд)",
+  mfc_cnt: "Кол-во МФЦ",
+  public_stop_cnt: "Кол-во остановок ОТ",
+  supermarket_cnt: "Кол-во супермаркетов",
+  target_dist: "Расстояние до постамата Мой постамат",
+  metro_dist: "Расстояние до метро",
+}
+
 export const INITIAL = {
   prediction: [0, 0],
   categories: [],

src/utils.js

@@ -1,3 +1,5 @@
+import {usePendingPointsFilters} from "./stores/usePendingPointsFilters.js";
+
 export function download(filename, data) {
   const downloadLink = window.document.createElement("a");
   downloadLink.href = window.URL.createObjectURL(
@@ -19,5 +21,32 @@ export function transliterate(word){
   }).join("");
 }
 
+export function getFilteredGroups(categories) {
+  if (!categories) return [];
+  return categories
+    .filter((category) => category.visible)
+    .map((category) => {
+      return {
+        ...category,
+        groups: [...category.groups.filter((group) => group.visible)],
+      }
+    })
+}
+
+export function fieldHasChanged(filters, ranges, filterKey)  {
+  const gtValue = filters[`${filterKey}__gt`];
+  const gtInitial = ranges[filterKey][0];
+  const ltValue = filters[`${filterKey}__lt`];
+  const ltInitial = ranges[filterKey][1];
+
+  const result = !(gtValue === gtInitial && ltValue === ltInitial)
+
+  return {
+    result,
+    gtValue,
+    ltValue,
+  }
+}
+
 export const isNil = (value) =>
   value === undefined || value === null || value === "";