From a9b95f00aaa20e7e470c206782e24ea373149dbc Mon Sep 17 00:00:00 2001
From: szymonswiergosz <szymon.swiergosz@gmail.com>
Date: Tue, 24 Sep 2024 20:04:17 +0200
Subject: [PATCH] Update map view only if necessery and add aria-label to each
 marker

---
 .../src/components/MapPin/MapPin.tsx          | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/nursery-nav/src/components/MapPin/MapPin.tsx b/src/nursery-nav/src/components/MapPin/MapPin.tsx
index 8f0b4a8..14541f8 100644
--- a/src/nursery-nav/src/components/MapPin/MapPin.tsx
+++ b/src/nursery-nav/src/components/MapPin/MapPin.tsx
@@ -1,12 +1,16 @@
+import { useEffect } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { useNavigate, generatePath } from 'react-router-dom';
 import { Marker, useMap } from 'react-leaflet';
-import { Crib } from '@mui/icons-material';
+
 import { divIcon } from 'leaflet';
-import { renderToStaticMarkup } from 'react-dom/server';
+import { Crib } from '@mui/icons-material';
+
 import { InstitutionType } from '../../shared/nursery.interface';
-import './MapPin.css';
-import { useNavigate, generatePath } from 'react-router-dom';
 import PathConstants from '../../shared/pathConstants';
 
+import './MapPin.css';
+
 export interface MapPinProps {
 	institutionType: InstitutionType;
 	id: number;
@@ -20,11 +24,12 @@ export default function MapPin(props: MapPinProps) {
 	const map = useMap();
 	const navigate = useNavigate();
 
-	if (props.selectedLocationLat !== undefined && props.selectedLocationLon !== undefined) {
-		map.setView([props.selectedLocationLat, props.selectedLocationLon], 18, {
-			animate: true
-		});
-	}
+	// Update map view only if necessary
+	useEffect(() => {
+		if (props.selectedLocationLat !== undefined && props.selectedLocationLon !== undefined) {
+			map.setView([props.selectedLocationLat, props.selectedLocationLon], 18, { animate: true });
+		}
+	}, [props.selectedLocationLat, props.selectedLocationLon, map]);
 
 	const position: [number, number] = [props.latitude, props.longitude];
 	const institutionType = props.institutionType === InstitutionType.NURSERY ? 'nursery' : 'childclub';
@@ -32,6 +37,7 @@ export default function MapPin(props: MapPinProps) {
 
 	return (
 		<Marker
+			aria-label={`Details for ${institutionType} with ID ${props.id}`}
 			eventHandlers={{
 				click: () => {
 					navigate(generatePath(PathConstants.INSTITUTION_DETAILS, { id: props.id }));