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>
         );
       })}