upd

src/pages/SearchPage.tsx

@@ -1,9 +1,9 @@
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
 import { api } from "../api/ky";
 import { IUnit } from "../types/IUnit";
 import UnitCard from "../components/UnitCard";
 import { useEffect, useRef, useState } from "react";
-import SearchFilters from "../components/SearchFilters";
+import SearchFilters, { Filters } from "../components/SearchFilters";
 import { useNavigate, useSearchParams } from "react-router";
 import Button from "../components/ui/Button";
 import FiltersIcon from "../components/icons/FiltersIcon";
@@ -17,12 +17,37 @@ function SearchPage() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
-  const project = searchParams.get("project");
-  const unitTypes = searchParams.getAll("unitTypes");
-  const cost = searchParams.getAll("cost");
-  const floor = searchParams.getAll("floor");
-  const area = searchParams.getAll("area");
-  const view = searchParams.get("view");
+  // const project = searchParams.get("project");
+  // const unitTypes = searchParams.getAll("unitTypes");
+  // const cost = searchParams.getAll("cost");
+  // const floor = searchParams.getAll("floor");
+  // const area = searchParams.getAll("area");
+  // const view = searchParams.get("view");
+
+  const [project, setProject] = useState<string>();
+  const [unitTypes, setUnitTypes] = useState<string[]>([]);
+  const [cost, setCost] = useState<string[]>([]);
+  const [floor, setFloor] = useState<string[]>([]);
+  const [area, setArea] = useState<string[]>([]);
+  const [view, setView] = useState<string>();
+
+  const { data: filters } = useQuery({
+    queryKey: ["filters", project],
+    enabled: !!project,
+    queryFn: () =>
+      api
+        .get(`units/filters?${project ? `project=${project}` : ""}`)
+        .json<Filters>(),
+  });
+
+  useEffect(() => {
+    setProject(searchParams.get("project"));
+    setUnitTypes(searchParams.getAll("unitTypes"));
+    setCost(searchParams.getAll("cost"));
+    setFloor(searchParams.getAll("floor"));
+    setArea(searchParams.getAll("area"));
+    setView(searchParams.get("view"));
+  }, [searchParams]);
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useInfiniteQuery({
@@ -95,7 +120,11 @@ function SearchPage() {
 
   return (
     <div>
-      <SearchFilters ref={filtersRef} inModal={filtersInModal} />
+      <SearchFilters
+        ref={filtersRef}
+        inModal={filtersInModal}
+        filters={filters}
+      />
       <div className="2xl:p-[2.222vw] p-4">
         <AnimatePresence mode="wait">
           {project && unitTypes && cost && area && floor && (