Inverting logic in DataMenu and starting to apply filters in map

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,
             }}
           >
-            <Text style={styles.text}>{item ? "ADICIONAR" : "REMOVER"}</Text>
+            <Text style={styles.text}>{!item ? "ADICIONAR" : "REMOVER"}</Text>
           </View>
         </TouchableOpacity>
       </View>
@@ -243,10 +243,7 @@ function DataOriginOptions({
         flexDirection: "column",
       }}
     >
-      <ScrollView
-        height={270}
-        automaticallyAdjustContentInsets={true}
-      >
+      <ScrollView height={270} automaticallyAdjustContentInsets={true}>
         <View>
           {dataOptions[dataOriginToShow].map((option) =>
             ListDataOptions(
@@ -262,26 +259,15 @@ function DataOriginOptions({
   );
 }
 
-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 (
-    <View
-      backgroundColor={colors.grayBG}
-    >
+    <View backgroundColor={colors.grayBG}>
       <DataMenuHeader setShowModal={setShowModal} />
       <DataOriginSelector
         dataOriginToShow={dataOriginToShow}
@@ -289,49 +275,52 @@ function DataMenuBody({ setShowModal }) {
       />
       <DataOriginOptions
         dataOptionsToShow={dataOptionsToShow}
-        dataOriginToShow={dataOriginToShow}
         setDataOptionsToShow={setDataOptionsToShow}
+        dataOriginToShow={dataOriginToShow}
       />
     </View>
   );
 }
 
-function ModalOpenBtn({setShowModal}) {
+function ModalOpenBtn({ setShowModal }) {
   return (
-      <TouchableOpacity
-        onPress={() => setShowModal()}
-      >
+    <TouchableOpacity onPress={() => setShowModal()}>
       <View
         style={{
           width: "100%",
           height: 48,
           backgroundColor: colors.primary,
           justifyContent: "center",
-          alignItems: "center"
-        }}>
+          alignItems: "center",
+        }}
+      >
         <Text style={styles.text}>VISUALIZAR DADOS NO MAPA</Text>
       </View>
     </TouchableOpacity>
   );
 }
 
-export default function MapDataMenu(props) {
+export default function MapDataMenu({
+  dataOptionsToShow,
+  setDataOptionsToShow,
+}) {
   const [showModal, setShowModal] = useState(null);
   return (
-    <View
-    >
-
-      <ModalOpenBtn
-        setShowModal={() => setShowModal(true)}/>
+    <View>
+      <ModalOpenBtn setShowModal={() => setShowModal(true)} />
 
       <SelfClosingModal
-        style={{position:"absolute"}}
+        style={{ position: "absolute" }}
         animationType="slide"
         transparent={true}
         showModal={showModal}
         setShowModal={setShowModal}
       >
-        <DataMenuBody setShowModal={setShowModal} />
+        <DataMenuBody
+          setShowModal={setShowModal}
+          dataOptionsToShow={dataOptionsToShow}
+          setDataOptionsToShow={setDataOptionsToShow}
+        />
       </SelfClosingModal>
     </View>
   );

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;

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}
         />
-        <MapDataMenu/>
+
+        <MapDataMenu
+          dataOptionsToShow={dataOptionsToShow}
+          setDataOptionsToShow={setDataOptionsToShow}/>
+
       </View>)}
     </View>
   );

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 (
     <View style={styles.container}>
       <OpenStreetMap
-        markersList={MapMarkerList({ reload: focusChanged, renderRain: true })}
+        markers={markers}
         centerUserLocation={true}
       />
     </View>