Update unit type display logic across multiple components to fallback on unitType if formatted type is unavailable; enhance search filters to ensure proper initialization and reset behavior; add new brochures to project data for improved resource availability.
This commit is contained in:
@@ -86,7 +86,7 @@ function FloorPopup({ title, complexName, data, onSelect }: FloorPopupProps) {
|
||||
{count}
|
||||
</p>
|
||||
<p className="text-caption-m opacity-70">
|
||||
{formattedUnitTypes.get(unitType)}
|
||||
{formattedUnitTypes.get(unitType) || unitType}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
|
||||
@@ -91,11 +91,18 @@ function SearchFilters({
|
||||
.json<number>(),
|
||||
enabled:
|
||||
!!project &&
|
||||
!!allUnitTypes &&
|
||||
!!allCost.min &&
|
||||
!!allFloors.min &&
|
||||
!!allArea.min &&
|
||||
!!allViews.length,
|
||||
allUnitTypes !== undefined &&
|
||||
allCost !== undefined &&
|
||||
allFloors !== undefined &&
|
||||
allArea !== undefined &&
|
||||
allViews !== undefined &&
|
||||
// Wait until filters are initialized to prevent duplicate requests
|
||||
cost[0] >= 0 &&
|
||||
cost[1] >= 0 &&
|
||||
floor[0] >= 0 &&
|
||||
floor[1] >= 0 &&
|
||||
area[0] >= 0 &&
|
||||
area[1] >= 0,
|
||||
});
|
||||
|
||||
function handleSelectProject(project: Project | null) {
|
||||
@@ -125,9 +132,10 @@ function SearchFilters({
|
||||
function resetFilters() {
|
||||
setView("Any view");
|
||||
setSelectedUnitTypes([]);
|
||||
setCost([allCost?.min || -1, allCost?.max || -1]);
|
||||
setFloor([allFloors?.min || -1, allFloors?.max || -1]);
|
||||
setArea([allArea?.min || -1, allArea?.max || -1]);
|
||||
// Use actual min/max values if available, otherwise use 0 to keep query enabled
|
||||
if (allCost) setCost([allCost.min, allCost.max]);
|
||||
if (allFloors) setFloor([allFloors.min, allFloors.max]);
|
||||
if (allArea) setArea([allArea.min, allArea.max]);
|
||||
if (inModal) setInModal(false);
|
||||
}
|
||||
|
||||
|
||||
@@ -75,7 +75,7 @@ function SelectedComplexCard({
|
||||
4
|
||||
</div>
|
||||
<p className="text-caption-m opacity-70">
|
||||
{formattedUnitTypes.get(unitType)}
|
||||
{formattedUnitTypes.get(unitType) || unitType}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -84,7 +84,7 @@ function UnitCard({ unit }: { unit: Unit }) {
|
||||
<p className="text-s">
|
||||
{`${formattedUnitTypes.get(
|
||||
unit.unitType
|
||||
)}, ${unit.squareFt.toLocaleString(undefined, {
|
||||
) || unit.unitType}, ${unit.squareFt.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 2,
|
||||
})} Sqft`}
|
||||
</p>
|
||||
|
||||
@@ -31,7 +31,7 @@ function UnitPopup({
|
||||
<div className="2xl:space-y-[0.833vw] space-y-3">
|
||||
<div className="2xl:space-y-[0.556vw] space-y-2">
|
||||
<p className="text-h5 font-medium">
|
||||
{formattedUnitTypes.get(unitType)}
|
||||
{formattedUnitTypes.get(unitType) || unitType}
|
||||
</p>
|
||||
<div className="flex items-center 2xl:gap-[0.556vw] gap-2">
|
||||
{wing && (
|
||||
|
||||
@@ -38,7 +38,7 @@ function UnitTypesSelect({
|
||||
: "ring-[#E2E2DC] text-[#0D1922]/70"
|
||||
)}
|
||||
>
|
||||
{formattedUnitTypes.get(unitType)}
|
||||
{formattedUnitTypes.get(unitType) || unitType}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@ export default function BrochureButton({
|
||||
onClick={handleDownload}
|
||||
>
|
||||
<span className="duration-300 text-nowrap text-btn-m">{title}</span>
|
||||
<span className="2xl:size-[1.389vw] size-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<span className="2xl:size-[1.389vw] size-5 opacity-70 group-hover:opacity-100 transition-opacity duration-300 flex-shrink-0">
|
||||
<DownloadIcon />
|
||||
</span>
|
||||
</Button>
|
||||
|
||||
+38
-11
@@ -24,6 +24,14 @@ export const projectBrochures: ProjectBrochures[] = [
|
||||
title: "Technical Brochure",
|
||||
link: "/files/brochures/marasi-drive/Technical Brochure.pdf",
|
||||
},
|
||||
{
|
||||
title: "Factsheet",
|
||||
link: "/files/brochures/marasi-drive/Factsheet.pdf",
|
||||
},
|
||||
{
|
||||
title: "Reasons to buy",
|
||||
link: "/files/brochures/marasi-drive/Reasons to buy.pdf",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -38,8 +46,24 @@ export const projectBrochures: ProjectBrochures[] = [
|
||||
link: "/files/brochures/downtown/Amenities Brochure.pdf",
|
||||
},
|
||||
{
|
||||
title: "Technical Brochure",
|
||||
link: "/files/brochures/downtown/Technical Brochure.pdf",
|
||||
title: "Factsheet",
|
||||
link: "/files/brochures/downtown/Factsheet.pdf",
|
||||
},
|
||||
{
|
||||
title: "Reasons to buy",
|
||||
link: "/files/brochures/downtown/Reasons to buy.pdf",
|
||||
},
|
||||
{
|
||||
title: "Typical Floor plan 14-19",
|
||||
link: "/files/brochures/downtown/Typical Floor plan 14-19.pdf",
|
||||
},
|
||||
{
|
||||
title: "Typical Floor plan 2-13",
|
||||
link: "/files/brochures/downtown/Typical Floor plan 2-13.pdf",
|
||||
},
|
||||
{
|
||||
title: "Unit Plan",
|
||||
link: "/files/brochures/downtown/Unit Plan.pdf",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -58,18 +82,21 @@ export const projectBrochures: ProjectBrochures[] = [
|
||||
title: "Technical Brochure",
|
||||
link: "/files/brochures/dubai-marina/Technical Brochure.pdf",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
projectTitle: "Rove Home HQ",
|
||||
brochures: [
|
||||
{
|
||||
title: "Main Brochure",
|
||||
link: "/files/brochures/hq/Main Brochure.pdf",
|
||||
title: "Factsheet",
|
||||
link: "/files/brochures/dubai-marina/Factsheet.pdf",
|
||||
},
|
||||
{
|
||||
title: "Technical Brochure",
|
||||
link: "/files/brochures/hq/Technical Brochure.pdf",
|
||||
title: "RHDM Arabic",
|
||||
link: "/files/brochures/dubai-marina/RHDM Arabic.pdf",
|
||||
},
|
||||
{
|
||||
title: "RHDM Russian",
|
||||
link: "/files/brochures/dubai-marina/RHDM Russian.pdf",
|
||||
},
|
||||
{
|
||||
title: "RHDM Turkish",
|
||||
link: "/files/brochures/dubai-marina/RHDM Turkish.pdf",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
export const formattedUnitTypes = new Map([
|
||||
["1 Bedroom Combined Type C", "1 Bedroom Combined Type C"],
|
||||
["1 Bedroom Combined Type D", "1 Bedroom Combined Type D"],
|
||||
["1 BR Squared", "1 Bedroom²"],
|
||||
["One Bedroom Square", "1 Bedroom²"],
|
||||
["2 BR Squared", "2 Bedroom²"],
|
||||
["2 Bedroom Combined", "2 Bedroom Combined"],
|
||||
["One Bedroom Loft", "1 Bedroom Loft"],
|
||||
["Two Bedroom Loft", "2 Bedroom Loft"],
|
||||
["Studio Flex", "Studio Flex"],
|
||||
["Studio Square", "Studio²"],
|
||||
["Studio Squared", "Studio²"],
|
||||
]);
|
||||
|
||||
@@ -230,7 +230,7 @@ function FavoritesPage() {
|
||||
<div className="2xl:p-[1.111vw] 2xl:pt-[0.556vw] md:max-2xl:p-4 md:max-2xl:pt-2 p-3 flex flex-col 2xl:gap-[0.556vw] gap-2 2xl:rounded-[1.111vw] rounded-2xl bg-[#F3F3F2] 2xl:aspect-[310/334] md:max-2xl:aspect-[320/334] aspect-[144/158] 2xl:mb-[1.806vw] md:max-xl:mb-[4.427vw] mb-[5.556vw]">
|
||||
<div className="flex justify-between items-start">
|
||||
<p className="md:text-s text-caption-m 2xl:translate-y-[0.694vw] translate-y-2.5">
|
||||
{formattedUnitTypes.get(unit.unitType)}
|
||||
{formattedUnitTypes.get(unit.unitType) || unit.unitType}
|
||||
<span className="max-md:hidden">
|
||||
{`, ${unit.squareFt.toLocaleString(undefined, {
|
||||
maximumFractionDigits: 2,
|
||||
|
||||
@@ -2,7 +2,7 @@ import FloorSelect, { FloorsData } from "../components/FloorSelect";
|
||||
import { useParams } from "react-router";
|
||||
import FloorSidebar from "../components/FloorSidebar";
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { useState, useMemo, useEffect } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "../api/ky";
|
||||
import { SPECIAL_FLOORS } from "../constants/floors";
|
||||
@@ -19,6 +19,11 @@ function FloorsPage() {
|
||||
complexName: ComplexName;
|
||||
}>();
|
||||
|
||||
// Reset selectedFloor when complexName changes to prevent race condition
|
||||
useEffect(() => {
|
||||
setSelectedFloor(null);
|
||||
}, [complexName]);
|
||||
|
||||
const { data: floorsData } = useQuery({
|
||||
queryKey: ["floors-data", complexName],
|
||||
queryFn: () =>
|
||||
|
||||
@@ -123,15 +123,15 @@ function SearchPage() {
|
||||
|
||||
useEffect(() => {
|
||||
if (allFloors) setFloor([allFloors.min, allFloors.max]);
|
||||
}, [allFloors]);
|
||||
}, [allFloors, project]); // Add project dependency to reset when project changes
|
||||
|
||||
useEffect(() => {
|
||||
if (allCost) setCost([allCost.min, allCost.max]);
|
||||
}, [allCost]);
|
||||
}, [allCost, project]); // Add project dependency to reset when project changes
|
||||
|
||||
useEffect(() => {
|
||||
if (allArea) setArea([allArea.min, allArea.max]);
|
||||
}, [allArea]);
|
||||
}, [allArea, project]); // Add project dependency to reset when project changes
|
||||
|
||||
const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } =
|
||||
useInfiniteQuery({
|
||||
@@ -199,6 +199,10 @@ function SearchPage() {
|
||||
useEffect(() => {
|
||||
setSelectedUnitTypes([]);
|
||||
setView("Any view");
|
||||
// Reset filters to prevent race condition with old filter data
|
||||
setCost([-1, -1]);
|
||||
setFloor([-1, -1]);
|
||||
setArea([-1, -1]);
|
||||
}, [project]);
|
||||
|
||||
return (
|
||||
|
||||
@@ -139,7 +139,7 @@ function UnitPage() {
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="2xl:space-y-[1.111vw] space-y-4">
|
||||
<h3 className="text-h3 font-medium">
|
||||
{formattedUnitTypes.get(unit.unitType)}
|
||||
{formattedUnitTypes.get(unit.unitType) || unit.unitType}
|
||||
</h3>
|
||||
<div className="2xl:space-y-[0.556vw] space-y-2">
|
||||
<p className="text-s text-[#00BED7]">{unit.project}</p>
|
||||
|
||||
Reference in New Issue
Block a user