upd
This commit is contained in:
+331
-177
@@ -17,14 +17,6 @@ import CloseIcon from "./icons/CloseIcon";
|
||||
import Project from "../types/Project";
|
||||
import FiltersIcon from "./icons/FiltersIcon";
|
||||
|
||||
export interface Filters {
|
||||
unitTypes: string[];
|
||||
views: string[];
|
||||
area: [number, number];
|
||||
cost: [number, number];
|
||||
floor: [number, number];
|
||||
}
|
||||
|
||||
function SearchFilters({
|
||||
inModal = false,
|
||||
setInModal,
|
||||
@@ -50,15 +42,172 @@ function SearchFilters({
|
||||
const [unitTypes, setUnitTypes] = useState<string[]>([]);
|
||||
const [view, setView] = useState<string>("Any view");
|
||||
|
||||
const [costInModal, setCostInModal] = useState<[number, number]>(cost);
|
||||
const [areaInModal, setAreaInModal] = useState<[number, number]>(area);
|
||||
const [floorInModal, setFloorInModal] = useState<[number, number]>(floor);
|
||||
|
||||
const debouncedCost = useDebounce(inModal ? costInModal : cost, 1000);
|
||||
const debouncedArea = useDebounce(inModal ? areaInModal : area, 1000);
|
||||
const debouncedFloor = useDebounce(inModal ? floorInModal : floor, 1000);
|
||||
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
|
||||
const { data: filters } = useQuery({
|
||||
queryKey: ["filters", project],
|
||||
const { data: unitTypesInFilters } = useQuery({
|
||||
queryKey: [
|
||||
"filters",
|
||||
"unitTypes",
|
||||
project,
|
||||
// debouncedArea,
|
||||
// debouncedCost,
|
||||
// debouncedFloor,
|
||||
// view,
|
||||
searchParams,
|
||||
],
|
||||
enabled: !!project,
|
||||
queryFn: () =>
|
||||
api
|
||||
.get(`units/filters?${project ? `project=${project}` : ""}`)
|
||||
.json<Filters>(),
|
||||
.get(
|
||||
`units/filters/unitTypes?${project ? `project=${project}` : ""}${
|
||||
view !== "Any view" ? `&view=${view}` : ""
|
||||
}${
|
||||
debouncedCost[0] >= 0 && debouncedCost[1] >= 0
|
||||
? `&cost=${debouncedCost.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedFloor[0] >= 0 && debouncedFloor[1] >= 0
|
||||
? `&floor=${debouncedFloor.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedArea[0] >= 0 && debouncedArea[1] >= 0
|
||||
? `&area=${debouncedArea.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}`
|
||||
)
|
||||
.json<string[]>(),
|
||||
});
|
||||
|
||||
const { data: viewsInFilters } = useQuery({
|
||||
queryKey: [
|
||||
"filters",
|
||||
"views",
|
||||
project,
|
||||
debouncedArea,
|
||||
debouncedCost,
|
||||
debouncedFloor,
|
||||
unitTypes,
|
||||
searchParams,
|
||||
],
|
||||
enabled: !!project,
|
||||
queryFn: () =>
|
||||
api
|
||||
.get(
|
||||
`units/filters/views?${project ? `project=${project}` : ""}${unitTypes
|
||||
.map((unitType) => `&unitTypes=${unitType}`)
|
||||
.join("")}${
|
||||
debouncedCost[0] >= 0 && debouncedCost[1] >= 0
|
||||
? `&cost=${debouncedCost.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedFloor[0] >= 0 && debouncedFloor[1] >= 0
|
||||
? `&floor=${debouncedFloor.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedArea[0] >= 0 && debouncedArea[1] >= 0
|
||||
? `&area=${debouncedArea.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}`
|
||||
)
|
||||
.json<string[]>(),
|
||||
});
|
||||
|
||||
const { data: costInFilters } = useQuery({
|
||||
queryKey: [
|
||||
"filters",
|
||||
"cost",
|
||||
project,
|
||||
// debouncedArea,
|
||||
// debouncedFloor,
|
||||
// unitTypes,
|
||||
// view,
|
||||
searchParams,
|
||||
],
|
||||
enabled: !!project,
|
||||
queryFn: () =>
|
||||
api
|
||||
.get(
|
||||
`units/filters/cost?${project ? `project=${project}` : ""}${unitTypes
|
||||
.map((unitType) => `&unitTypes=${unitType}`)
|
||||
.join("")}${view !== "Any view" ? `&view=${view}` : ""}${
|
||||
debouncedFloor[0] >= 0 && debouncedFloor[1] >= 0
|
||||
? `&floor=${debouncedFloor.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedArea[0] >= 0 && debouncedArea[1] >= 0
|
||||
? `&area=${debouncedArea.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}`
|
||||
)
|
||||
.json<{ min: number; max: number }>(),
|
||||
});
|
||||
|
||||
const { data: floorInFilters } = useQuery({
|
||||
queryKey: [
|
||||
"filters",
|
||||
"floor",
|
||||
project,
|
||||
// debouncedArea,
|
||||
// debouncedCost,
|
||||
// unitTypes,
|
||||
// view,
|
||||
searchParams,
|
||||
],
|
||||
enabled: !!project,
|
||||
queryFn: () =>
|
||||
api
|
||||
.get(
|
||||
`units/filters/floor?${project ? `project=${project}` : ""}${unitTypes
|
||||
.map((unitType) => `&unitTypes=${unitType}`)
|
||||
.join("")}${view !== "Any view" ? `&view=${view}` : ""}${
|
||||
debouncedCost[0] >= 0 && debouncedCost[1] >= 0
|
||||
? `&cost=${debouncedCost.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedArea[0] >= 0 && debouncedArea[1] >= 0
|
||||
? `&area=${debouncedArea.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}`
|
||||
)
|
||||
.json<{ min: number; max: number }>(),
|
||||
});
|
||||
|
||||
const { data: areaInFilters } = useQuery({
|
||||
queryKey: [
|
||||
"filters",
|
||||
"area",
|
||||
project,
|
||||
// debouncedCost,
|
||||
// debouncedFloor,
|
||||
// unitTypes,
|
||||
// view,
|
||||
searchParams,
|
||||
],
|
||||
enabled: !!project,
|
||||
queryFn: () =>
|
||||
api
|
||||
.get(
|
||||
`units/filters/area?${project ? `project=${project}` : ""}${unitTypes
|
||||
.map((unitType) => `&unitTypes=${unitType}`)
|
||||
.join("")}${view !== "Any view" ? `&view=${view}` : ""}${
|
||||
debouncedCost[0] >= 0 && debouncedCost[1] >= 0
|
||||
? `&cost=${debouncedCost.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedFloor[0] >= 0 && debouncedFloor[1] >= 0
|
||||
? `&floor=${debouncedFloor.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}`
|
||||
)
|
||||
.json<{ min: number; max: number }>(),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
@@ -76,17 +225,20 @@ function SearchFilters({
|
||||
window.location.href = "/search";
|
||||
}
|
||||
|
||||
const [costInModal, setCostInModal] = useState<[number, number]>(cost);
|
||||
const [areaInModal, setAreaInModal] = useState<[number, number]>(area);
|
||||
const [floorInModal, setFloorInModal] = useState<[number, number]>(floor);
|
||||
|
||||
useEffect(() => {
|
||||
if (filters) {
|
||||
setCostInModal(filters.cost);
|
||||
setAreaInModal(filters.area);
|
||||
setFloorInModal(filters.floor);
|
||||
if (costInFilters && areaInFilters && floorInFilters) {
|
||||
setCostInModal([costInFilters.min, costInFilters.max]);
|
||||
setAreaInModal([areaInFilters.min, areaInFilters.max]);
|
||||
setFloorInModal([floorInFilters.min, floorInFilters.max]);
|
||||
}
|
||||
}, [filters, setAreaInModal, setCostInModal, setFloorInModal]);
|
||||
}, [
|
||||
costInFilters,
|
||||
areaInFilters,
|
||||
floorInFilters,
|
||||
setAreaInModal,
|
||||
setCostInModal,
|
||||
setFloorInModal,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (inModal) return;
|
||||
@@ -95,10 +247,6 @@ function SearchFilters({
|
||||
setFloor(floorInModal);
|
||||
}, [setCost, costInModal, setArea, areaInModal, setFloor, floorInModal]);
|
||||
|
||||
const debouncedCost = useDebounce(inModal ? costInModal : cost, 500);
|
||||
const debouncedArea = useDebounce(inModal ? areaInModal : area, 500);
|
||||
const debouncedFloor = useDebounce(inModal ? floorInModal : floor, 500);
|
||||
|
||||
const { data: count } = useQuery({
|
||||
queryKey: [
|
||||
"units",
|
||||
@@ -203,6 +351,8 @@ function SearchFilters({
|
||||
window.scroll({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
|
||||
useEffect(() => {}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{inModal && (
|
||||
@@ -230,164 +380,168 @@ function SearchFilters({
|
||||
</div>
|
||||
</Button>
|
||||
)}
|
||||
<div className="2xl:space-y-[2.222vw] space-y-8">
|
||||
<div className="2xl:space-y-[1.111vw] space-y-4">
|
||||
<p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-semibold leading-[135%]">
|
||||
{inModal ? "Filters" : "Search"}
|
||||
</p>
|
||||
<div className={clsx(!inModal && "max-md:hidden")}>
|
||||
{project && (
|
||||
<ProjectSelect
|
||||
projects={projects}
|
||||
onSelect={handleSelectProject}
|
||||
defaultProject={
|
||||
projects.find(({ title }) => title === project)!
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<hr
|
||||
className={clsx(
|
||||
"2xl:h-[0.069vw] h-px border-[#E2E2DC]",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{filters && (
|
||||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
"2xl:space-y-[0.556vw] space-y-2",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
>
|
||||
<p className="text-s text-[#0D1922]/70">Apartment type</p>
|
||||
<UnitTypesSelect
|
||||
unitTypes={filters.unitTypes}
|
||||
onSelect={handleSelectUnitTypes}
|
||||
defaultSelected={unitTypes}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"grid 2xl:grid-cols-4 md:max-2xl:grid-cols-2 md:max-2xl:grid-rows-2 2xl:gap-[1.111vw] gap-6",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
>
|
||||
<MultiRangeSlider
|
||||
min={filters?.cost[0]}
|
||||
max={filters?.cost[1]}
|
||||
currentMin={inModal ? costInModal[0] : cost[0]}
|
||||
currentMax={inModal ? costInModal[1] : cost[1]}
|
||||
offset={1}
|
||||
onChange={setCostInModal}
|
||||
label="Cost, AED"
|
||||
/>
|
||||
<MultiRangeSlider
|
||||
min={filters?.floor[0]}
|
||||
max={filters?.floor[1]}
|
||||
currentMin={inModal ? floorInModal[0] : floor[0]}
|
||||
currentMax={inModal ? floorInModal[1] : floor[1]}
|
||||
offset={1}
|
||||
onChange={setFloorInModal}
|
||||
label="Floor"
|
||||
/>
|
||||
<MultiRangeSlider
|
||||
min={filters?.area[0]}
|
||||
max={filters?.area[1]}
|
||||
currentMin={inModal ? areaInModal[0] : area[0]}
|
||||
currentMax={inModal ? areaInModal[1] : area[1]}
|
||||
offset={1}
|
||||
onChange={setAreaInModal}
|
||||
label="Total Area, Sqft"
|
||||
/>
|
||||
<Select
|
||||
defaultOption={view}
|
||||
label="View"
|
||||
options={["Any view", ...filters.views]}
|
||||
onSelect={handleSelectView}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4 gap-2",
|
||||
inModal &&
|
||||
"max-md:flex-col max-md:sticky max-md:shadow-[0px_-4px_20px_rgba(0,0,0,0.05)] max-md:rounded-t-2xl max-md:-m-4 max-md:p-4 bottom-0 bg-white"
|
||||
)}
|
||||
>
|
||||
{inModal ? (
|
||||
<Button onClick={applyFilters} className="max-md:w-full">
|
||||
Show{" "}
|
||||
<AnimatePresence mode="wait">
|
||||
{count !== undefined && (
|
||||
<motion.span
|
||||
key={count}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
{count}
|
||||
</motion.span>
|
||||
{costInFilters &&
|
||||
areaInFilters &&
|
||||
floorInFilters &&
|
||||
viewsInFilters &&
|
||||
unitTypesInFilters && (
|
||||
<>
|
||||
<div className="2xl:space-y-[2.222vw] space-y-8">
|
||||
<div className="2xl:space-y-[1.111vw] space-y-4">
|
||||
<p className="2xl:text-[2.222vw] md:max-2xl:text-[32px] text-2xl font-medium leading-[135%]">
|
||||
{inModal ? "Filters" : "Search"}
|
||||
</p>
|
||||
<div className={clsx(!inModal && "max-md:hidden")}>
|
||||
{project && (
|
||||
<ProjectSelect
|
||||
projects={projects}
|
||||
onSelect={handleSelectProject}
|
||||
defaultProject={
|
||||
projects.find(({ title }) => title === project)!
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>{" "}
|
||||
apartments
|
||||
</Button>
|
||||
) : (
|
||||
<AnimatePresence mode="wait">
|
||||
{count && (
|
||||
<motion.p
|
||||
key={count}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className={clsx(
|
||||
"text-[#00BED7] text-s",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
>
|
||||
{count} Apartments found
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
<Button
|
||||
variant="secondary"
|
||||
className={clsx(
|
||||
"hidden",
|
||||
!inModal && "max-md:flex !justify-center flex-1 !bg-[#F3F3F2]"
|
||||
)}
|
||||
onClick={() => setInModal(true)}
|
||||
>
|
||||
<div className="w-5 h-5">
|
||||
<FiltersIcon />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm leading-0">Filters</p>
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onlyIcon={!inModal && innerWidth < 768}
|
||||
onClick={resetFilters}
|
||||
className={clsx(
|
||||
!inModal && "max-md:bg-[#F3F3F2]",
|
||||
"max-md:!transition-none"
|
||||
)}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
|
||||
<RestartIcon />
|
||||
</span>
|
||||
<p
|
||||
<hr
|
||||
className={clsx(
|
||||
"text-s max-md:w-full",
|
||||
"2xl:h-[0.069vw] h-px border-[#E2E2DC]",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div
|
||||
className={clsx(
|
||||
"2xl:space-y-[0.556vw] space-y-2",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
>
|
||||
Reset filters
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<p className="text-s text-[#0D1922]/70">Apartment type</p>
|
||||
<UnitTypesSelect
|
||||
unitTypes={unitTypesInFilters}
|
||||
onSelect={handleSelectUnitTypes}
|
||||
defaultSelected={unitTypes}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"grid 2xl:grid-cols-4 md:max-2xl:grid-cols-2 md:max-2xl:grid-rows-2 2xl:gap-[1.111vw] gap-6",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
>
|
||||
<MultiRangeSlider
|
||||
{...costInFilters}
|
||||
currentMin={inModal ? costInModal[0] : cost[0]}
|
||||
currentMax={inModal ? costInModal[1] : cost[1]}
|
||||
offset={1}
|
||||
onChange={setCostInModal}
|
||||
label="Cost, AED"
|
||||
/>
|
||||
<MultiRangeSlider
|
||||
{...floorInFilters}
|
||||
currentMin={inModal ? floorInModal[0] : floor[0]}
|
||||
currentMax={inModal ? floorInModal[1] : floor[1]}
|
||||
offset={1}
|
||||
onChange={setFloorInModal}
|
||||
label="Floor"
|
||||
/>
|
||||
<MultiRangeSlider
|
||||
{...areaInFilters}
|
||||
currentMin={inModal ? areaInModal[0] : area[0]}
|
||||
currentMax={inModal ? areaInModal[1] : area[1]}
|
||||
offset={1}
|
||||
onChange={setAreaInModal}
|
||||
label="Total Area, Sqft"
|
||||
/>
|
||||
<Select
|
||||
defaultOption={view}
|
||||
label="View"
|
||||
options={["Any view", ...viewsInFilters]}
|
||||
onSelect={handleSelectView}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex items-center 2xl:gap-[1.111vw] md:max-2xl:gap-4 gap-2",
|
||||
inModal &&
|
||||
"max-md:flex-col max-md:sticky max-md:shadow-[0px_-4px_20px_rgba(0,0,0,0.05)] max-md:rounded-t-2xl max-md:-m-4 max-md:p-4 bottom-0 bg-white"
|
||||
)}
|
||||
>
|
||||
{inModal ? (
|
||||
<Button onClick={applyFilters} className="max-md:w-full">
|
||||
Show{" "}
|
||||
<AnimatePresence mode="wait">
|
||||
{count !== undefined && (
|
||||
<motion.span
|
||||
key={count}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
{count}
|
||||
</motion.span>
|
||||
)}
|
||||
</AnimatePresence>{" "}
|
||||
apartments
|
||||
</Button>
|
||||
) : (
|
||||
<AnimatePresence mode="wait">
|
||||
{count && (
|
||||
<motion.p
|
||||
key={count}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className={clsx(
|
||||
"text-[#00BED7] text-s",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
>
|
||||
{count} Apartments found
|
||||
</motion.p>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)}
|
||||
<Button
|
||||
variant="secondary"
|
||||
className={clsx(
|
||||
"hidden",
|
||||
!inModal &&
|
||||
"max-md:flex !justify-center flex-1 !bg-[#F3F3F2]"
|
||||
)}
|
||||
onClick={() => setInModal(true)}
|
||||
>
|
||||
<div className="w-5 h-5">
|
||||
<FiltersIcon />
|
||||
</div>
|
||||
<p className="text-sm leading-0">Filters</p>
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onlyIcon={!inModal && innerWidth < 768}
|
||||
onClick={resetFilters}
|
||||
className={clsx(
|
||||
!inModal && "max-md:bg-[#F3F3F2]",
|
||||
"max-md:!transition-none"
|
||||
)}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5 text-[#0D1922]/70">
|
||||
<RestartIcon />
|
||||
</span>
|
||||
<p
|
||||
className={clsx(
|
||||
"text-s max-md:w-full",
|
||||
!inModal && "max-md:hidden"
|
||||
)}
|
||||
>
|
||||
Reset filters
|
||||
</p>
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -45,7 +45,7 @@ export default function SelectedComplexCard({ marker }: { marker: IMarker }) {
|
||||
</div>
|
||||
<div className="flex flex-col justify-between border-b border-[#E2E2DC] flex-1">
|
||||
<div className="flex justify-between gap-4">
|
||||
<p className="font-semibold leading-[115%]">
|
||||
<p className="font-medium leading-[115%]">
|
||||
Rove Home
|
||||
<br />
|
||||
{marker.title}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default function DisclaimerModal() {
|
||||
return (
|
||||
<div className="bg-white z-40 2xl:rounded-[0.556vw] rounded-lg py-[37px] px-8 2xl:w-[29.236vw] md:max-2xl:w-[54.818vw] w-full">
|
||||
<h2 className="text-subheadline-m font-semibold py-6 2xl:border-t-[0.139vw] border-t-2 border-[#00BED7] w-fit">
|
||||
<h2 className="text-subheadline-m font-medium py-6 2xl:border-t-[0.139vw] border-t-2 border-[#00BED7] w-fit">
|
||||
Disclaimer
|
||||
</h2>
|
||||
<div className="flex flex-col gap-4">
|
||||
|
||||
@@ -2,7 +2,7 @@ function PrivacyPolicyModal() {
|
||||
return (
|
||||
<div className="2xl:rounded-[1.111vw] bg-white rounded-2xl 2xl:p-[2.222vw] 2xl:w-[38.889vw] p-8">
|
||||
<div className="bg-[#00BED7] 2xl:h-[0.139vw] h-0.5 2xl:w-[8.646vw] 2xl:rounded-[0.208vw] rounded-[3px]" />
|
||||
<h2 className="text-subheadline-m font-semibold py-6">
|
||||
<h2 className="text-subheadline-m font-medium py-6">
|
||||
Privacy Policy for IRTH Group and its companies:
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
|
||||
Reference in New Issue
Block a user