From 08e71a8dc69e67ddaaf97c216fc8ead2b133b7bd Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Thu, 21 Nov 2024 14:15:51 +0100 Subject: [PATCH] fix(946) Center from town name instead of calculate center --- .../select-hotel/@modal/(.)map/page.tsx | 4 +++- .../Map/DynamicMap/Sidebar/index.tsx | 11 ++++++++-- .../HotelPage/Map/DynamicMap/index.tsx | 4 ++-- .../SelectHotel/SelectHotelMap/index.tsx | 14 ++++++------- .../SelectHotel/SelectHotelMap/utils.ts | 17 ---------------- .../InteractiveMap/HotelMapContent/index.tsx | 4 ++-- lib/trpc/memoizedRequests/index.ts | 6 ++++++ server/routers/hotels/input.ts | 3 +++ server/routers/hotels/output.ts | 20 ++++++++++--------- server/routers/hotels/query.ts | 17 ++++++++++++++++ server/routers/hotels/utils.ts | 7 ++++--- .../hotelReservation/selectHotel/map.ts | 1 + 12 files changed, 64 insertions(+), 44 deletions(-) delete mode 100644 components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx index 7c5573536..cdf236184 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx @@ -1,7 +1,7 @@ import { notFound } from "next/navigation" import { env } from "@/env/server" -import { getLocations } from "@/lib/trpc/memoizedRequests" +import { getCityCoordinates, getLocations } from "@/lib/trpc/memoizedRequests" import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils" import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap" @@ -58,6 +58,7 @@ export default async function SelectHotelMapPage({ const hotelPins = getHotelPins(hotels) const filterList = getFiltersFromHotels(hotels) + const cityCoordinates = await getCityCoordinates({ city: city.name }) return ( @@ -67,6 +68,7 @@ export default async function SelectHotelMapPage({ mapId={googleMapId} hotels={hotels} filterList={filterList} + cityCoordinates={cityCoordinates} /> ) diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx index db979bf47..d58cb10fc 100644 --- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx +++ b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx @@ -60,13 +60,20 @@ export default function Sidebar({ } } - function handleMouseEnter(poiName: string) { + function handleMouseEnter(poiName: string | undefined) { + if (!poiName) return + if (!isClicking) { onActivePoiChange(poiName) } } - function handlePoiClick(poiName: string, poiCoordinates: Coordinates) { + function handlePoiClick( + poiName: string | undefined, + poiCoordinates: Coordinates + ) { + if (!poiName || !poiCoordinates) return + setIsClicking(true) toggleFullScreenSidebar() onActivePoiChange(poiName) diff --git a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx index 969b24588..6af68db43 100644 --- a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx +++ b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx @@ -113,7 +113,7 @@ export default function DynamicMap({ activePoi={activePoi} hotelName={hotelName} pointsOfInterest={pointsOfInterest} - onActivePoiChange={setActivePoi} + onActivePoiChange={(poi) => setActivePoi(poi ?? null)} coordinates={coordinates} /> setActivePoi(poi ?? null)} mapId={mapId} /> diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx index 4fe186988..0d1d58eee 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx @@ -7,7 +7,7 @@ import { useMediaQuery } from "usehooks-ts" import { selectHotel } from "@/constants/routes/hotelReservation" -import { ArrowUpIcon, CloseIcon, CloseLargeIcon } from "@/components/Icons" +import { CloseIcon, CloseLargeIcon } from "@/components/Icons" import InteractiveMap from "@/components/Maps/InteractiveMap" import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton" import Button from "@/components/TempDesignSystem/Button" @@ -15,7 +15,6 @@ import useLang from "@/hooks/useLang" import FilterAndSortModal from "../FilterAndSortModal" import HotelListing from "./HotelListing" -import { getCentralCoordinates } from "./utils" import styles from "./selectHotelMap.module.css" @@ -27,6 +26,7 @@ export default function SelectHotelMap({ mapId, hotels, filterList, + cityCoordinates, }: SelectHotelMapProps) { const searchParams = useSearchParams() const router = useRouter() @@ -36,15 +36,13 @@ export default function SelectHotelMap({ const [activeHotelPin, setActiveHotelPin] = useState(null) const [showBackToTop, setShowBackToTop] = useState(false) - const centralCoordinates = getCentralCoordinates(hotelPins) - - const coordinates = isAboveMobile - ? centralCoordinates - : { ...centralCoordinates, lat: centralCoordinates.lat - 0.006 } - const selectHotelParams = new URLSearchParams(searchParams.toString()) const selectedHotel = selectHotelParams.get("selectedHotel") + const coordinates = isAboveMobile + ? cityCoordinates + : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 } + useEffect(() => { if (selectedHotel) { setActiveHotelPin(selectedHotel) diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts b/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts deleted file mode 100644 index 7a4c32ecc..000000000 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map" - -export function getCentralCoordinates(hotels: HotelPin[]) { - const centralCoordinates = hotels.reduce( - (acc, pin) => { - acc.lat += pin.coordinates.lat - acc.lng += pin.coordinates.lng - return acc - }, - { lat: 0, lng: 0 } - ) - - centralCoordinates.lat /= hotels.length - centralCoordinates.lng /= hotels.length - - return centralCoordinates -} diff --git a/components/Maps/InteractiveMap/HotelMapContent/index.tsx b/components/Maps/InteractiveMap/HotelMapContent/index.tsx index 04c796c2c..662c66667 100644 --- a/components/Maps/InteractiveMap/HotelMapContent/index.tsx +++ b/components/Maps/InteractiveMap/HotelMapContent/index.tsx @@ -35,9 +35,9 @@ export default function HotelMapContent({ position={poi.coordinates} anchorPoint={AdvancedMarkerAnchorPoint.CENTER} zIndex={activePoi === poi.name ? 2 : 0} - onMouseEnter={() => onActivePoiChange?.(poi.name)} + onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)} onMouseLeave={() => onActivePoiChange?.(null)} - onClick={() => toggleActivePoi(poi.name)} + onClick={() => toggleActivePoi(poi.name ?? "")} > ({ name: poi.name, @@ -215,8 +215,8 @@ export const pointOfInterestSchema = z categoryName: poi.category.name, group: getPoiGroupByCategoryName(poi.category.name), coordinates: { - lat: poi.location.latitude, - lng: poi.location.longitude, + lat: poi.location?.latitude ?? 0, + lng: poi.location?.longitude ?? 0, }, })) @@ -463,7 +463,9 @@ export const getHotelDataSchema = z.object({ parking: z.array(parkingSchema), pointsOfInterest: z .array(pointOfInterestSchema) - .transform((pois) => pois.sort((a, b) => a.distance - b.distance)), + .transform((pois) => + pois.sort((a, b) => (a.distance ?? 0) - (b.distance ?? 0)) + ), ratings: ratingsSchema, rewardNight: rewardNightSchema, restaurantImages: facilitySchema.optional(), diff --git a/server/routers/hotels/query.ts b/server/routers/hotels/query.ts index eb31aacb6..31ffd63f1 100644 --- a/server/routers/hotels/query.ts +++ b/server/routers/hotels/query.ts @@ -30,6 +30,7 @@ import { import { getVerifiedUser, parsedUser } from "../user/query" import { getBreakfastPackageInputSchema, + getCityCoordinatesInputSchema, getHotelDataInputSchema, getHotelsAvailabilityInputSchema, getRatesInputSchema, @@ -1078,4 +1079,20 @@ export const hotelQueryRouter = router({ ) }), }), + map: router({ + get: serviceProcedure + .input(getCityCoordinatesInputSchema) + .query(async function ({ input }) { + const apiKey = process.env.GOOGLE_STATIC_MAP_KEY + const { city } = input + const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(city)}&key=${apiKey}` + + const response = await fetch(url) + const data = await response.json() + console.log("DATA_RESPONSE", data) + const { lat, lng } = data.results[0].geometry.location + + return { lat, lng } + }), + }), }) diff --git a/server/routers/hotels/utils.ts b/server/routers/hotels/utils.ts index c3e785a59..3e5b5f5e4 100644 --- a/server/routers/hotels/utils.ts +++ b/server/routers/hotels/utils.ts @@ -12,13 +12,14 @@ import { type Countries, } from "./output" -import type { Lang } from "@/constants/languages" -import type { Endpoint } from "@/lib/api/endpoints" import type { RequestOptionsWithOutBody } from "@/types/fetch" import { PointOfInterestGroupEnum } from "@/types/hotel" import { HotelLocation } from "@/types/trpc/routers/hotel/locations" +import type { Lang } from "@/constants/languages" +import type { Endpoint } from "@/lib/api/endpoints" -export function getPoiGroupByCategoryName(category: string) { +export function getPoiGroupByCategoryName(category: string | undefined) { + if (!category) return PointOfInterestGroupEnum.LOCATION switch (category) { case "Airport": case "Bus terminal": diff --git a/types/components/hotelReservation/selectHotel/map.ts b/types/components/hotelReservation/selectHotel/map.ts index 490f8d06e..4ec21f86f 100644 --- a/types/components/hotelReservation/selectHotel/map.ts +++ b/types/components/hotelReservation/selectHotel/map.ts @@ -22,6 +22,7 @@ export interface SelectHotelMapProps { mapId: string hotels: HotelData[] filterList: CategorizedFilters + cityCoordinates: Coordinates } type ImageSizes = z.infer