From 818f270c90b5b2b64f0bb6507bf24476129b508d Mon Sep 17 00:00:00 2001 From: inmake Date: Mon, 28 Jul 2025 14:19:08 +0500 Subject: [PATCH] Refactor FloorPlan components to use Unit type for selectedUnit and update floor property types from number to string. Clean up related onSelect handlers and improve unit click handling across multiple components. --- src/components/FloorPlanDubaiMarina39_40.tsx | 20 ++--- src/components/FloorPlanDubaiMarina41_42.tsx | 20 ++--- src/components/FloorPlanDubaiMarina7_38.tsx | 20 ++--- .../FloorPlanDubaiMarina7_38Comb.tsx | 38 ++++---- src/components/FloorPlanMarasiDriveEast.tsx | 34 +++++--- .../FloorPlanMarasiDriveWestLower.tsx | 6 +- src/components/OnFloorMask.tsx | 36 ++++++++ src/components/UnitSlider.tsx | 24 ++++- .../DubaiMarinaOnFloorMask7_38Comb.tsx | 87 ------------------- src/pages/UnitPage.tsx | 1 + 10 files changed, 139 insertions(+), 147 deletions(-) create mode 100644 src/components/OnFloorMask.tsx delete mode 100644 src/components/onFloorMasks/DubaiMarinaOnFloorMask7_38Comb.tsx diff --git a/src/components/FloorPlanDubaiMarina39_40.tsx b/src/components/FloorPlanDubaiMarina39_40.tsx index 7999607..65ef0c4 100644 --- a/src/components/FloorPlanDubaiMarina39_40.tsx +++ b/src/components/FloorPlanDubaiMarina39_40.tsx @@ -23,17 +23,17 @@ function FloorPlanDubaiMarinaUnit({ selectedUnit, }: { unit: Unit; - floor: number; + floor: string | null; d: string; textTransform: string; formattedUnitType: string; - selectedUnit: string | null; - onSelect: (unitNumber: string | null) => void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { const { setPopup, setSide, setPosition, popup } = usePopupStore(); - function handleClick(unitNumber: string) { - window.open(`/complex/dubai-marina/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank"); } function handleMouseEnter() { @@ -96,17 +96,17 @@ function FloorPlanDubaiMarinaUnit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} className={clsx( "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/40" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40" )} d={d} /> @@ -119,7 +119,7 @@ function FloorPlanDubaiMarina39_41({ unitsOnFloor, ...props }: FloorPlanDubaiMarinaProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState(null); // const ref = useClickAway(() => setSelectedUnit(null)); @@ -148,7 +148,7 @@ function FloorPlanDubaiMarina39_41({ dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType } unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d} textTransform={`translate(${dubaiMarinaMasks .get(unit.unitNo.slice(-2))! diff --git a/src/components/FloorPlanDubaiMarina41_42.tsx b/src/components/FloorPlanDubaiMarina41_42.tsx index 23aee78..599314d 100644 --- a/src/components/FloorPlanDubaiMarina41_42.tsx +++ b/src/components/FloorPlanDubaiMarina41_42.tsx @@ -23,17 +23,17 @@ function FloorPlanDubaiMarinaUnit({ selectedUnit, }: { unit: Unit; - floor: number; + floor: string | null; d: string; textTransform: string; formattedUnitType: string; - selectedUnit: string | null; - onSelect: (unitNumber: string | null) => void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { const { setPopup, setSide, setPosition, popup } = usePopupStore(); - function handleClick(unitNumber: string) { - window.open(`/complex/dubai-marina/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank"); } function handleMouseEnter() { @@ -96,17 +96,17 @@ function FloorPlanDubaiMarinaUnit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} className={clsx( "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/40" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40" )} d={d} /> @@ -119,7 +119,7 @@ function FloorPlanDubaiMarina41_42({ unitsOnFloor, ...props }: FloorPlanDubaiMarinaProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState(null); // const ref = useClickAway(() => setSelectedUnit(null)); @@ -148,7 +148,7 @@ function FloorPlanDubaiMarina41_42({ dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType } unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d} textTransform={`translate(${dubaiMarinaMasks .get(unit.unitNo.slice(-2))! diff --git a/src/components/FloorPlanDubaiMarina7_38.tsx b/src/components/FloorPlanDubaiMarina7_38.tsx index 300d73d..d208420 100644 --- a/src/components/FloorPlanDubaiMarina7_38.tsx +++ b/src/components/FloorPlanDubaiMarina7_38.tsx @@ -18,7 +18,7 @@ function FloorPlanDubaiMarina7_38({ unitsOnFloor, ...props }: FloorPlanDubaiMarinaProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState(null); // const ref = useClickAway(() => setSelectedUnit(null)); @@ -47,7 +47,7 @@ function FloorPlanDubaiMarina7_38({ dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.formattedUnitType } unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={dubaiMarinaMasks.get(unit.unitNo.slice(-2))!.d} textTransform={`translate(${dubaiMarinaMasks .get(unit.unitNo.slice(-2))! @@ -73,17 +73,17 @@ export function FloorPlanDubaiMarina7_38Unit({ selectedUnit, }: { unit: Unit; - floor: number; + floor: string | null; d: string; textTransform: string; formattedUnitType: string; - selectedUnit: string | null; - onSelect: (unitNumber: string | null) => void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { const { setPopup, setSide, setPosition, popup } = usePopupStore(); - function handleClick(unitNumber: string) { - window.open(`/complex/dubai-marina/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank"); } function handleMouseEnter() { @@ -146,17 +146,17 @@ export function FloorPlanDubaiMarina7_38Unit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} className={clsx( "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/40" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40" )} d={d} /> diff --git a/src/components/FloorPlanDubaiMarina7_38Comb.tsx b/src/components/FloorPlanDubaiMarina7_38Comb.tsx index 6cae308..b5e12ef 100644 --- a/src/components/FloorPlanDubaiMarina7_38Comb.tsx +++ b/src/components/FloorPlanDubaiMarina7_38Comb.tsx @@ -3,7 +3,7 @@ import { Unit } from "../types/IUnit"; import { usePopupStore } from "../stores/usePopupStore"; import UnitPopup from "./UnitPopup"; import { isMobile } from "react-device-detect"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import clsx from "clsx"; import { dubaiMarinaMasks } from "../data/floor-plan-masks/dubai-marina_7-38_comb"; import { FloorPlanDubaiMarina7_38Unit } from "./FloorPlanDubaiMarina7_38"; @@ -14,14 +14,18 @@ import { filterDuplicateUnits } from "../utils/filterDuplicateUnits"; interface FloorPlanDubaiMarinaCombProps { selectedFloor: string | null; unitsOnFloor: Unit[]; + chosenUnit?: Unit; } function FloorPlanDubaiMarina7_38Comb({ selectedFloor, unitsOnFloor, + chosenUnit, ...props }: FloorPlanDubaiMarinaCombProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState( + chosenUnit || null + ); // const ref = useClickAway(() => setSelectedUnit(null)); @@ -82,7 +86,7 @@ function FloorPlanDubaiMarina7_38Comb({ onSelect={setSelectedUnit} formattedUnitType={maskData.formattedUnitType} unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={maskData.d} textTransform={`translate(${maskData.textTransform.join(" ")})`} /> @@ -93,7 +97,7 @@ function FloorPlanDubaiMarina7_38Comb({ onSelect={setSelectedUnit} formattedUnitType={maskData.formattedUnitType} unit={unit} - floor={Number(selectedFloor!)} + floor={selectedFloor} d={maskData.d} textTransform={`translate(${maskData.textTransform.join(" ")})`} /> @@ -114,18 +118,18 @@ function FloorPlanDubaiMarina7_38CombUnit({ onSelect, selectedUnit, }: { - unit: Unit; - floor: number; d: string; textTransform: string; + floor: string | null; + unit: Unit; formattedUnitType: string; - selectedUnit: string | null; - onSelect: (unitNumber: string | null) => void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { - const { setPopup, setSide, setPosition, popup } = usePopupStore(); + const { setPopup, setSide, setPosition } = usePopupStore(); - function handleClick(unitNumber: string) { - window.open(`/complex/dubai-marina/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/dubai-marina/${unit.unitNo}`, "_blank"); } function handleMouseEnter() { @@ -163,9 +167,9 @@ function FloorPlanDubaiMarina7_38CombUnit({ // ); // }, [selectedUnit, setPopup, setSide, unit]); - useEffect(() => { - if (!popup) onSelect(null); - }, [onSelect, popup]); + // useEffect(() => { + // if (!popup) onSelect(null); + // }, [onSelect, popup]); // const ref = useClickAway( // () => !!selectedUnit && setPopup(null) @@ -188,17 +192,17 @@ function FloorPlanDubaiMarina7_38CombUnit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} className={clsx( "fill-transparent hover:fill-[#00BED7]/40 isolate cursor-pointer transition-colors", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/40" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/40" )} d={d} /> diff --git a/src/components/FloorPlanMarasiDriveEast.tsx b/src/components/FloorPlanMarasiDriveEast.tsx index 2761f25..2654a74 100644 --- a/src/components/FloorPlanMarasiDriveEast.tsx +++ b/src/components/FloorPlanMarasiDriveEast.tsx @@ -9,13 +9,21 @@ import clsx from "clsx"; interface FloorPlanMarasiDriveEastProps { selectedFloor: string | null; unitsOnFloor: Unit[]; + chosenUnit?: Unit; } function FloorPlanMarasiDriveEast({ selectedFloor, unitsOnFloor, + chosenUnit, }: FloorPlanMarasiDriveEastProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState( + chosenUnit || null + ); + + useEffect(() => { + console.log("selectedUnit 1", selectedUnit); + }, [selectedUnit, chosenUnit]); return ( void; + selectedUnit: Unit | null; + onSelect: (unit: Unit | null) => void; }) { - function handleClick(unitNumber: string) { - window.open(`/complex/marasi-drive/${unitNumber}`, "_blank"); + function handleClick(unit: Unit) { + window.open(`/complex/marasi-drive/${unit.unitNo}`, "_blank"); } - const { setPopup, setSide, setPosition, popup } = usePopupStore(); + const { setPopup, setSide, setPosition } = usePopupStore(); function handleMouseEnter() { if (floor === null) return; @@ -1227,9 +1235,13 @@ function MarasiDriveEastFloorPlanUnit({ ); } + // useEffect(() => { + // if (!popup) onSelect(null); + // }, [onSelect, popup]); + useEffect(() => { - if (!popup) onSelect(null); - }, [onSelect, popup]); + console.log("selectedUnit 2", selectedUnit); + }, [selectedUnit]); return ( @@ -1250,18 +1262,18 @@ function MarasiDriveEastFloorPlanUnit({ !isMobile && handleClick(unit.unitNo)} + onClick={() => !isMobile && handleClick(unit)} onMouseEnter={!isMobile ? handleMouseEnter : undefined} onMouseLeave={() => !isMobile && setPopup(null)} onTouchStart={(e) => { - onSelect(unit.unitNo); + onSelect(unit); setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY }); handleMouseEnter(); }} d={d} className={clsx( "fill-transparent hover:fill-[#00BED7]/20 transition-all cursor-pointer", - selectedUnit === unit.unitNo && "!fill-[#00BED7]/20" + selectedUnit?.unitNo === unit.unitNo && "!fill-[#00BED7]/20" )} /> diff --git a/src/components/FloorPlanMarasiDriveWestLower.tsx b/src/components/FloorPlanMarasiDriveWestLower.tsx index bb38e96..3c21ef8 100644 --- a/src/components/FloorPlanMarasiDriveWestLower.tsx +++ b/src/components/FloorPlanMarasiDriveWestLower.tsx @@ -10,13 +10,17 @@ import { useEffect, useState } from "react"; interface FloorPlanMarasiDriveEastProps { selectedFloor: string | null; unitsOnFloor: Unit[]; + chosenUnit?: Unit; } function FloorPlanMarasiDriveEast({ selectedFloor, unitsOnFloor, + chosenUnit, }: FloorPlanMarasiDriveEastProps & React.SVGProps) { - const [selectedUnit, setSelectedUnit] = useState(null); + const [selectedUnit, setSelectedUnit] = useState( + chosenUnit || null + ); return ( diff --git a/src/components/OnFloorMask.tsx b/src/components/OnFloorMask.tsx new file mode 100644 index 0000000..eab0987 --- /dev/null +++ b/src/components/OnFloorMask.tsx @@ -0,0 +1,36 @@ +import { Unit } from "../types/IUnit"; +import FloorPlanMarasiDriveEast from "./FloorPlanMarasiDriveEast"; +import FloorPlanMarasiDriveWestLower from "./FloorPlanMarasiDriveWestLower"; +import FloorPlanMarasiDriveWestUpper from "./FloorPlanMarasiDriveWestUpper"; + +function OnFloorMask({ unit }: { unit: Unit }) { + if (unit.project === "Rove Home Marasi Drive") { + if (unit.wing === "East") { + return ( + + ); + } else if (unit.wing === "West") { + if (unit.floor >= 5 && unit.floor <= 21) { + return ( + + ); + } else if (unit.floor >= 24 && unit.floor <= 31) { + return ( + + ); + } + } + } +} + +export default OnFloorMask; diff --git a/src/components/UnitSlider.tsx b/src/components/UnitSlider.tsx index d3e8ecb..c8e9068 100644 --- a/src/components/UnitSlider.tsx +++ b/src/components/UnitSlider.tsx @@ -7,13 +7,16 @@ import ChevronLeftIcon from "./icons/ChevronLeftIcon"; import ChevronRightIcon from "./icons/ChevronRightIcon"; import { useSwipeable } from "react-swipeable"; import clsx from "clsx"; +import { Unit } from "../types/IUnit"; +import OnFloorMask from "./OnFloorMask"; interface UnitSliderProps { unitTypeVariant: string; complexName: string; + unit?: Unit; } // костыль: в Мараси 2 bedroom b ЕДИНСТВЕННАЯ НЕ ЗЕРКАЛЬНАЯ ХАТА среди всех -function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) { +function UnitSlider({ unitTypeVariant, complexName, unit }: UnitSliderProps) { const [hasSide, setHasSide] = useState(false); const [selectedSide, setSelectedSide] = useState<"left" | "right">(); @@ -48,6 +51,12 @@ function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) { trackMouse: true, }); + useEffect(() => { + if (unit) { + console.log("unit", unit); + } + }, [unit]); + return (
+
+ {unit && ( + + + + )} +
{!hasSide && @@ -263,6 +279,7 @@ function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) { Layout )} + + {unit && ( + + )} {Array.from({ length: isLoft ? 3 : 2 }).map((_, index) => (
{ - console.log(unitNumber); - }, [unitNumber]); - - return ( - - {paths.map((path) => ( - - ))} - - ); -} - -export default DubaiMarinaOnFloorMask7_38Comb; diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx index 97cfed1..f2eb9c4 100644 --- a/src/pages/UnitPage.tsx +++ b/src/pages/UnitPage.tsx @@ -103,6 +103,7 @@ function UnitPage() { : getUnitTypeVariantDubaiMarina(unit.unitNo, selectedFloor) } complexName={params.complexName!} + unit={unit} />