diff --git a/src/components/FloorPlanMarasiDriveEast.tsx b/src/components/FloorPlanMarasiDriveEast.tsx index 664c34f..23fa0d0 100644 --- a/src/components/FloorPlanMarasiDriveEast.tsx +++ b/src/components/FloorPlanMarasiDriveEast.tsx @@ -1,16 +1,17 @@ -// import { selectedFloorPlanMasksMarasiDrive } from "../data/selectedFloor-plan-masks/marasi-drive"; +import { formattedUnitTypes } from "../data/formattedUnitTypes"; +import { usePopupStore } from "../stores/usePopupStore"; +import { Unit } from "../types/IUnit"; +import UnitPopup from "./UnitPopup"; interface FloorPlanMarasiDriveEastProps { selectedFloor: string | null; + unitsOnFloor: Unit[]; } function FloorPlanMarasiDriveEast({ selectedFloor, + unitsOnFloor, }: FloorPlanMarasiDriveEastProps & React.SVGProps) { - function handleClick(unitNumber: string) { - window.open(`/complex/marasi-drive/${unitNumber}`, "_blank"); - } - return ( - - - - - {`E-${selectedFloor}16`} - - - {"1BR"} - - - handleClick(`E-${selectedFloor}16`)} - data-number={16} - data-type="1br-type-c" - d="M474.57,66.81c.12.12,2.82-2.72,4.16-4.16l-47.12-47.12-3.51,3.51-15.49-15.49-36.67,36.67,15.49,15.49-2.36,2.36,34.26,34.26-1.1,1.1,10.16,10.16,21.28-21.28,5.6,5.6,1.66-1.66,7.72-7.72c.08.08,5.91-5.85,8.82-8.82l-2.9-2.9Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + {unitsOnFloor && unitsOnFloor.length && ( + + - - - - - {`E-${selectedFloor}15`} - - - {"1BR"} - - - handleClick(`E-${selectedFloor}15`)} - data-number={15} - data-type="1br-type-c" - d="M415.38,131.84l-1.85,1.85-7.69,7.69-8.75,8.75-2.92-2.92-4.06,4.06-47.12-47.12,3.55-3.56-15.49-15.49,36.48-36.49,15.49,15.49,2.58-2.58,34.26,34.26,1.1-1.1,10.16,10.16-21.36,21.36,5.61,5.61Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}14`} - - - {"ST"} - - - handleClick(`E-${selectedFloor}14`)} - data-number={14} - data-type="studio-2" - d="M321.78,225.44l-1.45,1.45-7.76,7.76-9,9-4.56-4.56-4.63,4.64-45.43-45.43-15.52-15.52,22.49-22.49,15.52,15.52,3.45-3.45,47.08,47.08-3.1,3.1,2.91,2.91Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}13`} - - - {"ST"} - - - handleClick(`E-${selectedFloor}13`)} - data-number={13} - data-type="studio-2" - d="M292.55,254.67l-8.94,8.94-7.77,7.77-1.38,1.38-2.91-2.91-3.07,3.07-47.08-47.08,3.45-3.45-15.52-15.52,22.67-22.67,15.52,15.52,45.43,45.43-4.95,4.96,4.56,4.56Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}12`} - - - {"ST"} - - - handleClick(`E-${selectedFloor}12`)} - data-number={12} - data-type="studio-2" + - - - - - {`E-${selectedFloor}11`} - - - {"ST"} - - - handleClick(`E-${selectedFloor}11`)} - data-number={11} - data-type="studio-2" - d="M235.49,311.73l-9.17,9.17-7.67,7.67-1.35,1.35-2.91-2.91-3.09,3.09-47.09-47.09,3.37-3.37-15.52-15.52,23.73-23.73,15.55,15.5-1.05,1.05,34.22,34.22,1.05-1.05,11.15,11.15-5.84,5.84,4.62,4.62Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}10`} - - - {"1BR"} - - - handleClick(`E-${selectedFloor}10`)} - data-number={10} - data-type="1br-type-c" - d="M208.62,338.6l-8.72,8.72-7.68,7.68-1.9,1.9-5.63-5.63-21.2,21.2-15.4-15.4,1.2-1.2-28.96-28.96,2.34-2.34-15.11-15.11,36.08-36.9,15.52,15.52,3.65-3.65,47.09,47.09-4.18,4.18,2.91,2.91Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}09`} - - - {"1BR"} - - - handleClick(`E-${selectedFloor}09`)} - data-number={9} - data-type="1br-type-b" - d="M116.69,430.53l-7.3,7.3-7.69,7.69-18.05,18.05-2.57-2.57-6.8,6.8-11.42-11.42-1.95,1.95-3.17-3.17-4.37,4.37L0,416.28l51.9-51.9,19.55,19.55,3.23-3.23,43.01,43.01-3.92,3.91,2.91,2.91Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}08`} - - - {"1BR"} - - - handleClick(`E-${selectedFloor}08`)} - data-number={8} - data-type="1br-type-b" + - - - - - {`E-${selectedFloor}07`} - - - {"1BR"} - - - handleClick(`E-${selectedFloor}07`)} - data-number={7} - data-type="1br-type-c" + - - - - - {`E-${selectedFloor}06`} - - - {"1BR"} - - - handleClick(`E-${selectedFloor}06`)} - data-number={6} - data-type="1br-type-c" - d="M223.81,353.83l-8.71,8.71-7.64,7.64-1.76,1.75,5.56,5.56-21.42,21.42,10.21,10.21,1.24-1.24,34.31,34.31,2.38-2.33,15.3,15.3,36.59-36.59-15.33-15.33,3.53-3.53-47.31-47.31-4.18,4.18-2.78-2.78Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}05`} - - - {"ST"} - - - handleClick(`E-${selectedFloor}05`)} - data-number={5} - data-type="studio-2" - d="M250.61,326.99l-9.11,9.11-7.63,7.62-1.41,1.41,2.78,2.78-3.03,3.02,47.31,47.31,3.32-3.32,15.33,15.33,23.7-23.7-15.33-15.33-1.02,1.02-34.32-34.32,1.1-1.1-11.13-11.13-5.93,5.93-4.64-4.64Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}04`} - - - {"ST"} - - - handleClick(`E-${selectedFloor}04`)} - data-number={4} - data-type="studio-2" - d="M282.06,295.54l-1.44,1.44-7.66,7.66-8.99,8.99,4.64,4.64-6.05,6.05,11.13,11.13.93-.93,34.32,34.32-.94.94,15.33,15.33,23.68-23.68-15.33-15.33,3.54-3.54-47.32-47.32-3.07,3.07-2.77-2.77Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}03`} - - - {"1BR"} - - - handleClick(`E-${selectedFloor}03`)} - data-number={3} - data-type="1br-type-d" - d="M310.29,267.31l-1.78,1.78-7.78,7.78-10.03,10.03,2.77,2.77-4.11,4.12,45.49,45.49,8.38-8.38,17.15,17.15,32.49-32.49-17.15-17.15,7.45-7.45-26.1-26.1-3.68,3.68-10.91-10.91-20.95,20.95-11.26-11.26Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + - - - - - {`E-${selectedFloor}02`} - - - {"ST"} - - - handleClick(`E-${selectedFloor}02`)} - data-number={2} - data-type="studio-2" + + - - - - {`E-${selectedFloor}01`} - - - {"2BR"} - - - handleClick(`E-${selectedFloor}01`)} - data-number={1} - data-type="2br-type-a" - d="M483.21,195.47l9.32-.1.04,50.46-11.7-.37-.08,18.74-22.25.21c-9.39.09-18.38,3.86-25.02,10.5l-2.35,2.36-58.78-58.78,2.19-2.19-1.99-1.99,16.28-16.28-4.55-4.55,9.75-9.75,4.88,4.89h84.13s.14,6.83.14,6.83Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-all cursor-pointer" - /> - - + )} ); } export default FloorPlanMarasiDriveEast; + +function MarasiDriveEastFloorPlanUnit({ + d, + textTransform, + floor, + unit, +}: { + d: string; + textTransform: string; + floor: string | null; + unit: Unit; +}) { + function handleClick(unitNumber: string) { + window.open(`/complex/marasi-drive/${unitNumber}`, "_blank"); + } + + const { setPopup, setSide } = usePopupStore(); + + function handleMouseEnter() { + if (floor === null) return; + setSide("top"); + setPopup( + + ); + } + + return ( + + + + {unit.unitNo} + + + {formattedUnitTypes.get(unit.unitType)} + + + handleClick(unit.unitNo)} + onMouseEnter={handleMouseEnter} + onMouseLeave={() => setPopup(null)} + // data-number={unit.unitNo} + // data-type={unit.unitType} + d={d} + className="fill-transparent hover:fill-[#00BED7]/20 transition-all cursor-pointer" + /> + + ); +} diff --git a/src/components/FloorPlanMarasiDriveWestLower.tsx b/src/components/FloorPlanMarasiDriveWestLower.tsx index 41d7ace..65e2dca 100644 --- a/src/components/FloorPlanMarasiDriveWestLower.tsx +++ b/src/components/FloorPlanMarasiDriveWestLower.tsx @@ -1554,29 +1554,31 @@ function FloorPlanMarasiDriveEast({ d="M304.47,286.8l-1.14-1.14-7.04-7.04-8.46-8.46-4.12,4.12-4.36-4.36-42.07,42.07-14.11,14.11,20.7,20.7,14.11-14.11,3.22,3.22,31.77-31.77.92.92,11.88-11.88-3.83-3.83,2.53-2.53Z" className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" /> - - - {`W-${selectedFloor}01`} - - - {"2BR"} - - - handleClick(`W-${selectedFloor}01`)} - data-number={1} - data-type="2br-type-a" - d="M264.39,246.73l1.02,1.02-4.12,4.12,14.85,14.85-1.91,1.91,1.9,1.9-36.21,36.21-18.05,18.05-1.97-1.97c-6.35-6.35-14.97-9.92-23.95-9.92h-19.67l.03-17.38-10.88-.03v-46.12h8.58v-6.29h77.87l4.43-4.43.95.94,7.13,7.13Z" - className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" - /> + + + + {`W-${selectedFloor}01`} + + + {"2BR"} + + + handleClick(`W-${selectedFloor}01`)} + data-number={1} + data-type="2br-type-a" + d="M264.39,246.73l1.02,1.02-4.12,4.12,14.85,14.85-1.91,1.91,1.9,1.9-36.21,36.21-18.05,18.05-1.97-1.97c-6.35-6.35-14.97-9.92-23.95-9.92h-19.67l.03-17.38-10.88-.03v-46.12h8.58v-6.29h77.87l4.43-4.43.95.94,7.13,7.13Z" + className="fill-transparent hover:fill-[#00BED7]/20 transition-[fill] cursor-pointer" + /> + ); diff --git a/src/components/FloorPopup.tsx b/src/components/FloorPopup.tsx index f21ba3b..d0635a6 100644 --- a/src/components/FloorPopup.tsx +++ b/src/components/FloorPopup.tsx @@ -23,9 +23,9 @@ function FloorPopup({ title, position, data, complexName }: FloorMarkerProps) { transition={{ duration: 0.1 }} style={{ top: position[1], left: position[0] }} className={clsx( - "absolute z-1 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen", + "absolute z-1 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen", title.startsWith("West") - ? "translate-x-[calc(1.25vw)]" + ? "translate-x-[1.25vw]" : "-translate-x-[calc(100%+1.25vw)]" )} > diff --git a/src/components/FloorSelect.tsx b/src/components/FloorSelect.tsx index 942cb03..b4624af 100644 --- a/src/components/FloorSelect.tsx +++ b/src/components/FloorSelect.tsx @@ -9,10 +9,12 @@ import InfoIcon from "./icons/InfoIcon"; import PrivacyPolicyButton from "./PrivacyPolicyButton"; import Button from "./ui/Button"; import { useNavigate } from "react-router"; -import FloorPopup from "./FloorPopup"; +// import FloorPopup from "./FloorPopup"; import { useQuery } from "@tanstack/react-query"; import { api } from "../api/ky"; import clsx from "clsx"; +import { usePopupStore } from "../stores/usePopupStore"; +import NewFloorPopup from "./NewFloorPopup"; export interface FloorsData { floor: number; @@ -42,16 +44,16 @@ function FloorSelect({ const navigate = useNavigate(); const [isFullScreen, setIsFullScreen] = useState(false); - const [hoveredFloor, setHoveredFloor] = useState(null); - const [position, setPosition] = useState<[number, number]>([0, 0]); + // const [hoveredFloor, setHoveredFloor] = useState(null); + + const { setPopup, setPosition, setSide } = usePopupStore(); const rootRef = useRef(null); function handleMouseMove(e: React.MouseEvent) { - const x = e.clientX - e.currentTarget.getBoundingClientRect().left; - const y = e.clientY - e.currentTarget.getBoundingClientRect().top; - - setPosition([x, y]); + const x = e.clientX; + const y = e.clientY; + setPosition({ x, y }); } function handleFullScreenClick() { @@ -90,6 +92,28 @@ function FloorSelect({ } } + function handleFloorMouseEnter(floor: string, wing?: "West" | "East") { + if (!data) return; + if (wing) setSide(wing === "East" ? "left" : "right"); + if ( + data.some( + (floorData) => floorData.floor === +floor!.split(" ").at(-1)! + ) || + ["Rooftop", "Ground Level", "Podium Level", "Sky Garden"].includes(floor) + ) + setPopup( + floorData.floor === +floor!.split(" ").at(-1)! + )! + } + /> + ); + } + return (
( handleFloorClick(floorTitle)} - onMouseEnter={() => setHoveredFloor(floorTitle)} - onMouseLeave={() => setHoveredFloor(null)} + onMouseEnter={() => + handleFloorMouseEnter( + floorTitle, + ![ + "Rooftop", + "Ground Level", + "Podium Level", + "Sky Garden", + ].includes(floorTitle) && complexName === "marasi-drive" + ? (floorTitle.split(" ")[0] as "West" | "East") + : undefined + ) + } + onMouseLeave={() => setPopup(null)} key={floorTitle} d={d} className={clsx( @@ -170,7 +206,7 @@ function FloorSelect({ onClick={handleFullScreenClick} />
- {data && + {/* {data && hoveredFloor && (data.some( ({ floor }) => floor === +hoveredFloor!.split(" ").at(-1)! @@ -188,7 +224,7 @@ function FloorSelect({ )! } /> - )} + )} */} ); } diff --git a/src/components/NewFloorPopup.tsx b/src/components/NewFloorPopup.tsx new file mode 100644 index 0000000..1f32b6c --- /dev/null +++ b/src/components/NewFloorPopup.tsx @@ -0,0 +1,97 @@ +import { formattedUnitTypes } from "../data/formattedUnitTypes"; +import { FloorsData } from "./FloorSelect"; +import HumanIcon from "./icons/HumanIcon"; + +interface NewFloorPopupProps { + title: string; + complexName: string; + data: FloorsData; +} + +function NewFloorPopup({ title, complexName, data }: NewFloorPopupProps) { + return ( +
+
+

+ {Number.isNaN(+title.split(" ").at(-1)!) + ? title + : `${title.split(" ").at(-1)} floor`} +

+ {!Number.isNaN(+title.split(" ").at(-1)!) && ( +

{title.split(" ")[0]} Wing

+ )} +
+
+

+ {title && Number.isNaN(+title!.split(" ").at(-1)!) + ? "16 Amenties" + : `${ + complexName === "marasi-drive" + ? data[ + title.split(" ")[0] === "East" + ? "East" + : title.split(" ")[0] === "West" + ? "West" + : "others" + ].totalUnits + : data.others.totalUnits + } apartments`} +

+ {!Number.isNaN(+title.split(" ").at(-1)!) && ( +
+ + + +

Virtual Tour

+
+ )} +
+
+
+ {!Number.isNaN(+title.split(" ").at(-1)!) ? ( + <> + {Object.entries( + data[ + title.split(" ")[0] === "East" + ? "East" + : title.split(" ")[0] === "West" + ? "West" + : "others" + ].types + ).map(([unitType, count]) => ( +
+

+ {count} +

+

+ {formattedUnitTypes.get(unitType)} +

+
+ ))} + + ) : ( + <> +
+

+ 8 +

+

+ Indoor Amenties +

+
+
+

+ 8 +

+

+ Outdoor Amenties +

+
+ + )} +
+
+ ); +} + +export default NewFloorPopup; diff --git a/src/components/PopupContainer.tsx b/src/components/PopupContainer.tsx new file mode 100644 index 0000000..497dc8a --- /dev/null +++ b/src/components/PopupContainer.tsx @@ -0,0 +1,48 @@ +import { AnimatePresence, motion } from "motion/react"; +import { usePopupStore } from "../stores/usePopupStore"; +import clsx from "clsx"; + +function PopupContainer() { + const { position, popup, side } = usePopupStore(); + + return ( + + {popup && ( + + {popup} +
+ + )} + + ); +} + +export default PopupContainer; diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 2cb0e32..3cb3f08 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -45,12 +45,12 @@ function Slider({ return (
-
-
- +
+
+ - +
-
+
-
+
{currentSlide + 1}/{dubaiMarinaSlider[categoryName].length}
diff --git a/src/components/UnitCard.tsx b/src/components/UnitCard.tsx index c1195f9..55ffadc 100644 --- a/src/components/UnitCard.tsx +++ b/src/components/UnitCard.tsx @@ -1,5 +1,5 @@ import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore"; -import { IUnit } from "../types/IUnit"; +import { Unit } from "../types/IUnit"; import FilledHeartIcon from "./icons/FilledHeartIcon"; import HeartIcon from "./icons/HeartIcon"; import Button from "./ui/Button"; @@ -9,7 +9,7 @@ import { formattedUnitTypes } from "../data/formattedUnitTypes"; import { Link } from "react-router"; import complexNameToSlug from "../utils/complexNameToSlug"; -function UnitCard({ unit }: { unit: IUnit }) { +function UnitCard({ unit }: { unit: Unit }) { const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore(); function handleFavorite(e: React.MouseEvent) { diff --git a/src/components/UnitPopup.tsx b/src/components/UnitPopup.tsx new file mode 100644 index 0000000..41aadb5 --- /dev/null +++ b/src/components/UnitPopup.tsx @@ -0,0 +1,76 @@ +import { formattedUnitTypes } from "../data/formattedUnitTypes"; +import HumanIcon from "./icons/HumanIcon"; + +interface UnitPopupProps { + unitType: string; + wing?: "East" | "West"; + floor: string; + unitNumber: string; + squareFt: number; + suitesArea: number; + balconyArea: number; + price: number; +} + +function UnitPopup({ + unitType, + wing, + floor, + unitNumber, + squareFt, + suitesArea, + balconyArea, + price, +}: UnitPopupProps) { + return ( +
+
+
+

+ {formattedUnitTypes.get(unitType)} +

+
+ {wing && ( + <> +

{wing} Wing

+
+ + )} +

Floor {floor}

+
+

{unitNumber}

+
+
+ + + +

Virtual Tour

+
+
+
+
+
+
+

Total Area

+

{squareFt.toFixed(2)} Sqft

+
+
+

Suites Area

+

{suitesArea.toFixed(2)} Sqft

+
+
+

Balcony Area

+

{balconyArea.toFixed(2)} Sqft

+
+
+

+ {`AED ${Intl.NumberFormat("ar-AE", { + currency: "AED", + minimumFractionDigits: 0, + }).format(price)}`} +

+
+ ); +} + +export default UnitPopup; diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx index c1c0a0b..378f1a2 100644 --- a/src/components/ui/Select.tsx +++ b/src/components/ui/Select.tsx @@ -48,7 +48,7 @@ function Select({ return (
{label && ( -

+

{label}

)} @@ -59,7 +59,7 @@ function Select({ )} onClick={() => setIsShow(!isShow)} > -

{selectedOption}

+

{selectedOption}

+ diff --git a/src/pages/FloorsPage.tsx b/src/pages/FloorsPage.tsx index c6c340e..818de8d 100644 --- a/src/pages/FloorsPage.tsx +++ b/src/pages/FloorsPage.tsx @@ -18,6 +18,9 @@ import GroundDubaiMarina from "../components/floor-plans/dubai-marina/GroundDuba import PodiumDubaiMarina from "../components/floor-plans/dubai-marina/PodiumDubaiMarina"; import FloorPlanMarasiDriveWestLower from "../components/FloorPlanMarasiDriveWestLower"; import FloorPlanMarasiDriveWestUpper from "../components/FloorPlanMarasiDriveWestUpper"; +import { Unit } from "../types/IUnit"; +import slugToComplexName from "../utils/slugToComplexName"; +import { usePopupStore } from "../stores/usePopupStore"; function FloorsPage() { const { complexName } = useParams(); @@ -36,6 +39,29 @@ function FloorsPage() { .json(), }); + const { data: unitsOnFloor } = useQuery({ + enabled: + !!selectedFloor && + !["Rooftop", "Ground Level", "Podium Level", "Sky Garden"].includes( + selectedFloor + ), + queryKey: ["units-on-floor", complexName, selectedFloor], + queryFn: () => + api + .get( + `units/on-floor?project=${slugToComplexName( + complexName! + )}&floor=${selectedFloor?.split(" ").at(-1)}${ + complexName === "marasi-drive" + ? `&wing=${selectedFloor?.split(" ")[0]}` + : "" + }` + ) + .json(), + }); + + const { setPosition } = usePopupStore(); + return (
item.floor.toString()) || [] } defaultOption={selectedFloor?.toString() || ""} - onSelect={(floor) => setSelectedFloor(floor)} + onSelect={setSelectedFloor} className="2xl:w-[8.333vw]" />
@@ -157,7 +183,7 @@ function FloorsPage() { ]) || [] } defaultOption={selectedFloor?.toString() || ""} - onSelect={(floor) => setSelectedFloor(floor)} + onSelect={setSelectedFloor} className="2xl:w-[8.333vw]" />
@@ -197,9 +223,15 @@ function FloorsPage() {
-
- {selectedFloor.split(" ")[0] === "East" && ( +
+ setPosition({ x: e.clientX, y: e.clientY }) + } + > + {unitsOnFloor && selectedFloor.split(" ")[0] === "East" && ( )} diff --git a/src/pages/SearchPage.tsx b/src/pages/SearchPage.tsx index 60f9532..d517beb 100644 --- a/src/pages/SearchPage.tsx +++ b/src/pages/SearchPage.tsx @@ -1,7 +1,7 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; import { api } from "../api/ky"; -import { IUnit } from "../types/IUnit"; +import { Unit } from "../types/IUnit"; import UnitCard from "../components/UnitCard"; import { useEffect, useRef, useState } from "react"; import SearchFilters from "../components/SearchFilters"; @@ -175,7 +175,7 @@ function SearchPage() { : "" }${sort ? `&order=${SORT_OPTIONS[sort].split(" ").join()}` : ""}` ) - .json(), + .json(), getNextPageParam: (lastPage, _, lastPageIndex) => lastPage.length < STEP ? undefined : lastPageIndex + STEP, }); diff --git a/src/pages/UnitPage.tsx b/src/pages/UnitPage.tsx index 24fdc24..1984e14 100644 --- a/src/pages/UnitPage.tsx +++ b/src/pages/UnitPage.tsx @@ -1,7 +1,7 @@ import { useQuery } from "@tanstack/react-query"; import { useParams } from "react-router"; import { api } from "../api/ky"; -import { IUnit } from "../types/IUnit"; +import { Unit } from "../types/IUnit"; import ShareIcon from "../components/icons/ShareIcon"; import Button from "../components/ui/Button"; import FilledHeartIcon from "../components/icons/FilledHeartIcon"; @@ -23,7 +23,7 @@ function UnitPage() { params.complexName! )}` ) - .json(), + .json(), }); const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore(); diff --git a/src/stores/useFavoritesUnitsStore.ts b/src/stores/useFavoritesUnitsStore.ts index 9a8476e..8fb5cae 100644 --- a/src/stores/useFavoritesUnitsStore.ts +++ b/src/stores/useFavoritesUnitsStore.ts @@ -1,18 +1,18 @@ -import { create } from 'zustand'; -import { IUnit } from '../types/IUnit'; -import { persist } from 'zustand/middleware'; +import { create } from "zustand"; +import { Unit } from "../types/IUnit"; +import { persist } from "zustand/middleware"; export interface FavoriteStore { - favoriteUnits: IUnit[]; - setFavoriteUnits: (units: IUnit[]) => void; + favoriteUnits: Unit[]; + setFavoriteUnits: (units: Unit[]) => void; } export const useFavoritesUnitsStore = create()( persist( (set) => ({ favoriteUnits: [], - setFavoriteUnits: (units: IUnit[]) => set({ favoriteUnits: units }), + setFavoriteUnits: (units: Unit[]) => set({ favoriteUnits: units }), }), - { name: 'favorites' } + { name: "favorites" } ) ); diff --git a/src/stores/usePopupStore.ts b/src/stores/usePopupStore.ts index d30f6e6..a585903 100644 --- a/src/stores/usePopupStore.ts +++ b/src/stores/usePopupStore.ts @@ -5,6 +5,8 @@ interface PopupStore { setPopup: (popup: React.ReactNode) => void; position: { x: number; y: number }; setPosition: (position: { x: number; y: number }) => void; + side: "left" | "right" | "top" | "bottom"; + setSide: (side: "left" | "right" | "top" | "bottom") => void; } export const usePopupStore = create((set) => ({ @@ -12,4 +14,6 @@ export const usePopupStore = create((set) => ({ setPopup: (popup: React.ReactNode) => set({ popup }), position: { x: 0, y: 0 }, setPosition: (position: { x: number; y: number }) => set({ position }), + side: "left", + setSide: (side: "left" | "right" | "top" | "bottom") => set({ side }), })); diff --git a/src/types/IUnit.ts b/src/types/IUnit.ts index dbb163c..e8e0ecb 100644 --- a/src/types/IUnit.ts +++ b/src/types/IUnit.ts @@ -1,4 +1,4 @@ -export interface IUnit { +export interface Unit { id: string; unitNo: string; project: string;