Refactoring MapMarkers to a new component

src/app/components/MapMarkerList.js

@@ -0,0 +1,48 @@
+import { StyleSheet, View } from "react-native";
+import React from "react";
+import useMarkers from "../hooks/selectFromDB";
+import MapMarker from "../components/MapMarker";
+
+function isRequestedValue(
+  item,
+  renderRain,
+  renderFlood,
+  renderRiver,
+  renderPluviometer
+) {
+  return (
+    (item.name == "pluviometer" && renderPluviometer) ||
+    (item.name == "rain" && renderRain) ||
+    (item.name == "river" && renderRiver) ||
+    (item.name == "flood" && renderFlood)
+  );
+}
+
+function MapMarkerList({
+  reload = null,
+  renderRain = true,
+  renderFlood = true,
+  renderRiver = true,
+  renderPluviometer = true,
+}) {
+  const markers = useMarkers(reload);
+  return (
+    <>
+      {[...markers.markers]
+        .filter((item) =>
+          isRequestedValue(
+            item,
+            renderRain,
+            renderFlood,
+            renderRiver,
+            renderPluviometer
+          )
+        )
+        .map(({ ID, ...val }) => {
+          return <MapMarker key={ID.toString()} {...val} />;
+        })}
+    </>
+  );
+}
+
+export { MapMarkerList };

src/app/hooks/selectFromDB.js

@@ -53,6 +53,7 @@ function partsePluviometer(row) {
   // displacement += offset;
   const i = {
     ID: ++ID,
+    name: "pluviometer",
     title: "Pluviometro",
     coordinate: {
       latitude: row["Latitude"] + displacement,
@@ -77,6 +78,7 @@ function parseFloodZones(row) {
   // displacement += offset;
   return {
     ID: ++ID,
+    name: "flood",
     title: row["Passable"] == 1 ? "Transponível" : "Intransponível",
     coordinate: {
       latitude: row["Latitude"],
@@ -103,6 +105,7 @@ function parseRiverLevel(row) {
   const riverIdx = row["RiverIdx"];
   return {
     ID: ++ID,
+    name: "river",
     title: "Rio " + riverLevel[riverIdx],
     coordinate: {
       latitude: row["Latitude"],
@@ -135,6 +138,7 @@ function parseRainLevel(row) {
 
   return {
     ID: ++ID,
+    name: "rain",
     title: rainLevel[rainIdx],
     coordinate: {
       latitude: row["Latitude"],

src/app/screens/MapFeedScreen.js

@@ -4,18 +4,15 @@ import MapView from "react-native-maps";
 
 import colors from "../config/colors";
 import { screen_width, screen_height } from "../config/dimensions";
-import useMarkers from "../hooks/selectFromDB";
-import MapMarker from "../components/MapMarker";
 import attachFocusToQuery from "../hooks/useFocus";
 import { CurrentLocationContext } from "../context/CurrentLocationContext";
 import HeaderBarMenu from "../components/HeaderBarMenu";
+import { MapMarkerList } from "../components/MapMarkerList";
 
 function MapFeedScreen(props) {
   const context = useContext(CurrentLocationContext);
   const location = context.currentCoordinates;
-
-  const hasToQuery = attachFocusToQuery();
-  const markers = useMarkers(hasToQuery);
+  const focusChanged = attachFocusToQuery();
 
   const default_location = {
     latitude: -12.901799,
@@ -44,9 +41,7 @@ function MapFeedScreen(props) {
           ...lat_long_delta,
         }}
       >
-        {[...markers.markers].map(({ ID, ...val }) => {
-          return <MapMarker key={ID.toString()} {...val} />;
-        })}
+        <MapMarkerList reload={focusChanged} />
       </MapView>
     </View>
   );