Merge branch 'feature/stage_two' into 'dev'

merge points api See merge request spatial/postamates_frontend!36
2 years ago · 3cdabd2811
parent 3134a672c7 0d32fc6d32
commit 3cdabd2811
14 changed files with 146 additions and 101 deletions
--- a/src/Map/Layers/CancelledPoints.jsx
+++ b/src/Map/Layers/CancelledPoints.jsx
@ -6,7 +6,7 @@ import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { useMode } from "../../stores/useMode";
 import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
-import { getSourceLayerName } from "../../api.js";
+import { useSourceLayerName } from "../../api.js";

 const statusExpression = ["==", ["get", "status"], STATUSES.cancelled];

@ -18,6 +18,7 @@ export const CancelledPoints = () => {
  const regionFilterExpression = useRegionFilterExpression(region);

  const { mode } = useMode();
+  const layerName = useSourceLayerName();

  const getFilter = () => {
    if (mode === MODES.ON_APPROVAL) {
@ -35,7 +36,7 @@ export const CancelledPoints = () => {
        {...cancelledPointLayer}
        id={LAYER_IDS.cancelled}
        source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
        layout={{
          visibility: isVisible[LAYER_IDS.cancelled] ? "visible" : "none",
        }}
--- a/src/Map/Layers/FilteredWorkingPoints.jsx
+++ b/src/Map/Layers/FilteredWorkingPoints.jsx
@ -5,12 +5,13 @@ import { STATUSES } from "../../config";
 import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { useWorkingPointsFilters } from "../../stores/useWorkingPointsFilters";
-import { getSourceLayerName } from "../../api.js";
+import { useSourceLayerName } from "../../api.js";

 const statusExpression = ["==", ["get", "status"], STATUSES.working];

 export const FilteredWorkingPoints = () => {
  const { isVisible } = useLayersVisibility();
+  const layerName = useSourceLayerName();
  const {
    filters: { deltaTraffic, factTraffic, age, region },
  } = useWorkingPointsFilters();
@ -54,7 +55,7 @@ export const FilteredWorkingPoints = () => {
        {...workingPointSymbolLayer}
        id={LAYER_IDS.filteredWorking}
        source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
        layout={{
          ...workingPointSymbolLayer.layout,
          visibility: isVisible[LAYER_IDS.filteredWorking] ? "visible" : "none",
--- a/src/Map/Layers/OnApprovalPoints.jsx
+++ b/src/Map/Layers/OnApprovalPoints.jsx
@ -5,12 +5,13 @@ import { STATUSES } from "../../config";
 import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
-import { getSourceLayerName } from "../../api.js";
+import { useSourceLayerName } from "../../api.js";

 const statusExpression = ["==", ["get", "status"], STATUSES.onApproval];

 export const OnApprovalPoints = () => {
  const { isVisible } = useLayersVisibility();
+  const layerName = useSourceLayerName();
  const {
    filters: { region },
  } = useOnApprovalPointsFilters();
@ -26,7 +27,7 @@ export const OnApprovalPoints = () => {
        {...approvePointLayer}
        id={LAYER_IDS.approve}
        source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
        layout={{
          visibility: isVisible[LAYER_IDS.approve] ? "visible" : "none",
        }}
--- a/src/Map/Layers/PendingPoints.jsx
+++ b/src/Map/Layers/PendingPoints.jsx
@ -10,7 +10,7 @@ import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "../../stores/usePendingPointsFilters";
 import { fieldHasChanged } from "../../utils.js";
-import { getSourceLayerName } from "../../api.js";
+import { useSourceLayerName } from "../../api.js";

 const statusExpression = ["==", ["get", "status"], STATUSES.pending];

@ -89,6 +89,7 @@ const useFilterExpression = () => {

 export const PendingPoints = () => {
  const { isVisible } = useLayersVisibility();
+  const layerName = useSourceLayerName();
  const { match: matchFilterExpression, unmatch: unmatchFilterExpression } =
    useFilterExpression();

@ -98,7 +99,7 @@ export const PendingPoints = () => {
        {...matchInitialPointLayer}
        id={LAYER_IDS["initial-unmatch"]}
        source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={useSourceLayerName()}
        layout={{
          ...matchInitialPointLayer.layout,
          visibility: isVisible[LAYER_IDS.initial] ? "visible" : "none",
@ -110,7 +111,7 @@ export const PendingPoints = () => {
        {...matchInitialPointLayer}
        id={LAYER_IDS["initial-match"]}
        source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
        layout={{
          ...matchInitialPointLayer.layout,
          visibility: isVisible[LAYER_IDS.initial] ? "visible" : "none",
--- a/src/Map/Layers/Points.jsx
+++ b/src/Map/Layers/Points.jsx
@ -1,16 +1,16 @@
 import { Source } from "react-map-gl";
-import { BASE_URL, getSourceLayerName } from "../../api";
+import { BASE_URL, useSourceLayerName } from "../../api";
 import { useUpdateLayerCounter } from "../../stores/useUpdateLayerCounter";
 import { PendingPoints } from "./PendingPoints";
 import { OnApprovalPoints } from "./OnApprovalPoints";
 import { WorkingPoints } from "./WorkingPoints";
 import { FilteredWorkingPoints } from "./FilteredWorkingPoints";
 import { CancelledPoints } from "./CancelledPoints";
-import {useEffect} from "react";
+import { useEffect } from "react";

 export const Points = () => {
  const { updateCounter, toggleUpdateCounter } = useUpdateLayerCounter();
-  const layer = getSourceLayerName();
+  const layer = useSourceLayerName();
  useEffect(() => {
    toggleUpdateCounter();
  }, [layer]);
--- a/src/Map/Layers/WorkingPoints.jsx
+++ b/src/Map/Layers/WorkingPoints.jsx
@ -6,12 +6,13 @@ import { useRegionFilterExpression } from "./useRegionFilterExpression";
 import { LAYER_IDS } from "./constants";
 import { useMode } from "../../stores/useMode";
 import { useOnApprovalPointsFilters } from "../../stores/useOnApprovalPointsFilters";
-import {getSourceLayerName} from "../../api.js";
+import {useSourceLayerName} from "../../api.js";

 const statusExpression = ["==", ["get", "status"], STATUSES.working];

 export const WorkingPoints = () => {
  const { isVisible } = useLayersVisibility();
+  const layerName = useSourceLayerName();
  const {
    filters: { region },
  } = useOnApprovalPointsFilters();
@ -35,7 +36,7 @@ export const WorkingPoints = () => {
        {...workingPointSymbolLayer}
        id={LAYER_IDS.working}
        source={"points"}
-        source-layer={getSourceLayerName()}
+        source-layer={layerName}
        layout={{
          ...workingPointSymbolLayer.layout,
          visibility: isVisible[LAYER_IDS.working] ? "visible" : "none",
--- a/src/api.js
+++ b/src/api.js
@ -3,7 +3,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import { STATUSES } from "./config";
 import { usePointSelection } from "./stores/usePointSelection";
 import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "./stores/usePendingPointsFilters";
-import { fieldHasChanged } from "./utils.js";
+import { appendFiltersInUse } from "./utils.js";
 import { useMode } from "./stores/useMode.js";

 export const BASE_URL = import.meta.env.VITE_API_URL;
@ -18,13 +18,13 @@ export const api = axios.create({
  xsrfCookieName: "csrftoken",
 });

-export const getApiName = () => {
+export const useDbTableName = () => {
  const {isImportMode} = useMode();
  if (isImportMode) return "pre_placement_points";
  return "placement_points";
 }

-export const getSourceLayerName = () => {
+export const useSourceLayerName = () => {
  const {isImportMode} = useMode();
  if (isImportMode) return "public.service_preplacementpoint";
  return "public.points_with_dist";
@ -46,11 +46,11 @@ const enrichParamsWithRegionFilter = (params, region) => {
  return resultParams;
 };

-export const getPoints = async (params, region, link = "placement_points") => {
+export const getPoints = async (params, region, dbTable = "placement_points") => {
  const resultParams = enrichParamsWithRegionFilter(params, region);

  const { data } = await api.get(
-    `/api/${link}/?${resultParams.toString()}`
+    `/api/${dbTable}/?${resultParams.toString()}`
  );

  return data;
@ -91,9 +91,9 @@ export const importPoints = async (id) => {
 };

 export const useGetTotalInitialPointsCount = () => {
-  const link = getApiName();
+  const dbTable = useDbTableName();
  return useQuery(
-    ["all-initial-count", link],
+    ["all-initial-count", dbTable],
    async () => {
      const params = new URLSearchParams({
        page: 1,
@ -101,13 +101,13 @@ export const useGetTotalInitialPointsCount = () => {
        "status[]": [STATUSES.pending],
      });

-      return await getPoints(params, null, link);
+      return await getPoints(params, null, dbTable);
    },
    { select: (data) => data.count }
  );
 };

-export const useGetFilteredPendingPointsCount = () => {
+export const useGetFilteredPendingPointsCount = (isMerge) => {
  const { filters, ranges } = usePendingPointsFilters();
  const {
    prediction,
@ -128,45 +128,61 @@ export const useGetFilteredPendingPointsCount = () => {
      "categories[]": categories,
      "included[]": includedIds,
    });
-
-
-    RANGE_FILTERS_KEYS.map((filterKey) => {
-      if (!fieldHasChanged(filters, ranges, filterKey).result) return;
-      if (/d[0-9]/.test(filterKey)) {
-        params.append('dist_to_group__gt', [
-          filterKey.split('d')[1],
-          filters[`${filterKey}__gt`] - 1
-        ].join(','));
-        params.append('dist_to_group__lt', [
-          filterKey.split('d')[1],
-          filters[`${filterKey}__lt`] + 1
-        ].join(','));
-      } else {
-        params.append(`${filterKey}__gt`, filters[`${filterKey}__gt`] - 1);
-        params.append(`${filterKey}__lt`, filters[`${filterKey}__lt`] + 1);
-      }
-
-    });
+    appendFiltersInUse(params, filters, ranges);
+    if (isMerge) params.append("matching_status", "New")

    return params;
  }

-  const link = getApiName();
+  const dbTable = useDbTableName();

  return useQuery(
-    ["filtered-points", filters, link, includedIds],
+    ["filtered-points", filters, dbTable, includedIds],
    async () => {
      const params = getParams();

-      return await getPoints(params, region, link);
+      return await getPoints(params, region, dbTable);
    },
    { select: (data) => data.count, keepPreviousData: true }
  );
 };

+export const useMergePointsToDb = () => {
+  const { filters, ranges } = usePendingPointsFilters();
+  const {
+    prediction,
+    categories,
+  } = filters;
+  const {
+    selection: { included },
+  } = usePointSelection();
+
+  const includedIds = [...included];
+  const getParams = () => {
+    const params = new URLSearchParams({
+      page: 1,
+      page_size: 1,
+      "prediction_current[]": prediction,
+      "categories[]": categories,
+      "included[]": includedIds,
+    });
+    appendFiltersInUse(params, filters, ranges);
+
+    return params;
+  }
+
+  return useMutation({
+    mutationFn: () => {
+      return api.post(
+        `/api/pre_placement_points/move_points/?${getParams().toString()}`
+      );
+    },
+  });
+};
+
 export const useGetPermissions = () => {
  return useQuery(["permissions"], async () => {
-    const { data } = await api.get("/api/me");
+    const { data } = await api.get("/api/me/");

    if (data?.groups?.includes("Редактор")) {
      return "editor";
@ -186,7 +202,7 @@ export const useUpdatePostamatId = () => {
  return useMutation({
    mutationFn: (params) => {
      return api.put(
-        `/api/placement_points/update_postamat_id?${params.toString()}`
+        `/api/placement_points/update_postamat_id/?${params.toString()}`
      );
    },
  });
@ -243,12 +259,12 @@ export const useLastMLRun = () => {
  );
 }

-export const useGetPendingPointsRange = (link) => {
+export const useGetPendingPointsRange = (dbTable) => {
  return useQuery(
-    ["prediction-max-min", link],
+    ["prediction-max-min", dbTable],
    async () => {
      const { data, isInitialLoading, isFetching } = await api.get(
-        `/api/${link}/filters?status[]=${STATUSES.pending}`
+        `/api/${dbTable}/filters/?status[]=${STATUSES.pending}`
      );
      return {data, isLoading: isInitialLoading || isFetching};
    },
@ -282,7 +298,7 @@ export const useGetPendingPointsRange = (link) => {

 export const useGetPopupPoints = (features) => {
  const pointsIds = features.map(f => f.properties.id);
-  const link = getApiName();
+  const dbTable = useDbTableName();

  const { data, isInitialLoading, isFetching } = useQuery(
    ["popup_data", features],
@ -292,7 +308,7 @@ export const useGetPopupPoints = (features) => {
      });

      const { data } = await api.get(
-        `/api/${link}/?${params.toString()}`
+        `/api/${dbTable}/?${params.toString()}`
      );

      return data.results;
--- a/src/modules/ImportMode/MergePointsModal.jsx
+++ b/src/modules/ImportMode/MergePointsModal.jsx
@ -1,22 +1,28 @@
 import { Button, Modal, Spin } from "antd";
 import { useState } from "react";
-import { useGetFilteredPendingPointsCount } from "../../api.js";
+import {useGetFilteredPendingPointsCount, useMergePointsToDb} from "../../api.js";
 import { CheckCircleOutlined, InfoCircleOutlined, LoadingOutlined } from "@ant-design/icons";
 import { useMode } from "../../stores/useMode.js";

-export const AddPointsModal = ({isOpened, onClose}) => {
+export const MergePointsModal = ({isOpened, onClose}) => {
  const {setImportMode} = useMode();
  const [isLoading, setIsLoading] = useState(false);
  const { data: filteredCount, isInitialLoading: isFilteredLoading } =
-    useGetFilteredPendingPointsCount();
+    useGetFilteredPendingPointsCount(true);
  const [isSuccess, setIsSuccess] = useState(false);
+  const {mutateAsync: mergePoints} = useMergePointsToDb();

-  const onConfirm = () => {
+  const onConfirm = async () => {
    setIsLoading(true);
-    setTimeout(() => {
-      setIsLoading(false);
+
+    try {
+      await mergePoints();
      setIsSuccess(true);
-    }, 2000);
+    } catch (e) {
+      //
+    } finally {
+      setIsLoading(false);
+    }
  }

  const getFooter = () => {
--- a/src/modules/ImportMode/PointsFileUploadModal.jsx
+++ b/src/modules/ImportMode/PointsFileUploadModal.jsx
@ -3,13 +3,14 @@ import { useState } from "react";
 import { importPoints } from "../../api.js";
 import { LoadingStage } from "./LoadingStage.jsx";
 import { ReportStage } from "./ReportStage.jsx";
-import { CheckCircleOutlined, LoadingOutlined } from "@ant-design/icons";
+import {CheckCircleOutlined, CloseCircleOutlined, LoadingOutlined} from "@ant-design/icons";

-export const OnLoadModal = ({onClose, isOpened}) => {
+export const PointsFileUploadModal = ({onClose, isOpened}) => {
  const [fileId, setFileId] = useState();
  const [report, setReport] = useState();
  const [isImporting, setIsImporting] = useState(false);
  const [isReportStage, setIsReportStage] = useState(false);
+  const [isError, setIsError] = useState(false);

  const onImportPoints = async () => {
    setIsImporting(true);
@ -17,13 +18,22 @@ export const OnLoadModal = ({onClose, isOpened}) => {
      const { message } = await importPoints(fileId);
      setReport(message);
    } catch (e) {
-      console.log(e);
+      setIsError(true);
    } finally {
      setIsImporting(false);
    }
  }

  const getFooter = () => {
+    if (isError) return [
+      <Button
+        key="error-button"
+        type="primary"
+        onClick={onClose}
+      >
+        Закрыть
+      </Button>
+    ]
    if (isReportStage) return [
      <Button
        key="finish-button"
@ -61,9 +71,15 @@ export const OnLoadModal = ({onClose, isOpened}) => {
    ]
  }
  const getContent = () => {
+    if (isError) return (
+      <div className="flex items-center justify-center font-bold gap-2">
+        <CloseCircleOutlined style={{ fontSize: 24, color: "#FF4D4F" }} />
+        При импорте точек произошла ошибка
+      </div>
+    )
    if (isImporting) return (
      <div className="flex flex-col justify-center gap-2 items-center">
-        <Spin indicator={<LoadingOutlined style={{ fontSize: 64}} spin />} />
+        <Spin indicator={<LoadingOutlined style={{ fontSize: 64 }} spin />} />
        Импортируем точки...
      </div>
    );
--- a/src/modules/ImportMode/SidebarButtons.jsx
+++ b/src/modules/ImportMode/SidebarButtons.jsx
@ -1,14 +1,14 @@
 import { useMode } from "../../stores/useMode.js";
 import { Button } from "antd";
 import { ImportOutlined } from "@ant-design/icons";
-import { OnLoadModal } from "./OnLoadModal.jsx";
+import { PointsFileUploadModal } from "./PointsFileUploadModal.jsx";
 import { useState } from "react";
-import { AddPointsModal } from "./AddPointsModal.jsx";
+import { MergePointsModal } from "./MergePointsModal.jsx";
 import { MODES } from "../../config.js";

 export const ImportModeSidebarButtons = () => {
  const { mode, isImportMode, setImportMode } = useMode();
-  const [loadModalOpen, setLoadModalOpen] = useState(false);
+  const [uploadModalOpen, setUploadModalOpen] = useState(false);
  const [addPointsModalOpen, setAddPointsModalOpen] = useState(false);

  const onCancel = () => {
@ -17,7 +17,7 @@ export const ImportModeSidebarButtons = () => {

  const onImport = () => {
    setImportMode(true);
-    setLoadModalOpen(true);
+    setUploadModalOpen(true);
  };

  if (isImportMode) {
@ -29,14 +29,14 @@ export const ImportModeSidebarButtons = () => {
        <Button type="primary" className="flex-1" onClick={() => setAddPointsModalOpen(true)}>
          Добавить в базу
        </Button>
-        {loadModalOpen &&
-          <OnLoadModal
-            isOpened={loadModalOpen}
-            onClose={() => setLoadModalOpen(false)}
+        {uploadModalOpen &&
+          <PointsFileUploadModal
+            isOpened={uploadModalOpen}
+            onClose={() => setUploadModalOpen(false)}
          />
        }
        {addPointsModalOpen &&
-          <AddPointsModal
+          <MergePointsModal
            isOpened={addPointsModalOpen}
            onClose={() => setAddPointsModalOpen(false)}
          />
--- a/src/modules/Sidebar/PendingPointsFilters/PendingPointsFilters.jsx
+++ b/src/modules/Sidebar/PendingPointsFilters/PendingPointsFilters.jsx
@ -13,15 +13,15 @@ import {
 import {RANGE_FILTERS_KEYS, usePendingPointsFilters} from "../../../stores/usePendingPointsFilters";
 import { ClearFiltersButton } from "../../../components/ClearFiltersButton";
 import { getDynamicActiveFilters } from "../utils";
-import { getApiName, useCanEdit, useGetPendingPointsRange } from "../../../api";
+import { useDbTableName, useCanEdit, useGetPendingPointsRange } from "../../../api";
 import { AdvancedFiltersWrapper } from "./AdvancedFilters/AdvancedFiltersWrapper.jsx";

 export const PendingPointsFilters = () => {
  const hasManualEdits = useHasManualEdits();
  const { reset: resetPointSelection } = usePointSelection();
  const { ranges, filters, setRegion, setFilterWithKey, setPrediction, setCategories, setRanges } = usePendingPointsFilters();
-  const link = getApiName();
-  const { data } = useGetPendingPointsRange(link);
+  const dbTable = useDbTableName();
+  const { data } = useGetPendingPointsRange(dbTable);

  useEffect(() => {
    const newRanges = data?.fullRange;
--- a/src/modules/Table/PendingTable/usePendingTableData.js
+++ b/src/modules/Table/PendingTable/usePendingTableData.js
@ -1,9 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
-import { getApiName, getPoints } from "../../../api";
+import { useDbTableName, getPoints } from "../../../api";
 import { useMergeTableData } from "../useMergeTableData";
 import { STATUSES } from "../../../config";
-import { RANGE_FILTERS_KEYS, usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
-import {fieldHasChanged} from "../../../utils.js";
+import { usePendingPointsFilters } from "../../../stores/usePendingPointsFilters";
+import { appendFiltersInUse } from "../../../utils.js";

 export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort) => {
  const { filters, ranges } = usePendingPointsFilters();
@ -13,7 +13,7 @@ export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort
    region,
  } = filters;

-  const link = getApiName();
+  const dbTable = useDbTableName();

  const getParams = () => {
    const params = new URLSearchParams({
@ -25,34 +25,17 @@ export const usePendingTableData = (page, resetPage, pageSize, setPageSize, sort
      ordering: sort,
    });

-
-    RANGE_FILTERS_KEYS.map((filterKey) => {
-      if (!fieldHasChanged(filters, ranges, filterKey).result) return;
-      if (/d[0-9]/.test(filterKey)) {
-        params.append('dist_to_group__gt', [
-          filterKey.split('d')[1],
-          filters[`${filterKey}__gt`] - 1
-        ].join(','));
-        params.append('dist_to_group__lt', [
-          filterKey.split('d')[1],
-          filters[`${filterKey}__lt`] + 1
-        ].join(','));
-      } else {
-        params.append(`${filterKey}__gt`, filters[`${filterKey}__gt`] - 1);
-        params.append(`${filterKey}__lt`, filters[`${filterKey}__lt`] + 1);
-      }
-
-    });
+    appendFiltersInUse(params, filters, ranges);

    return params;
  }

  const {data, isInitialLoading, isFetching} = useQuery(
-    ["table", page, filters, sort, link],
+    ["table", page, filters, sort, dbTable],
    async () => {
      const params = getParams();

-      return await getPoints(params, region, link);
+      return await getPoints(params, region, dbTable);
    },
    {
      keepPreviousData: true,
--- a/src/modules/Table/useColumns.jsx
+++ b/src/modules/Table/useColumns.jsx
@ -393,7 +393,7 @@ export const useColumns = (fields = [], key) => {
        showSorterTooltip: false,
      },
      ...fields,
-    ].filter(c => !!c);
+    ].filter(Boolean);
  }, [regions?.normalized, fields, fullScreen]);

  const [order, setOrder] = useLocalStorage(`${key}Order`, defaultColumns.map((column, index) => {
@ -412,7 +412,7 @@ export const useColumns = (fields = [], key) => {
          defaultSortOrder: sort.includes('-') ? 'descend' : 'ascend',
        };
        return column;
-      }).filter(c => !!c);
+      }).filter(Boolean);
  }, [defaultColumns, order, fullScreen]);

  return {
--- a/src/utils.js
+++ b/src/utils.js
@ -99,5 +99,24 @@ export const doesMatchFilter = (filters, ranges, feature) => {
  );
 };

+export const appendFiltersInUse = (params, filters, ranges) => {
+  RANGE_FILTERS_KEYS.map((filterKey) => {
+    if (!fieldHasChanged(filters, ranges, filterKey).result) return;
+    if (/d[0-9]/.test(filterKey)) {
+      params.append('dist_to_group__gt', [
+        filterKey.split('d')[1],
+        filters[`${filterKey}__gt`] - 1
+      ].join(','));
+      params.append('dist_to_group__lt', [
+        filterKey.split('d')[1],
+        filters[`${filterKey}__lt`] + 1
+      ].join(','));
+    } else {
+      params.append(`${filterKey}__gt`, filters[`${filterKey}__gt`] - 1);
+      params.append(`${filterKey}__lt`, filters[`${filterKey}__lt`] + 1);
+    }
+  });
+}
+
 export const isNil = (value) =>
  value === undefined || value === null || value === "";