diff --git a/src/app/components/MapDataMenu.js b/src/app/components/MapDataMenu.js
index d1d4d4a..684b858 100644
--- a/src/app/components/MapDataMenu.js
+++ b/src/app/components/MapDataMenu.js
@@ -219,10 +219,10 @@ function ListDataOptions(
height: 36,
justifyContent: "center",
borderRadius: 6,
- backgroundColor: item ? colors.activated : colors.notActivated,
+ backgroundColor: !item ? colors.activated : colors.notActivated,
}}
>
- {item ? "ADICIONAR" : "REMOVER"}
+ {!item ? "ADICIONAR" : "REMOVER"}
@@ -243,45 +243,31 @@ function DataOriginOptions({
flexDirection: "column",
}}
>
-
+
- {dataOptions[dataOriginToShow].map((option) =>
- ListDataOptions(
- dataOptionsToShow,
- dataOriginToShow,
- setDataOptionsToShow,
- option
- )
- )}
-
+ {dataOptions[dataOriginToShow].map((option) =>
+ ListDataOptions(
+ dataOptionsToShow,
+ dataOriginToShow,
+ setDataOptionsToShow,
+ option
+ )
+ )}
+
);
}
-function DataMenuBody({ setShowModal }) {
+function DataMenuBody({
+ setShowModal,
+ dataOptionsToShow,
+ setDataOptionsToShow,
+}) {
const [dataOriginToShow, setDataOriginToShow] = useState("oficial");
- const [dataOptionsToShow, setDataOptionsToShow] = useState({
- oficial: {
- automaticPluviometer: false,
- susceptibilityAreas: false,
- },
- citzen: {
- floodRisk: false,
- pluviometer: true,
- rain: false,
- floodZones: true,
- riverFlood: true,
- },
- });
return (
-
+
);
}
-function ModalOpenBtn({setShowModal}) {
+function ModalOpenBtn({ setShowModal }) {
return (
- setShowModal()}
- >
+ setShowModal()}>
+ alignItems: "center",
+ }}
+ >
VISUALIZAR DADOS NO MAPA
-
+
);
}
-export default function MapDataMenu(props) {
+export default function MapDataMenu({
+ dataOptionsToShow,
+ setDataOptionsToShow,
+}) {
const [showModal, setShowModal] = useState(null);
return (
-
-
- setShowModal(true)}/>
+
+ setShowModal(true)} />
-
+
);
diff --git a/src/app/components/MapMarkerList.js b/src/app/components/MapMarkerList.js
index 21a0cc0..f2d3862 100644
--- a/src/app/components/MapMarkerList.js
+++ b/src/app/components/MapMarkerList.js
@@ -18,14 +18,13 @@ function isRequestedValue(
}
function MapMarkerList({
- reload = null,
+ markers,
renderRain = true,
renderFlood = true,
renderRiver = true,
renderPluviometer = true,
renderOfficialPluviometer = true,
}) {
- const markers = useMarkers(reload);
// FIXME: Resolve this later!!!
return markers.markers;
diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js
index d3af333..5ac9e01 100644
--- a/src/app/components/map/OpenStreetMap.js
+++ b/src/app/components/map/OpenStreetMap.js
@@ -9,6 +9,7 @@ import {
import MapModal from "../MapModal";
import html_content from "./Map.js";
import MapDataMenu from "../MapDataMenu";
+import {MapMarkerList} from "../MapMarkerList";
function bindEventsToListeners(
@@ -37,16 +38,35 @@ function notEmpy(lista) {
}
export default function OpenStreetMap({
- markersList,
+ markers,
clickListener,
moveEndListener,
isForm=false
}) {
+ const [dataOptionsToShow, setDataOptionsToShow] = useState({
+ oficial: {
+ automaticPluviometer: false,
+ susceptibilityAreas: false,
+ },
+ citzen: {
+ floodRisk: false,
+ pluviometer: true,
+ rain: false,
+ floodZones: true,
+ riverFlood: true,
+ },
+ });
+
+
+ console.log(dataOptionsToShow)
+
const [mapRef, setMapRef] = useState(null);
const webviewContent = html_content;
const [markerListener, setMarkerListener] = useState(null);
const viewFunction = setViewCode(global.location.lat, global.location.long);
+ const markersList = MapMarkerList({markers: markers, renderRain: true})
+
markersList &&
mapRef &&
notEmpy(markersList) &&
@@ -90,7 +110,11 @@ export default function OpenStreetMap({
setShowModal={setMarkerListener}
markers={markersList}
/>
-
+
+
+
)}
);
diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js
index 8948347..60ce4e5 100644
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@@ -4,10 +4,12 @@ import OpenStreetMap from "../components/map/OpenStreetMap";
import attachFocusToQuery from "../hooks/useFocus";
import { MapMarkerList } from "../components/MapMarkerList";
import formsApi from "../api/getforms";
+import useMarkers from "../hooks/selectFromDB";
export default function MapFeedScreen() {
const focusChanged = attachFocusToQuery();
const [error, setError] = useState(false);
+ const markers = useMarkers(focusChanged);
// useEffect(() => {
// loadForms();
@@ -27,7 +29,7 @@ export default function MapFeedScreen() {
return (