upd

src/components/SearchFilters.tsx

@@ -24,12 +24,14 @@ export interface Filters {
 
 function SearchFilters({
   inModal = false,
+  filters,
   ref,
 }: {
   inModal?: boolean;
+  filters?: Filters;
   ref?: RefObject<HTMLDivElement | null>;
 }) {
-  const [project, setProject] = useState<string>(projects[0].title);
+  const [project, setProject] = useState<string>();
   const [unitTypes, setUnitTypes] = useState<string[]>([]);
   const [view, setView] = useState<string>("Any view");
 
@@ -37,19 +39,10 @@ function SearchFilters({
 
   const navigate = useNavigate();
 
-  const { data: filters } = useQuery({
-    queryKey: ["filters", project],
-    queryFn: () =>
-      api
-        .get(`units/filters?${project ? `project=${project}` : ""}`)
-        .json<Filters>(),
-  });
-
   useEffect(() => {
     const projectValue = searchParams.get("project");
-    // const unitTypesValue = searchParams.getAll("unitTypes");
     if (projectValue) setProject(projectValue);
-    // if (unitTypesValue) setUnitTypes(unitTypesValue);
+
     const viewValue = searchParams.get("view");
     if (viewValue) setView(viewValue);
   }, [searchParams]);
@@ -110,6 +103,7 @@ function SearchFilters({
       debouncedMinFloor,
       debouncedMaxFloor,
     ],
+    enabled: !!project,
     queryFn: () =>
       api
         .get(
@@ -138,43 +132,6 @@ function SearchFilters({
         .json<number>(),
   });
 
-  useEffect(() => {
-    if (debouncedMinCost && debouncedMaxCost)
-      setSearchParams((prev) => {
-        prev.set(
-          "cost",
-          `${Math.round(debouncedMinCost)},${Math.round(debouncedMaxCost)}`
-        );
-        return prev;
-      });
-
-    if (debouncedMinArea && debouncedMaxArea)
-      setSearchParams((prev) => {
-        prev.set(
-          "area",
-          `${Math.round(debouncedMinArea)},${Math.round(debouncedMaxArea)}`
-        );
-        return prev;
-      });
-
-    if (debouncedMinFloor && debouncedMaxFloor)
-      setSearchParams((prev) => {
-        prev.set(
-          "floor",
-          `${Math.round(debouncedMinFloor)},${Math.round(debouncedMaxFloor)}`
-        );
-        return prev;
-      });
-  }, [
-    debouncedMinCost,
-    debouncedMaxCost,
-    debouncedMinArea,
-    debouncedMaxArea,
-    debouncedMinFloor,
-    debouncedMaxFloor,
-    setSearchParams,
-  ]);
-
   function handleProjectSelect(project: Project) {
     setProject(project.title);
     setSearchParams((prev) => {
@@ -208,7 +165,13 @@ function SearchFilters({
         <p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]">
           Search
         </p>
-        <ProjectSelect projects={projects} onSelect={handleProjectSelect} />
+        {project && (
+          <ProjectSelect
+            projects={projects}
+            onSelect={handleProjectSelect}
+            defaultProject={projects.find(({ title }) => title === project)!}
+          />
+        )}
       </div>
       <hr className="2xl:h-[0.069vw] h-px border-[#E2E2DC]" />
       {filters && (
@@ -255,6 +218,7 @@ function SearchFilters({
               label="View"
               options={["Any view", ...filters.views]}
               onSelect={handleViewSelect}
+              defaultOption={view}
             />
           </div>
           <div className="flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4">