diff --git a/client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx b/client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx index 352fb9a..16811ee 100644 --- a/client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/EastWingFloorLayout.tsx @@ -1,25 +1,21 @@ interface Props { - handleMouseOver: (e: React.MouseEvent) => void; - handleMouseOut: () => void; - handleClick: (e: React.MouseEvent) => void; + onMouseEnter: (e: React.MouseEvent) => void; + onMouseLeave: () => void; + onClick: (e: React.MouseEvent) => void; } -function EastWingFloorLayout({ - handleMouseOver, - handleMouseOut, - handleClick, -}: Props) { - function onMouseEnter(e: React.MouseEvent) { - e.currentTarget.style.fill = "rgba(0, 190, 215, .25)"; +function EastWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { + // function onMouseEnter(e: React.MouseEvent) { + // e.currentTarget.style.fill = "rgba(0, 190, 215, .25)"; - handleMouseOver(e); - } + // handleMouseOver(e); + // } - function onMouseLeave(e: React.MouseEvent) { - e.currentTarget.style.fill = "rgba(255, 255, 255, 0)"; + // function onMouseLeave(e: React.MouseEvent) { + // e.currentTarget.style.fill = "rgba(255, 255, 255, 0)"; - handleMouseOut(); - } + // handleMouseOut(); + // } return ( diff --git a/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx b/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx index a3bf684..ae4e157 100644 --- a/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef } from "react"; +import { useState } from "react"; import { IDesctiptionFloor } from "../../../types/descriptionFloor"; import useModal from "../../../store/useModal"; import EastWingFloorLayout from "./EastWingFloorLayout"; @@ -18,9 +18,9 @@ interface Props { function FloorSidebar({ currentFloor }: Props) { const { setModal } = useModal(); - const descRef = useRef(null); const { setIsSidebar } = useWingSidebar(); - const [hoveredUnit, setHoveredUnit] = useState(null); + const [hoveredUnit, setHoveredUnit] = useState(); + const [isShowPopup, setIsShowPopup] = useState(false); const [mousePos, setMousePos] = useState<[number, number]>([0, 0]); const [type, setType] = useState(null); @@ -42,19 +42,27 @@ function FloorSidebar({ currentFloor }: Props) { } } - function handleOnMouseOver(e: React.MouseEvent) { + function handleMouseMove(e: React.MouseEvent) { + const x = e.clientX - e.currentTarget.getBoundingClientRect().left; + const y = e.clientY - e.currentTarget.getBoundingClientRect().top; + setMousePos([x, y]); + } + + async function handleMouseEnter(e: React.MouseEvent) { const unitNumber = e.currentTarget.dataset.number; const type = e.currentTarget.dataset.type; if (!unitNumber || !type) return; - setType(type); - console.log("type", type); getUnit(unitNumber); + setType(type); + setIsShowPopup(true); + setHoveredUnit(hoveredUnit); } - function handleOnMouseOut() { - setHoveredUnit(null); + function handleMouseLeave() { + setIsShowPopup(false); + setHoveredUnit(undefined); } function handleClick() { @@ -63,94 +71,81 @@ function FloorSidebar({ currentFloor }: Props) { setModal(); } - function handleMouseMove(e: MouseEvent) { - const x = e.clientX - window.innerWidth / 2 - 360; - const y = e.clientY - 78; - setMousePos([x, y]); - } - - useEffect(() => { - window.addEventListener("mousemove", handleMouseMove); - - return () => { - window.removeEventListener("mousemove", handleMouseMove); - }; - }, []); - return ( - <> -
-
-
-

- {currentFloor?.floor} Floor -

-

{currentFloor?.wing}

-
-
+
+
+
+
+

Studio Flex

- {/*
+
+
+

Studio

+
+
+
+

1 Bedroom

+
+
+
+

1 Bedroom

+
+
+
+

2 Bedroom

+
+
+ {/*
{floorApartments.length} units
*/} -
- - - {currentFloor?.wing === "West Wing" ? ( - currentFloor && currentFloor.floor <= 21 ? ( - - ) : ( - - ) - ) : ( - - )} -
- - + + {currentFloor?.wing === "West Wing" ? ( + currentFloor && currentFloor.floor <= 21 ? ( + + ) : ( + + ) + ) : ( + + )} + + +
); } diff --git a/client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx b/client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx index 0369bf1..618aa38 100644 --- a/client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/UnitPopup.tsx @@ -3,27 +3,25 @@ import VirtualTourIcon from "../../icons/VirtualTourIcon"; import unitTypes from "../../../data/unitTypes.json"; interface Props { - unit: IUnit | null; + unit: IUnit | undefined; type: string | null; + isShowPopup: boolean; mousePos: [number, number]; } -function UnitPopup({ unit, type, mousePos }: Props) { +function UnitPopup({ unit, type, isShowPopup, mousePos }: Props) { return (
{unit && type ? ( <>

- {unit.unitType}, {unit.totalArea} Sqft + {unit.unitName}, {unit.totalArea} Sqft

{unit.unitNo[0] === "E" ? "East" : "West"} Wing

diff --git a/client/src/components/complexWingPage/FloorSidebar/WestWingBottomFloorLayout.tsx b/client/src/components/complexWingPage/FloorSidebar/WestWingBottomFloorLayout.tsx index 7a73a53..53c93d0 100644 --- a/client/src/components/complexWingPage/FloorSidebar/WestWingBottomFloorLayout.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/WestWingBottomFloorLayout.tsx @@ -1,33 +1,28 @@ -import { useRef } from "react"; - interface Props { - handleMouseOver: (e: React.MouseEvent) => void; - handleMouseOut: () => void; - handleClick: (e: React.MouseEvent) => void; + onMouseEnter: (e: React.MouseEvent) => void; + onMouseLeave: () => void; + onClick: (e: React.MouseEvent) => void; } function WestWingBottomFloorLayout({ - handleMouseOver, - handleMouseOut, - handleClick, + onMouseEnter, + onMouseLeave, + onClick, }: Props) { - const ref = useRef(null); + // function onMouseOver(e: React.MouseEvent) { + // e.currentTarget.style.fill = "rgba(0, 190, 215, .25)"; - function onMouseOver(e: React.MouseEvent) { - e.currentTarget.style.fill = "rgba(0, 190, 215, .25)"; + // handleMouseOver(e); + // } - handleMouseOver(e); - } + // function onMouseOut(e: React.MouseEvent) { + // e.currentTarget.style.fill = "rgba(255, 255, 255, 0)"; - function onMouseOut(e: React.MouseEvent) { - e.currentTarget.style.fill = "rgba(255, 255, 255, 0)"; - - handleMouseOut(); - } + // handleMouseOut(); + // } return ( diff --git a/client/src/components/complexWingPage/FloorSidebar/WestWingFloorLayout.tsx b/client/src/components/complexWingPage/FloorSidebar/WestWingFloorLayout.tsx index 490f712..d936fe7 100644 --- a/client/src/components/complexWingPage/FloorSidebar/WestWingFloorLayout.tsx +++ b/client/src/components/complexWingPage/FloorSidebar/WestWingFloorLayout.tsx @@ -1,25 +1,21 @@ interface Props { - handleMouseOver: (e: React.MouseEvent) => void; - handleMouseOut: () => void; - handleClick: (e: React.MouseEvent) => void; + onMouseEnter: (e: React.MouseEvent) => void; + onMouseLeave: () => void; + onClick: (e: React.MouseEvent) => void; } -function WestWingFloorLayout({ - handleMouseOver, - handleMouseOut, - handleClick, -}: Props) { - function onMouseOver(e: React.MouseEvent) { - e.currentTarget.style.fill = "rgba(0, 190, 215, .25)"; +function WestWingFloorLayout({ onMouseEnter, onMouseLeave, onClick }: Props) { + // function onMouseOver(e: React.MouseEvent) { + // e.currentTarget.style.fill = "rgba(0, 190, 215, .25)"; - handleMouseOver(e); - } + // handleMouseOver(e); + // } - function onMouseOut(e: React.MouseEvent) { - e.currentTarget.style.fill = "rgba(255, 255, 255, 0)"; + // function onMouseOut(e: React.MouseEvent) { + // e.currentTarget.style.fill = "rgba(255, 255, 255, 0)"; - handleMouseOut(); - } + // handleMouseOut(); + // } return ( diff --git a/client/src/components/icons/ShareIcon.tsx b/client/src/components/icons/ShareIcon.tsx new file mode 100644 index 0000000..38777b1 --- /dev/null +++ b/client/src/components/icons/ShareIcon.tsx @@ -0,0 +1,33 @@ +interface Props { + className?: string; +} + +function ShareIcon({ className }: Props) { + return ( + + + + + ); +} + +export default ShareIcon; diff --git a/client/src/components/modals/UnitModal.tsx b/client/src/components/modals/UnitModal.tsx index 713cc3a..83f1942 100644 --- a/client/src/components/modals/UnitModal.tsx +++ b/client/src/components/modals/UnitModal.tsx @@ -7,10 +7,11 @@ import BookingIcon from "../icons/BookingIcon"; import HeartIcon from "../icons/HeartIcon"; import VirtualTourIcon from "../icons/VirtualTourIcon"; import unitTypes from "../../data/unitTypes.json"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate, useSearchParams } from "react-router-dom"; import { useEffect } from "react"; import useFavoritesStore from "../../store/useFavoritesStore"; import HeartFilledIcon from "../icons/HeartFilledIcon"; +import ShareIcon from "../icons/ShareIcon"; interface Props { unit: IUnit; @@ -21,6 +22,8 @@ function UnitModal({ unit, type }: Props) { const { setModal } = useModal(); const navigate = useNavigate(); const { favoriteUnits, setFavoriteUnits } = useFavoritesStore(); + const [searchParams, setSearchParams] = useSearchParams(); + const location = useLocation(); function getViewImage(): string { const unitView = unit.unitView; @@ -190,11 +193,15 @@ function UnitModal({ unit, type }: Props) { } useEffect(() => { - console.log("type", type); + searchParams.set("unitNo", unit.unitNo); + setSearchParams(searchParams); document.body.classList.add("overflow-y-hidden"); return () => { + searchParams.delete("unitNo"); + setSearchParams(searchParams); + document.body.classList.remove("overflow-y-hidden"); }; }, []); @@ -221,7 +228,19 @@ function UnitModal({ unit, type }: Props) { }

-
+
+
-
+
+