Refactor SearchFilters, SelectedComplexCard, FloorsPage, SearchPage, and UnitPage components to use project slugs instead of titles for improved consistency; remove unused slugToComplexName utility; enhance unit type slug handling for "hq" complex.

src/components/SearchFilters.tsx

@@ -106,7 +106,7 @@ function SearchFilters({
   });
 
   function handleSelectProject(project: Project | null) {
-    setProject(project?.title || projects[0].title);
+    setProject(project?.slug || projects[0].slug);
   }
 
   function handleSelectUnitTypes(unitTypes: string[]) {
@@ -187,7 +187,7 @@ function SearchFilters({
                   projects={projects}
                   onSelect={handleSelectProject}
                   defaultProject={
-                    projects.find(({ title }) => title === project)!
+                    projects.find(({ slug }) => slug === project)!
                   }
                 />
               </motion.div>

src/components/SelectedComplexCard.tsx

@@ -21,7 +21,7 @@ function SelectedComplexCard({
     queryKey: ["filters", "unitTypes", marker.title],
     queryFn: () =>
       api
-        .get(`units/filters/unitTypes?project=Rove Home ${marker.title}`)
+        .get(`units/filters/unitTypes?project=${marker.name}`)
         .json<string[]>(),
   });
 

src/pages/FloorsPage.tsx

@@ -7,7 +7,6 @@ import { useQuery } from "@tanstack/react-query";
 import { api } from "../api/ky";
 import { SPECIAL_FLOORS } from "../constants/floors";
 import { Unit } from "../types/IUnit";
-import slugToComplexName from "../utils/slugToComplexName";
 import { ComplexName } from "../types/ComplexName";
 import FloorPlanViewer from "../components/floor-plans/FloorPlanViewer";
 import { marasiDriveFloors } from "../data/floors/marasi-drive";
@@ -29,10 +28,7 @@ function FloorsPage() {
     queryFn: () =>
       api
         .get(
-          `units/get-floors-data/Rove Home ${complexName
-            ?.split("-")
-            .map((w) => w[0].toUpperCase() + w.slice(1))
-            .join(" ")}`,
+          `units/get-floors-data/${complexName}`,
         )
         .json<FloorsData[]>(),
   });
@@ -43,7 +39,7 @@ function FloorsPage() {
     queryFn: () =>
       api
         .get(
-          `units/on-floor?project=${slugToComplexName(complexName!)}&floor=${
+          `units/on-floor?project=${complexName}&floor=${
             selectedFloor?.split(" ").at(-1)?.split("-")[0]
           }${
             complexName === "marasi-drive"

src/pages/SearchPage.tsx

@@ -20,7 +20,7 @@ const STEP = 12;
 function SearchPage() {
   const [searchParams] = useSearchParams();
   const [project, setProject] = useState(
-    searchParams.get("project") || "Rove Home Marasi Drive"
+    searchParams.get("project") || "marasi-drive"
   );
   const [selectedUnitTypes, setSelectedUnitTypes] = useState<string[]>([]);
 

src/pages/UnitPage.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { useQuery } from "@tanstack/react-query";
 import { useParams } from "react-router";
 import { api } from "../api/ky";
@@ -8,7 +7,6 @@ import Button from "../components/ui/Button";
 import FilledHeartIcon from "../components/icons/FilledHeartIcon";
 import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
 import HeartIcon from "../components/icons/HeartIcon";
-import slugToComplexName from "../utils/slugToComplexName";
 import { formattedUnitTypes } from "../data/formattedUnitTypes";
 import { projects } from "../data/projects";
 import VideoModal from "../components/VideoModal";
@@ -28,9 +26,7 @@ function UnitPage() {
     queryFn: () =>
       api
         .get(
-          `units/${params.unitNumber}?project=${slugToComplexName(
-            params.complexName!
-          )}`
+          `units/${params.unitNumber}?project=${params.complexName}`
         )
         .json<Unit>(),
   });

src/utils/getUnitTypeSlug.ts

@@ -31,6 +31,13 @@ export default function getUnitTypeSlug(complex: string, unitType: string) {
       default:
         return "";
     }
+  } else if (complex === "hq") {
+    switch (unitType) {
+      case "Studio":
+        return "studio";
+      default:
+        return "";
+    }
   } else {
     return "";
   }