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">
|
||||
|
||||
+85
-85
@@ -1,23 +1,23 @@
|
||||
import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { api } from '../api/ky';
|
||||
import { IUnit } from '../types/IUnit';
|
||||
import UnitCard from '../components/UnitCard';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import SearchFilters, { Filters } from '../components/SearchFilters';
|
||||
import { useSearchParams } from 'react-router';
|
||||
import Button from '../components/ui/Button';
|
||||
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 { useInfiniteQuery } from "@tanstack/react-query";
|
||||
import { api } from "../api/ky";
|
||||
import { IUnit } from "../types/IUnit";
|
||||
import UnitCard from "../components/UnitCard";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import SearchFilters from "../components/SearchFilters";
|
||||
import { useSearchParams } from "react-router";
|
||||
import Button from "../components/ui/Button";
|
||||
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";
|
||||
|
||||
const SORT_OPTIONS = {
|
||||
'Sort by ascending price': 'cost asc',
|
||||
'Sort by descending price': 'cost desc',
|
||||
'Sort by ascending area': 'sqft asc',
|
||||
'Sort by descending area': 'sqft desc',
|
||||
"Sort by ascending price": "cost asc",
|
||||
"Sort by descending price": "cost desc",
|
||||
"Sort by ascending area": "sqft asc",
|
||||
"Sort by descending area": "sqft desc",
|
||||
};
|
||||
|
||||
const STEP = 12;
|
||||
@@ -25,9 +25,9 @@ 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 unitTypes = searchParams.getAll("unitTypes");
|
||||
const view = searchParams.get("view");
|
||||
|
||||
const [filtersInModal, setFiltersInModal] = useState(false);
|
||||
|
||||
@@ -35,19 +35,19 @@ function SearchPage() {
|
||||
const [floor, setFloor] = useState<[number, number]>([-1, -1]);
|
||||
const [area, setArea] = useState<[number, number]>([-1, -1]);
|
||||
|
||||
const debouncedCost = useDebounce(cost, 500);
|
||||
const debouncedFloor = useDebounce(floor, 500);
|
||||
const debouncedArea = useDebounce(area, 500);
|
||||
const debouncedCost = useDebounce(cost, 1000);
|
||||
const debouncedFloor = useDebounce(floor, 1000);
|
||||
const debouncedArea = useDebounce(area, 1000);
|
||||
|
||||
const [sort, setSort] = useState<keyof typeof SORT_OPTIONS>(
|
||||
'Sort by ascending price'
|
||||
"Sort by ascending price"
|
||||
);
|
||||
|
||||
const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
|
||||
useInfiniteQuery({
|
||||
initialPageParam: 0,
|
||||
queryKey: [
|
||||
'units',
|
||||
"units",
|
||||
project,
|
||||
unitTypes,
|
||||
view,
|
||||
@@ -68,22 +68,22 @@ function SearchPage() {
|
||||
await api
|
||||
.get(
|
||||
`units?offset=${pageParam}&limit=${STEP}${
|
||||
project ? `&project=${project}` : ''
|
||||
}${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join('')}${
|
||||
view ? `&view=${view}` : ''
|
||||
project ? `&project=${project}` : ""
|
||||
}${unitTypes.map((unitType) => `&unitTypes=${unitType}`).join("")}${
|
||||
view ? `&view=${view}` : ""
|
||||
}${
|
||||
debouncedCost.length > 0
|
||||
? `&cost=${debouncedCost.map(Math.round).join(',')}`
|
||||
: ''
|
||||
? `&cost=${debouncedCost.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedFloor.length > 0
|
||||
? `&floor=${debouncedFloor.map(Math.round).join(',')}`
|
||||
: ''
|
||||
? `&floor=${debouncedFloor.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${
|
||||
debouncedArea.length > 0
|
||||
? `&area=${debouncedArea.map(Math.round).join(',')}`
|
||||
: ''
|
||||
}${sort ? `&order=${SORT_OPTIONS[sort].split(' ').join(',')}` : ''}`
|
||||
? `&area=${debouncedArea.map(Math.round).join(",")}`
|
||||
: ""
|
||||
}${sort ? `&order=${SORT_OPTIONS[sort].split(" ").join(",")}` : ""}`
|
||||
)
|
||||
.json<IUnit[]>(),
|
||||
getNextPageParam: (lastPage, _, lastPageIndex) =>
|
||||
@@ -100,7 +100,7 @@ function SearchPage() {
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting) fetchNextPage();
|
||||
},
|
||||
{ rootMargin: '-200px' }
|
||||
{ rootMargin: "-200px" }
|
||||
);
|
||||
if (observerElement) observer.observe(observerElement);
|
||||
|
||||
@@ -126,7 +126,7 @@ function SearchPage() {
|
||||
const [footerReached, setFooterReached] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const footer = document.querySelector('footer');
|
||||
const footer = document.querySelector("footer");
|
||||
const observer = new IntersectionObserver((entries) =>
|
||||
setFooterReached(entries[0].isIntersecting)
|
||||
);
|
||||
@@ -137,36 +137,36 @@ function SearchPage() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const [activeFiltersCount, setActiveFiltersCount] = useState(0);
|
||||
// const [activeFiltersCount, setActiveFiltersCount] = useState(0);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
// const queryClient = useQueryClient();
|
||||
|
||||
useEffect(() => {
|
||||
const filters = queryClient.getQueryData<Filters>(['filters', project]);
|
||||
if (filters) {
|
||||
setActiveFiltersCount(
|
||||
+!!view +
|
||||
+!!unitTypes.length +
|
||||
+(debouncedCost[0] !== filters.cost[0]) +
|
||||
+(debouncedCost[1] !== filters.cost[1]) +
|
||||
+(debouncedArea[0] !== filters.area[0]) +
|
||||
+(debouncedArea[1] !== filters.area[1]) +
|
||||
+(debouncedFloor[0] !== filters.floor[0]) +
|
||||
+(debouncedFloor[1] !== filters.floor[1])
|
||||
);
|
||||
}
|
||||
}, [
|
||||
queryClient,
|
||||
unitTypes,
|
||||
view,
|
||||
project,
|
||||
debouncedCost,
|
||||
cost,
|
||||
debouncedArea,
|
||||
area,
|
||||
debouncedFloor,
|
||||
floor,
|
||||
]);
|
||||
// useEffect(() => {
|
||||
// const filters = queryClient.getQueryData<Filters>(["filters", project]);
|
||||
// if (filters) {
|
||||
// setActiveFiltersCount(
|
||||
// +!!view +
|
||||
// +!!unitTypes.length +
|
||||
// +(debouncedCost[0] !== filters.minCost) +
|
||||
// +(debouncedCost[1] !== filters.maxCost) +
|
||||
// +(debouncedArea[0] !== filters.minArea) +
|
||||
// +(debouncedArea[1] !== filters.maxArea) +
|
||||
// +(debouncedFloor[0] !== filters.minFloor) +
|
||||
// +(debouncedFloor[1] !== filters.maxFloor)
|
||||
// );
|
||||
// }
|
||||
// }, [
|
||||
// queryClient,
|
||||
// unitTypes,
|
||||
// view,
|
||||
// project,
|
||||
// debouncedCost,
|
||||
// cost,
|
||||
// debouncedArea,
|
||||
// area,
|
||||
// debouncedFloor,
|
||||
// floor,
|
||||
// ]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -176,15 +176,15 @@ function SearchPage() {
|
||||
setInModal={setFiltersInModal}
|
||||
{...{ area, cost, floor, setArea, setCost, setFloor }}
|
||||
/>
|
||||
<div className='2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4'>
|
||||
<div className="2xl:p-[2.222vw] p-4 min-h-dvh 2xl:space-y-[1.111vw] space-y-4">
|
||||
<Select
|
||||
options={Object.keys(SORT_OPTIONS)}
|
||||
defaultOption={sort}
|
||||
onSelect={(opt) => setSort(opt as keyof typeof SORT_OPTIONS)}
|
||||
className='2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]'
|
||||
className="2xl:max-w-[22.778vw] md:max-2xl:max-w-[45.833vw]"
|
||||
/>
|
||||
<hr className='2xl:h-[0.069vw] border-[#E2E2DC]' />
|
||||
<AnimatePresence mode='wait'>
|
||||
<hr className="2xl:h-[0.069vw] border-[#E2E2DC]" />
|
||||
<AnimatePresence mode="wait">
|
||||
{project &&
|
||||
unitTypes &&
|
||||
debouncedCost &&
|
||||
@@ -204,7 +204,7 @@ function SearchPage() {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className='2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4'
|
||||
className="2xl:grid-cols-4 md:max-2xl:grid-cols-2 grid 2xl:gap-[1.111vw] gap-4"
|
||||
>
|
||||
{data?.pages.map((page) =>
|
||||
page.map((unit) => <UnitCard key={unit.id} unit={unit} />)
|
||||
@@ -216,34 +216,34 @@ function SearchPage() {
|
||||
{showButtons && (
|
||||
<div
|
||||
className={clsx(
|
||||
'fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all',
|
||||
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all",
|
||||
footerReached && !hasNextPage
|
||||
? 'top-[calc(100dvh-17.222vw)] translate-y-0'
|
||||
: 'top-[calc(100dvh-2.222vw)] -translate-y-full'
|
||||
? "top-[calc(100dvh-17.222vw)] translate-y-0"
|
||||
: "top-[calc(100dvh-2.222vw)] -translate-y-full"
|
||||
)}
|
||||
>
|
||||
<Button onClick={() => setFiltersInModal(true)} className='relative'>
|
||||
<span className='2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white'>
|
||||
<Button onClick={() => setFiltersInModal(true)} className="relative">
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-white">
|
||||
<FiltersIcon />
|
||||
</span>
|
||||
<span className='text-caption-m'>Filters</span>
|
||||
{!!activeFiltersCount && (
|
||||
<div className='absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]'>
|
||||
<span className="text-caption-m">Filters</span>
|
||||
{/* {!!activeFiltersCount && (
|
||||
<div className="absolute 2xl:top-[0.139vw] 2xl:right-[0.139vw] top-0.5 right-0.5 rounded-full w-4 text-caption-s aspect-square bg-white text-[#00BED7]">
|
||||
{activeFiltersCount}
|
||||
</div>
|
||||
)}
|
||||
)} */}
|
||||
</Button>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]'
|
||||
variant="secondary"
|
||||
className="2xl:!outline-[0.069vw] !outline !outline-[#E2E2DC]"
|
||||
onClick={() => {
|
||||
window.location.href = '/search';
|
||||
window.location.href = "/search";
|
||||
}}
|
||||
>
|
||||
<span className='2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70'>
|
||||
<span className="2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4 text-[#0D1922]/70">
|
||||
<RestartIcon />
|
||||
</span>
|
||||
<span className='text-caption-m'>Reset</span>
|
||||
<span className="text-caption-m">Reset</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user