diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 90152c3..fa3725a 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -36,7 +36,7 @@ function Header() { return ( <> -
+
clsx( "text-btn-m 2xl:px-[1.25vw] 2xl:py-[0.903vw] p-4 2xl:rounded-[0.833vw] rounded-xl transition-colors duration-300 !leading-none max-2xl:text-center max-2xl:bg-[#F3F3F2] relative", - isActive && "!bg-[#00BED7] text-[#FFFFFF]" + isActive && + "!bg-[#00BED7] text-[#FFFFFF] [&_>div]:bg-white [&_>div]:text-[#00BED7]" ) } > {title} {title === "Favorites" && !!favoriteUnits.length && ( -
+
{favoriteUnits.length}
)} diff --git a/src/components/Map.tsx b/src/components/Map.tsx index 6296457..e07cc65 100644 --- a/src/components/Map.tsx +++ b/src/components/Map.tsx @@ -14,11 +14,9 @@ import Compass from "./Compass"; import PrivacyPolicyButton from "./PrivacyPolicyButton"; import { getWeather } from "../api/weather"; import { isMobile } from "react-device-detect"; -// import SelectedComplexCard from "./SelectedComplexCard"; import useWindowSize from "../hooks/useWindowSize"; import TouchIcon from "./icons/map/TouchIcon"; import NewSelectedComplexCard from "./NewSelectedComplexCard"; -// import SelectedComplexCard from "./SelectedComplexCard"; interface Position { x: number; @@ -702,7 +700,6 @@ function Map({ maxZoom = 1 }: MapProps) { {isMobile && hoveredMarker && ( - // setHoveredMarker(null)} marker={hoveredMarker} diff --git a/src/components/SearchFilters.tsx b/src/components/SearchFilters.tsx index 7dde1da..538e591 100644 --- a/src/components/SearchFilters.tsx +++ b/src/components/SearchFilters.tsx @@ -4,9 +4,7 @@ import RestartIcon from "./icons/RestartIcon"; import Button from "./ui/Button"; import { api } from "../api/ky"; import { RefObject, useEffect, useState } from "react"; -import { useSearchParams } from "react-router"; import { projects } from "../data/projects"; -import { useDebounce } from "../hooks/useDebounce"; import clsx from "clsx"; import ProjectSelect from "./ProjectSelect"; import UnitTypesSelect from "./UnitTypesSelect"; @@ -20,13 +18,17 @@ import MultiRangeSlider from "./ui/MultiRangeSlider"; function SearchFilters({ inModal = false, setInModal, - ref, cost, - floor, - area, setCost, + floor, setFloor, + area, setArea, + selectedUnitTypes, + setSelectedUnitTypes, + view, + setView, + ref, }: { inModal?: boolean; setInModal: (inModal: boolean) => void; @@ -37,381 +39,248 @@ function SearchFilters({ setCost: (cost: [number, number]) => void; setFloor: (floor: [number, number]) => void; setArea: (area: [number, number]) => void; + selectedUnitTypes: string[]; + setSelectedUnitTypes: (selectedUnitTypes: string[]) => void; + view: string; + setView: (view: string) => void; }) { - const [searchParams, setSearchParams] = useSearchParams(); + const [project, setProject] = useState("Rove Home Marasi Drive"); - const [project, setProject] = useState(); - const [unitTypes, setUnitTypes] = useState( - searchParams.getAll("unitTypes") ?? [] - ); - const [view, setView] = useState("Any view"); - - const [costInModal, setCostInModal] = useState(cost); - const [areaInModal, setAreaInModal] = useState(area); - const [floorInModal, setFloorInModal] = useState(floor); - - const debouncedCost = useDebounce(inModal ? costInModal : cost, 1000); - const debouncedArea = useDebounce(inModal ? areaInModal : area, 1000); - const debouncedFloor = useDebounce(inModal ? floorInModal : floor, 1000); - - const [costTouched, setCostTouched] = useState(false); - const [areaTouched, setAreaTouched] = useState(false); - const [floorTouched, setFloorTouched] = useState(false); - - const debouncedCostTouched = useDebounce(costTouched, 1000); - const debouncedAreaTouched = useDebounce(areaTouched, 1000); - const debouncedFloorTouched = useDebounce(floorTouched, 1000); - - const { data: unitTypesInFilters } = useQuery({ - queryKey: [ - "filters", - "unitTypes", - project, - searchParams.get("cost"), - searchParams.get("floor"), - searchParams.get("area"), - view, - ], - enabled: !!project && !searchParams.has("unitTypes"), - initialData: searchParams.has("unitTypes") - ? searchParams.getAll("unitTypes") - : undefined, + const { data: allUnitTypes } = useQuery({ + queryKey: ["filters", "unitTypes", project], queryFn: () => - api - .get( - `units/filters/unitTypes?${project ? `project=${project}` : ""}${ - view !== "Any view" ? `&view=${view}` : "" - }${ - searchParams.has("cost") ? `&cost=${searchParams.get("cost")}` : "" - }${ - searchParams.has("floor") - ? `&floor=${searchParams.get("floor")}` - : "" - }${ - searchParams.has("area") ? `&area=${searchParams.get("area")}` : "" - }` - ) - .json(), + api.get(`units/filters/unitTypes?project=${project}`).json(), }); - const { data: costInFilters } = useQuery({ - queryKey: [ - "filters", - "cost", - project, - unitTypes, - searchParams.get("floor"), - searchParams.get("area"), - view, - ], - enabled: !!project && !searchParams.has("cost") && !debouncedCostTouched, - initialData: searchParams.has("cost") - ? { - min: searchParams.get("cost")!.split(",").map(Number)[0], - max: searchParams.get("cost")!.split(",").map(Number)[1], - } - : undefined, + const { data: allViews } = useQuery({ + queryKey: ["filters", "views", project], queryFn: () => - api - .get( - `units/filters/cost?${project ? `project=${project}` : ""}${unitTypes - .map((unitType) => `&unitTypes=${unitType}`) - .join("")}${view !== "Any view" ? `&view=${view}` : ""}${ - searchParams.has("floor") - ? `&floor=${searchParams.get("floor")}` - : "" - }${ - searchParams.has("area") ? `&area=${searchParams.get("area")}` : "" - }` - ) - .json<{ min: number; max: number }>(), + api.get(`units/filters/views?project=${project}`).json(), }); - const { data: floorInFilters } = useQuery({ - queryKey: [ - "filters", - "floor", - project, - unitTypes, - searchParams.get("cost"), - searchParams.get("area"), - view, - ], - enabled: !!project && !searchParams.has("floor") && !debouncedFloorTouched, - initialData: searchParams.has("floor") - ? { - min: searchParams.get("floor")!.split(",").map(Number)[0], - max: searchParams.get("floor")!.split(",").map(Number)[1], - } - : floorInModal.every((bound) => bound >= 0) - ? { - min: floorInModal[0], - max: floorInModal[1], - } - : undefined, + const { data: allFloors } = useQuery({ + queryKey: ["filters", "floors", project], queryFn: () => - api - .get( - `units/filters/floor?${project ? `project=${project}` : ""}${unitTypes - .map((unitType) => `&unitTypes=${unitType}`) - .join("")}${view !== "Any view" ? `&view=${view}` : ""}${ - searchParams.has("cost") ? `&cost=${searchParams.get("cost")}` : "" - }${ - searchParams.has("area") ? `&area=${searchParams.get("area")}` : "" - }` - ) - .json<{ min: number; max: number }>(), + api.get(`units/filters/floor?project=${project}`).json<{ + min: number; + max: number; + }>(), }); - const { data: areaInFilters } = useQuery({ - queryKey: [ - "filters", - "area", - project, - unitTypes, - searchParams.get("cost"), - searchParams.get("floor"), - view, - ], - enabled: !!project && !searchParams.has("area") && !debouncedAreaTouched, - initialData: searchParams.has("area") - ? { - min: searchParams.get("area")!.split(",").map(Number)[0], - max: searchParams.get("area")!.split(",").map(Number)[1], - } - : areaInModal.every((bound) => bound >= 0) - ? { - min: areaInModal[0], - max: areaInModal[1], - } - : undefined, + const { data: allCost } = useQuery({ + queryKey: ["filters", "cost", project], queryFn: () => - api - .get( - `units/filters/area?${project ? `project=${project}` : ""}${unitTypes - .map((unitType) => `&unitTypes=${unitType}`) - .join("")}${view !== "Any view" ? `&view=${view}` : ""}${ - searchParams.has("cost") ? `&cost=${searchParams.get("cost")}` : "" - }${ - searchParams.has("floor") - ? `&floor=${searchParams.get("floor")}` - : "" - }` - ) - .json<{ min: number; max: number }>(), + api.get(`units/filters/cost?project=${project}`).json<{ + min: number; + max: number; + }>(), }); - const { data: viewsInFilters } = useQuery({ - queryKey: [ - "filters", - "views", - project, - searchParams.get("cost"), - searchParams.get("floor"), - searchParams.get("area"), - unitTypes, - ], - enabled: !!project, + const { data: allArea } = useQuery({ + queryKey: ["filters", "area", project], queryFn: () => - api - .get( - `units/filters/views?${project ? `project=${project}` : ""}${unitTypes - .map((unitType) => `&unitTypes=${unitType}`) - .join("")}${ - searchParams.has("cost") ? `&cost=${searchParams.get("cost")}` : "" - }${ - searchParams.has("floor") - ? `&floor=${searchParams.get("floor")}` - : "" - }${ - searchParams.has("area") ? `&area=${searchParams.get("area")}` : "" - }` - ) - .json(), + api.get(`units/filters/area?project=${project}`).json<{ + min: number; + max: number; + }>(), }); + useEffect(() => { + if (allFloors) setFloor([allFloors.min, allFloors.max]); + }, [allFloors]); + + useEffect(() => { + if (allCost) setCost([allCost.min, allCost.max]); + }, [allCost]); + + useEffect(() => { + if (allArea) setArea([allArea.min, allArea.max]); + }, [allArea]); + + // useQuery({ + // queryKey: ["filters", "unitTypes", project], + // initialData: allUnitTypes, + // enabled: !!allUnitTypes && !!project, + // queryFn: () => + // api + // .get( + // `units/filters/unitTypes?project=${project}${ + // view !== "Any view" ? `&view=${view}` : "" + // }${ + // cost[0] >= 0 && cost[1] >= 0 + // ? `&cost=${Math.floor(cost[0])},${Math.ceil(cost[1])}` + // : "" + // }${ + // floor[0] >= 0 && floor[1] >= 0 + // ? `&floor=${Math.floor(floor[0])},${Math.ceil(floor[1])}` + // : "" + // }${ + // area[0] >= 0 && area[1] >= 0 + // ? `&area=${Math.floor(area[0])},${Math.ceil(area[1])}` + // : "" + // }` + // ) + // .json(), + // }); + + // const { data: updatedCost, isLoading: updatedCostLoading } = useQuery({ + // queryKey: ["filters", "cost", project], + // enabled: !!allCost && !!project, + // initialData: allCost, + // queryFn: () => + // api + // .get( + // `units/filters/cost?project=${project}${selectedUnitTypes + // .map((unitType) => `&unitTypes=${unitType}`) + // .join("")}${view !== "Any view" ? `&view=${view}` : ""}${ + // floor[0] >= 0 && floor[1] >= 0 + // ? `&floor=${Math.floor(floor[0])},${Math.ceil(floor[1])}` + // : "" + // }${ + // area[0] >= 0 && area[1] >= 0 + // ? `&area=${Math.floor(area[0])},${Math.ceil(area[1])}` + // : "" + // }` + // ) + // .json<{ min: number; max: number }>(), + // }); + + // const { data: updatedFloor, isLoading: updatedFloorLoading } = useQuery({ + // queryKey: ["filters", "floor", project], + // enabled: !!allFloors && !!project, + // initialData: allFloors, + // queryFn: () => + // api + // .get( + // `units/filters/floor?project=${project}${selectedUnitTypes + // .map((unitType) => `&unitTypes=${unitType}`) + // .join("")}${view !== "Any view" ? `&view=${view}` : ""}${ + // cost[0] >= 0 && cost[1] >= 0 + // ? `&cost=${Math.floor(cost[0])},${Math.ceil(cost[1])}` + // : "" + // }${ + // area[0] >= 0 && area[1] >= 0 + // ? `&area=${Math.floor(area[0])},${Math.ceil(area[1])}` + // : "" + // }` + // ) + // .json<{ min: number; max: number }>(), + // }); + + // const { data: updatedArea, isLoading: updatedAreaLoading } = useQuery({ + // queryKey: ["filters", "area", project], + // enabled: !!allArea && !!project, + // initialData: allArea, + // queryFn: () => + // api + // .get( + // `units/filters/area?project=${project}${selectedUnitTypes + // .map((unitType) => `&unitTypes=${unitType}`) + // .join("")}${view !== "Any view" ? `&view=${view}` : ""}${ + // cost[0] >= 0 && cost[1] >= 0 + // ? `&cost=${Math.floor(cost[0])},${Math.ceil(cost[1])}` + // : "" + // }${ + // floor[0] >= 0 && floor[1] >= 0 + // ? `&floor=${Math.floor(floor[0])},${Math.ceil(floor[1])}` + // : "" + // }` + // ) + // .json<{ min: number; max: number }>(), + // }); + + // const { data: updatedViews, isLoading: updatedViewsLoading } = useQuery({ + // queryKey: ["filters", "views", project], + // enabled: !!allViews && !!project, + // initialData: allViews, + // queryFn: () => + // api + // .get( + // `units/filters/views?project=${project}${selectedUnitTypes + // .map((unitType) => `&unitTypes=${unitType}`) + // .join("")}${ + // cost[0] >= 0 && cost[1] >= 0 + // ? `&cost=${Math.floor(cost[0])},${Math.ceil(cost[1])}` + // : "" + // }${ + // floor[0] >= 0 && floor[1] >= 0 + // ? `&floor=${Math.floor(floor[0])},${Math.ceil(floor[1])}` + // : "" + // }${ + // area[0] >= 0 && area[1] >= 0 + // ? `&area=${Math.floor(area[0])},${Math.ceil(area[1])}` + // : "" + // }` + // ) + // .json(), + // }); + const { data: count } = useQuery({ queryKey: [ "units", "count", project, - unitTypes, - searchParams.get("cost"), - searchParams.get("area"), - searchParams.get("floor"), + cost, + area, + floor, view, + selectedUnitTypes, ], - enabled: - !!project && - debouncedCost[0] >= 0 && - debouncedCost[1] >= 0 && - debouncedArea[0] >= 0 && - debouncedArea[1] >= 0 && - debouncedFloor[0] >= 0 && - debouncedFloor[1] >= 0, queryFn: () => api .get( - `units/count?${project ? `project=${project}` : ""}${unitTypes + `units/count?project=${project}${selectedUnitTypes .map((unitType) => `&unitTypes=${unitType}`) .join("")}${view !== "Any view" ? `&view=${view}` : ""}${ - searchParams.has("cost") ? `&cost=${searchParams.get("cost")}` : "" + cost[0] >= 0 && cost[1] >= 0 + ? `&cost=${Math.floor(cost[0])},${Math.ceil(cost[1])}` + : "" }${ - searchParams.has("area") ? `&area=${searchParams.get("area")}` : "" + area[0] >= 0 && area[1] >= 0 + ? `&area=${Math.floor(area[0])},${Math.ceil(area[1])}` + : "" }${ - searchParams.has("floor") - ? `&floor=${searchParams.get("floor")}` + floor[0] >= 0 && floor[1] >= 0 + ? `&floor=${Math.floor(floor[0])},${Math.ceil(floor[1])}` : "" }` ) .json(), }); - useEffect(() => { - const projectValue = searchParams.get("project") || projects[0].title; - if (projectValue) setProject(projectValue); - - const unitTypesValue = searchParams.getAll("unitTypes"); - if (unitTypesValue) setUnitTypes(unitTypesValue); - - const costValue = searchParams.get("cost"); - if (costValue) - setCostInModal(costValue.split(",").map(Number) as [number, number]); - - const floorValue = searchParams.get("floor"); - if (floorValue) - setFloorInModal(floorValue.split(",").map(Number) as [number, number]); - - const areaValue = searchParams.get("area"); - if (areaValue) - setAreaInModal(areaValue.split(",").map(Number) as [number, number]); - - const viewValue = searchParams.get("view"); - if (viewValue) setView(viewValue); - }, [searchParams]); - - useEffect(() => { - if (costInFilters) setCostInModal([costInFilters.min, costInFilters.max]); - }, [costInFilters]); - - useEffect(() => { - if (floorInFilters) - setFloorInModal([floorInFilters.min, floorInFilters.max]); - }, [floorInFilters]); - - useEffect(() => { - if (areaInFilters) setAreaInModal([areaInFilters.min, areaInFilters.max]); - }, [areaInFilters]); - - useEffect(() => { - if (!inModal) setCost(costInModal); - }, [costInModal, inModal]); - - useEffect(() => { - if (!inModal) setFloor(floorInModal); - }, [floorInModal, inModal]); - - useEffect(() => { - if (!inModal) setArea(areaInModal); - }, [areaInModal, inModal]); - - useEffect(() => { - if (debouncedCostTouched) - setSearchParams((prev) => { - prev.set("cost", debouncedCost.map(Math.ceil).join(",")); - return prev; - }); - }, [debouncedCost, debouncedCostTouched]); - - useEffect(() => { - if (debouncedAreaTouched) - setSearchParams((prev) => { - prev.set("area", debouncedArea.map(Math.ceil).join(",")); - return prev; - }); - }, [debouncedArea, debouncedAreaTouched]); - - useEffect(() => { - if (debouncedFloorTouched) - setSearchParams((prev) => { - prev.set("floor", debouncedFloor.map(Math.ceil).join(",")); - return prev; - }); - }, [debouncedFloor, debouncedFloorTouched]); - function handleSelectProject(project: Project | null) { - setProject(project?.title); - setSearchParams((prev) => { - if (project) prev.set("project", project.title); - else prev.delete("project"); - return prev; - }); + setProject(project?.title || projects[0].title); } function handleSelectUnitTypes(unitTypes: string[]) { - setUnitTypes(unitTypes); - setSearchParams((prev) => { - prev.delete("unitTypes"); - unitTypes.forEach((unitType) => prev.append("unitTypes", unitType)); - return prev; - }); + setSelectedUnitTypes(unitTypes); } function handleSelectView(view: string) { setView(view); - setSearchParams((prev) => { - if (view !== "Any view") prev.set("view", view); - else prev.delete("view"); - return prev; - }); } function resetFilters() { - setCostTouched(false); - setFloorTouched(false); - setAreaTouched(false); - if (costInFilters) setCostInModal([costInFilters.min, costInFilters.max]); - if (floorInFilters) - setFloorInModal([floorInFilters.min, floorInFilters.max]); - if (areaInFilters) setAreaInModal([areaInFilters.min, areaInFilters.max]); setView("Any view"); - setUnitTypes([]); - setSearchParams((prev) => { - prev.delete("cost"); - prev.delete("floor"); - prev.delete("area"); - prev.delete("view"); - prev.delete("unitTypes"); - return prev; - }); + setSelectedUnitTypes([]); + setCost([allCost?.min || -1, allCost?.max || -1]); + setFloor([allFloors?.min || -1, allFloors?.max || -1]); + setArea([allArea?.min || -1, allArea?.max || -1]); if (inModal) setInModal(false); } function applyFilters() { setInModal(false); - setSearchParams((prev) => { - prev.set("project", project!); - if (view !== "Any view") prev.set("view", view); - else prev.delete("view"); - prev.delete("unitTypes"); - unitTypes.forEach((unitType) => prev.append("unitTypes", unitType)); - return prev; - }); - setCost(costInModal); - setArea(areaInModal); - setFloor(floorInModal); window.scroll({ top: 0, behavior: "smooth" }); } - useEffect(() => { - resetFilters(); - }, [project]); + useEffect(resetFilters, [project]); return ( <> {inModal && (
setInModal(false)} /> )} @@ -420,7 +289,7 @@ function SearchFilters({ className={clsx( "2xl:p-[2.222vw] md:max-2xl:p-6 p-4 bg-white 2xl:rounded-b-[1.667vw] md:rounded-t-3xl 2xl:space-y-[2.222vw] space-y-8", inModal && - "fixed max-md:pb-0 max-md:pt-6 2xl:top-[calc(2.778vw+4.444vw)] max-md:w-full 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:rounded-[1.667vw] md:max-2xl:rounded-3xl md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-24 max-md:bottom-0 max-md:overflow-auto max-md:!rounded-t-3xl max-md:max-h-[calc(100dvh-40px)]" + "z-5 fixed max-md:pb-0 max-md:pt-6 2xl:top-[calc(2.778vw+7.5vh)] max-md:w-full 2xl:left-[2.222vw] 2xl:right-[2.222vw] 2xl:rounded-[1.667vw] md:max-2xl:rounded-3xl md:max-2xl:left-6 md:max-2xl:right-6 md:max-2xl:top-24 max-md:bottom-0 max-md:overflow-auto max-md:!rounded-t-3xl max-md:max-h-[calc(100dvh-40px)]" )} > {inModal && ( @@ -440,24 +309,20 @@ function SearchFilters({ {inModal ? "Filters" : "Search"}

- - {project && ( - - title === project)! - } - /> - - )} - + + title === project)! + } + /> +
- {unitTypesInFilters && ( + {allUnitTypes && (

Apartment type

 )} @@ -495,69 +360,66 @@ function SearchFilters({ )} > - {costInFilters && ( + {allCost && ( )} - {floorInFilters && ( + {allFloors && ( )} - {areaInFilters && ( + {allArea && ( )} - {viewsInFilters && ( + {allViews && ( @@ -604,7 +466,7 @@ function SearchFilters({ )} > - {count ? ( + {count !== undefined ? ( void; - setTouched?: (value: boolean) => void; } function MultiRangeSlider({ @@ -28,10 +27,10 @@ function MultiRangeSlider({ onChange, offset, label, - setTouched, disabled = false, }: IMultiRangeSlider) { const [current, setCurrent] = useState<"min" | "max" | null>(null); + const rangeRef = useRef(null); function calculateValue(clientX: number, isMin: boolean) { @@ -39,30 +38,32 @@ function MultiRangeSlider({ const rect = rangeRef.current.getBoundingClientRect(); const percentage = (clientX - rect.x) / rect.width; - const value = min + percentage * (max - min); + const newValue = min + percentage * (max - min); return isMin - ? Math.max(Math.min(value, currentMax - offset), min) - : Math.min(Math.max(value, currentMin + offset), max); + ? Math.max(Math.min(newValue, currentMax - offset), min) + : Math.min(Math.max(newValue, currentMin + offset), max); } + const [value, setValue] = useState<[number, number]>([min, max]); + function handleChange( e: MouseEvent | TouchEvent | ReactMouseEvent | ReactTouchEvent ) { if (!current || disabled) return; const { clientX } = "touches" in e ? e.touches[0] : e; - const value = calculateValue(clientX, current === "min"); + const newValue = calculateValue(clientX, current === "min"); - if (value !== undefined) { - if (current === "min") onChange([value, currentMax]); - else onChange([currentMin, value]); + if (newValue !== undefined) { + if (current === "min") setValue([newValue, currentMax]); + else setValue([currentMin, newValue]); } } function handleMouseUp() { setCurrent(null); - setTouched?.(true); + onChange(value); } useEffect(() => { @@ -81,10 +82,10 @@ function MultiRangeSlider({ document.removeEventListener("touchend", handleMouseUp); document.removeEventListener("touchcancel", handleMouseUp); }; - }, [current]); + }, [current, value]); - const getThumbStyle = (value: number) => ({ - left: `${((value - min) / (max - min)) * 100}%`, + const getThumbStyle = (newValue: number) => ({ + left: `${((newValue - min) / (max - min)) * 100}%`, }); return ( @@ -92,10 +93,10 @@ function MultiRangeSlider({

{label}

- {Intl.NumberFormat("en").format(Math.ceil(currentMin))} + {Intl.NumberFormat("en").format(Math.ceil(value[0]))}

- {Intl.NumberFormat("en").format(Math.ceil(currentMax))} + {Intl.NumberFormat("en").format(Math.ceil(value[1]))}

setCurrent(type as "min" | "max")} onTouchStart={() => setCurrent(type as "min" | "max")} - style={getThumbStyle(type === "min" ? currentMin : currentMax)} + style={getThumbStyle(type === "min" ? value[0] : value[1])} className={clsx( "rounded-full 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 absolute bottom-0 -translate-x-1/2", current === type ? "cursor-grabbing" : "cursor-grab", diff --git a/src/layout/LayoutWithoutFooter.tsx b/src/layout/LayoutWithoutFooter.tsx index e46cd96..3ec87d9 100644 --- a/src/layout/LayoutWithoutFooter.tsx +++ b/src/layout/LayoutWithoutFooter.tsx @@ -5,7 +5,7 @@ function LayoutWithoutFooter() { return (
-
+
diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx index 0cfceff..3b86ee0 100644 --- a/src/pages/SearchPage.tsx +++ b/src/pages/SearchPage.tsx @@ -10,7 +10,6 @@ import FiltersIcon from "../components/icons/FiltersIcon"; import RestartIcon from "../components/icons/RestartIcon"; import clsx from "clsx"; import { AnimatePresence, motion } from "motion/react"; -import { useDebounce } from "../hooks/useDebounce"; import Select from "../components/ui/Select"; import Skeleton from "react-loading-skeleton"; import { SORT_OPTIONS } from "../data/sortOptions"; @@ -20,19 +19,18 @@ const STEP = 12; function SearchPage() { const [searchParams] = useSearchParams(); - const project = searchParams.get("project"); - const unitTypes = searchParams.getAll("unitTypes"); - const view = searchParams.get("view"); + // const project = searchParams.get("project"); + const [project] = useState("Rove Home Marasi Drive"); + const [selectedUnitTypes, setSelectedUnitTypes] = useState([]); + // const unitTypes = searchParams.getAll("unitTypes"); + // const view = searchParams.get("view"); const [filtersInModal, setFiltersInModal] = useState(false); const [cost, setCost] = useState<[number, number]>([-1, -1]); const [floor, setFloor] = useState<[number, number]>([-1, -1]); const [area, setArea] = useState<[number, number]>([-1, -1]); - - const debouncedCost = useDebounce(cost, 1000); - const debouncedFloor = useDebounce(floor, 1000); - const debouncedArea = useDebounce(area, 1000); + const [view, setView] = useState("Any view"); const [sort, setSort] = useState( "Sort by ascending price" @@ -44,45 +42,39 @@ function SearchPage() { queryKey: [ "units", project, - unitTypes, + selectedUnitTypes, view, - debouncedCost, - debouncedFloor, - debouncedArea, + cost, + floor, + area, sort, ], enabled: !!project && - debouncedCost[0] >= 0 && - debouncedCost[1] >= 0 && - debouncedFloor[0] >= 0 && - debouncedFloor[1] >= 0 && - debouncedArea[0] >= 0 && - debouncedArea[1] >= 0, + cost[0] >= 0 && + cost[1] >= 0 && + floor[0] >= 0 && + floor[1] >= 0 && + area[0] >= 0 && + area[1] >= 0, queryFn: async ({ pageParam = 0 }) => await api .get( `units?offset=${pageParam}&limit=${STEP}${ project ? `&project=${project}` : "" - }${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join("")}${ - view ? `&view=${view}` : "" - }${ - debouncedCost.length > 0 - ? `&cost=${Math.floor(debouncedCost[0])},${Math.ceil( - debouncedCost[1] - )}` + }${selectedUnitTypes + .map((unitType) => `&unitTypes=${unitType}`) + .join("")}${view !== "Any view" ? `&view=${view}` : ""}${ + cost.length > 0 + ? `&cost=${Math.floor(cost[0])},${Math.ceil(cost[1])}` : "" }${ - debouncedFloor.length > 0 - ? `&floor=${Math.floor(debouncedFloor[0])},${Math.ceil( - debouncedFloor[1] - )}` + floor.length > 0 + ? `&floor=${Math.floor(floor[0])},${Math.ceil(floor[1])}` : "" }${ - debouncedArea.length > 0 - ? `&area=${Math.floor(debouncedArea[0])},${Math.ceil( - debouncedArea[1] - )}` + area.length > 0 + ? `&area=${Math.floor(area[0])},${Math.ceil(area[1])}` : "" }${sort ? `&order=${SORT_OPTIONS[sort].split(" ").join()}` : ""}` ) @@ -157,6 +149,10 @@ function SearchPage() { return ( <> ))}
+ ) : data?.pages[0].length === 0 ? ( +
+

+ No apartments found with the given parameters +

+
) : ( project && - unitTypes && - debouncedCost && - debouncedArea && - debouncedFloor && + selectedUnitTypes && + cost && + area && + floor && sort && (