fix(SW-3203): Added property id to pointOfInterestSchema to handle identical names
Approved-by: Matilda Landström Approved-by: Chuma Mcphoy (We Ahead)
This commit is contained in:
@@ -31,8 +31,8 @@ export default function PoiMapMarkers({
|
||||
}: PoiMapMarkersProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
function toggleActivePoi(poiName: string) {
|
||||
onActivePoiChange?.(activePoi === poiName ? null : poiName)
|
||||
function toggleActivePoi(poiId: string) {
|
||||
onActivePoiChange?.(activePoi === poiId ? null : poiId)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
@@ -45,22 +45,22 @@ export default function PoiMapMarkers({
|
||||
|
||||
{pointsOfInterest.map((poi) => (
|
||||
<AdvancedMarker
|
||||
key={poi.name + poi.categoryName}
|
||||
key={poi.id}
|
||||
className={styles.advancedMarker}
|
||||
position={poi.coordinates}
|
||||
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
|
||||
zIndex={activePoi === poi.name ? 2 : 0}
|
||||
onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)}
|
||||
zIndex={activePoi === poi.id ? 2 : 0}
|
||||
onMouseEnter={() => onActivePoiChange?.(poi.id ?? null)}
|
||||
onMouseLeave={() => onActivePoiChange?.(null)}
|
||||
onClick={() => toggleActivePoi(poi.name ?? '')}
|
||||
onClick={() => toggleActivePoi(poi.id ?? '')}
|
||||
>
|
||||
<span
|
||||
className={`${styles.poi} ${activePoi === poi.name ? styles.active : ''}`}
|
||||
className={`${styles.poi} ${activePoi === poi.id ? styles.active : ''}`}
|
||||
>
|
||||
<PoiMarker
|
||||
group={poi.group}
|
||||
categoryName={poi.categoryName}
|
||||
size={activePoi === poi.name ? 'large' : 'small'}
|
||||
size={activePoi === poi.id ? 'large' : 'small'}
|
||||
/>
|
||||
<span className={styles.poiLabel}>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
|
||||
@@ -16,6 +16,7 @@ export const pointOfInterestSchema = z
|
||||
name: nullableStringValidator,
|
||||
})
|
||||
.transform((poi) => ({
|
||||
id: `${poi.name}-${poi.location.latitude}-${poi.location.longitude}`,
|
||||
categoryName: poi.category.name,
|
||||
coordinates: {
|
||||
lat: poi.location.latitude,
|
||||
|
||||
Reference in New Issue
Block a user