upd

src/components/ProjectSelect.tsx

@@ -7,15 +7,15 @@ import Select from "./ui/Select";
 function ProjectSelect({
   projects,
   onSelect,
+  defaultProject,
 }: {
   projects: Project[];
   onSelect: (project: Project) => void;
+  defaultProject: Project;
 }) {
-  const [selectedProject, setSelectedProject] = useState(projects[0]);
+  const [selectedProject, setSelectedProject] = useState(defaultProject);
 
-  useEffect(() => {
-    onSelect(selectedProject);
-  }, [selectedProject]);
+  useEffect(() => onSelect(selectedProject), [selectedProject]);
 
   return (
     <>
@@ -45,9 +45,11 @@ function ProjectSelect({
         options={projects.map((project) => project.title)}
         onSelect={(option) =>
           setSelectedProject(
-            projects.find((project) => project.title === option) || projects[0]
+            projects.find((project) => project.title === option) ||
+              defaultProject
           )
         }
+        defaultOption={defaultProject.title}
         className="md:hidden"
       />
     </>

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">

src/components/UnitTypesSelect.tsx

@@ -18,7 +18,6 @@ function UnitTypesSelect({
 
   useEffect(() => {
     const unitTypesValue = searchParams.getAll("unitTypes");
-
     if (unitTypesValue) setSelectedUnitTypes(unitTypesValue);
   }, [searchParams]);
 

src/components/ui/Select.tsx

@@ -6,24 +6,26 @@ import { useClickAway } from "@uidotdev/usehooks";
 import clsx from "clsx";
 import ChevronDownIcon from "../icons/ChevronDownIcon";
 import CheckIcon from "../icons/CheckIcon";
+
 function Select({
   options,
   onSelect,
   className = "",
   label = "",
+  defaultOption = "",
 }: {
   options: string[];
   onSelect: (option: string) => void;
+  defaultOption: string;
   className?: string;
   label?: string;
 }) {
   const [isShow, setIsShow] = useState(false);
-  const [selectedOption, setSelectedOption] = useState(options[0]);
+  const [selectedOption, setSelectedOption] = useState(defaultOption);
+
   const ref = useClickAway<HTMLDivElement>(() => setIsShow(false));
 
-  useEffect(() => {
-    onSelect(selectedOption);
-  }, [selectedOption]);
+  useEffect(() => onSelect(selectedOption), [selectedOption]);
 
   return (
     <div ref={ref} className={clsx("relative", className)}>