marks disappears while distance change

src/components/InfrastructurePage/InfrastructureFilters.tsx

@@ -1,9 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { environments, transports } from "../../consts/infrastructure";
 import InputRange from "./InputRange";
 import { Mark } from "../../types/Mark";
 
-interface IInfrastructureFiltersProps {
+interface InfrastructureFiltersProps {
   setSelectedRange: React.Dispatch<React.SetStateAction<number>>;
   setFilteredMarks: React.Dispatch<React.SetStateAction<Mark[]>>;
   selectedRange: number;
@@ -15,7 +15,7 @@ const InfrastructureFilters = ({
   setFilteredMarks,
   selectedRange,
   marks,
-}: IInfrastructureFiltersProps) => {
+}: InfrastructureFiltersProps) => {
   const [filter, setFilter] = useState("");
   function handleOnFilterClick(
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
@@ -23,10 +23,6 @@ const InfrastructureFilters = ({
     const infrastructureFilter = event.currentTarget.dataset.set;
     if (!infrastructureFilter) return;
 
-    const filteredMarks = marks.filter(
-      (mark) => mark.icon === infrastructureFilter
-    );
-    setFilteredMarks(filteredMarks);
     setFilter(infrastructureFilter);
   }
 
@@ -34,6 +30,15 @@ const InfrastructureFilters = ({
     event: React.ChangeEvent<HTMLInputElement>
   ) => setSelectedRange(Number(event.target.value));
 
+  useEffect(() => {
+    const filteredMarks = marks.filter(
+      (mark) => mark.icon === filter && mark.distance <= selectedRange
+    );
+    console.log("filteredMarks", filteredMarks);
+
+    setFilteredMarks(filteredMarks);
+  }, [selectedRange, filter, marks, setFilteredMarks]);
+
   return (
     <>
       <div>

src/components/InfrastructurePage/InputRange.tsx

@@ -1,11 +1,11 @@
 import { rangeStart, rangeEnd, rangeStep } from "../../consts/infrastructure";
 
-interface IInputRangeProps {
+interface InputRangeProps {
   selectedRange: number;
   handleOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const InputRange = ({ handleOnChange, selectedRange }: IInputRangeProps) => {
+const InputRange = ({ handleOnChange, selectedRange }: InputRangeProps) => {
   return (
     <div className="flex flex-col gap-3 justify-between h-full">
       <div className="flex flex-col gap-1">

src/components/Mark.tsx

@@ -1,5 +0,0 @@
-function Mark() {
-  return <div>Mark</div>;
-}
-
-export default Mark;

src/components/MarksContainer.tsx

@@ -2,6 +2,11 @@ import { Mark } from "../types/Mark";
 import MarkFoodIcon from "./icons/marks/MarkFoodIcon";
 import MarkShopIcon from "./icons/marks/MarkShopIcon";
 
+const markIcons: { [key: string]: React.ReactNode } = {
+  shop: <MarkShopIcon />,
+  food: <MarkFoodIcon />,
+};
+
 interface MarksContainerProps {
   marks: Mark[];
   filteredMarks: Mark[];
@@ -25,27 +30,14 @@ function MarksContainer({
       className="absolute top-0 left-0 w-full h-full"
     >
       {marks.map((mark) => {
-        let icon;
         const isFiltered = filteredMarks.find(
           (filteredMark) => filteredMark.id === mark.id
         );
 
-        switch (mark.icon) {
-          case "shop":
-            icon = <MarkShopIcon />;
-            break;
-          case "food":
-            icon = <MarkFoodIcon />;
-            break;
-
-          default:
-            break;
-        }
-
         return (
           <svg
             className={`transition-opacity duration-300 ease-in-out ${
-              isFiltered ? "opacity-0" : "opacity-100"
+              isFiltered ? "opacity-100" : "opacity-0"
             }`}
             x={mark.x}
             y={mark.y}
@@ -64,7 +56,7 @@ function MarksContainer({
               rx="28.4444"
               fill="#002347"
             />
-            {icon}
+            {markIcons[mark.icon]}
           </svg>
         );
       })}

src/marks.json

@@ -3,36 +3,125 @@
     "id": "shop_1",
     "x": 900,
     "y": 1000,
-    "icon": "shop"
+    "icon": "shop",
+    "distance": 200
   },
   {
     "id": "shop_2",
     "x": 666,
     "y": 777,
-    "icon": "shop"
+    "icon": "shop",
+    "distance": 200
   },
   {
     "id": "shop_3",
     "x": 500,
     "y": 900,
-    "icon": "shop"
+    "icon": "shop",
+    "distance": 200
   },
   {
     "id": "food_1",
-    "x": 390,
-    "y": 590,
-    "icon": "food"
+    "label": "Сезоны",
+    "x": 970,
+    "y": 850,
+    "icon": "food",
+    "distance": 300
   },
   {
     "id": "food_2",
-    "x": 590,
-    "y": 990,
-    "icon": "food"
+    "label": "Штерн",
+    "x": 920,
+    "y": 1030,
+    "icon": "food",
+    "distance": 200
   },
   {
     "id": "food_3",
+    "label": "Lo Vegano",
     "x": 1190,
-    "y": 990,
-    "icon": "food"
+    "y": 1120,
+    "icon": "food",
+    "distance": 250
+  },
+  {
+    "id": "food_4",
+    "label": "La Coffeina",
+    "x": 1070,
+    "y": 1200,
+    "icon": "food",
+    "distance": 250
+  },
+  {
+    "id": "food_5",
+    "label": "Фартук",
+    "x": 930,
+    "y": 1170,
+    "icon": "food",
+    "distance": 250
+  },
+  {
+    "id": "food_6",
+    "label": "Breadway",
+    "x": 1090,
+    "y": 870,
+    "icon": "food",
+    "distance": 250
+  },
+  {
+    "id": "food_7",
+    "label": "Cucina",
+    "x": 1180,
+    "y": 890,
+    "icon": "food",
+    "distance": 300
+  },
+  {
+    "id": "food_8",
+    "label": "Демидов",
+    "x": 1280,
+    "y": 960,
+    "icon": "food",
+    "distance": 350
+  },
+  {
+    "id": "food_9",
+    "label": "БарБорис",
+    "x": 1090,
+    "y": 770,
+    "icon": "food",
+    "distance": 400
+  },
+  {
+    "id": "food_10",
+    "label": "Барашка на гранате",
+    "x": 1360,
+    "y": 1020,
+    "icon": "food",
+    "distance": 450
+  },
+  {
+    "id": "food_11",
+    "label": "Dorian Gray",
+    "x": 1330,
+    "y": 1140,
+    "icon": "food",
+    "distance": 400
+  },
+  {
+    "id": "food_12",
+    "label": "Витязь",
+    "x": 860,
+    "y": 1240,
+    "icon": "food",
+    "distance": 400
+  },
+  {
+    "id": "food_13",
+    "label": "Coffee&Flowers",
+    "x": 820,
+    "y": 1190,
+    "icon": "food",
+    "distance": 400
   }
 ]

src/types/Mark.ts

@@ -1,6 +1,8 @@
 interface Mark {
   id: string;
+  label: string;
   icon: string;
+  distance: number;
   x: number;
   y: number;
   width?: number;