add active filters to the map

src/components/Map/MapComponent.js

@@ -63,6 +63,7 @@ function MapComponent(props) {
     }
 
     const [mapTitleData, setMapTitleData] = useState([])
+    const [selectedFilters, setSelectedFilters] = useState([])
 
     useEffect(() => {
         ConsultHandler.fetchVar(
@@ -84,6 +85,35 @@ function MapComponent(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [filtersLocation, filtersEducation, indicador, indicador.route, indicador.routeDim]);
 
+    useEffect(() => {
+        const filters = Object.entries(filtersEducation)
+
+        const mappedFilters = filters.map((item) => {
+            if (item[1].value.length !== 0) {
+                let chosenFilters = []
+                for (let idx in item[1].value) {
+                    const filterFound = item[1].data.find(filterItem => filterItem.id === item[1].value[idx])
+                    chosenFilters = [ ...chosenFilters, filterFound.name ]
+                }
+                return chosenFilters
+            } else {
+                return []
+            }
+        })
+
+        let formattedFilters = ''
+
+        for (let idx in mappedFilters) {
+            for (let jdx in mappedFilters[idx]) {
+                formattedFilters = formattedFilters === '' ?
+                mappedFilters[idx][jdx] :
+                formattedFilters + ', ' + mappedFilters[idx][jdx]
+            }
+        }
+
+        setSelectedFilters(formattedFilters)
+    }, [filtersEducation])
+
     useEffect(() => {
         if (!mapLoading && mapData.length > 0) {
             setFormationData(mapData)
@@ -381,6 +411,12 @@ function MapComponent(props) {
                         color="deepskyblue"
                     />
                 </div>
+                {
+                    selectedFilters === '' ? null :
+                    <div className="active-filters">
+                        <p><strong>Filtros ativos: </strong>{selectedFilters}</p>
+                    </div>
+                }
                 <Map ref={mapRef} bounds={mapBounds} minZoom={7} zoomSnap={0.1}>
                     <TileLayer
                         attribution="<p>&amp;copy <a href='http://osm.c3sl.ufpr.br/'>OpenStreetMap</a> contributors</p>"

src/css/Map/MapComponent.scss

 .map {
     z-index: 0;
-    height: 650px;
+    // height: 650px;
     width: 100%;
     max-width: 930px;
+
+    .active-filters {
         border-radius: 10px;
         box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+        padding: 10px 20px;
+        margin-bottom: 10px;
+
+        p {
+            font-family: 'Montserrat';
+            font-size: 14px;
+            margin: 0;
+            padding: 0;
+        }
+    }
 
     .leaflet-container {
+        border-radius: 10px;
+        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
         border-radius: 10px;
         height: 650px;