Updating MapFeedScreen markers when screen changes its focus to active

src/app/hooks/selectFromDB.js

@@ -1,4 +1,5 @@
 import { useEffect, useReducer } from "react";
+
 import "../config/globals";
 
 const assets = {
@@ -26,7 +27,27 @@ var displacement = 0;
 
 var ID = 0;
 
+var fetched_data = new Map([
+  ["pluv", new Set()],
+  ["flood", new Set()],
+  ["rain", new Set()],
+  ["river", new Set()],
+]);
+
+function is_valid(id, category) {
+  if (fetched_data.get(category).has(id)) {
+    return false;
+  } else {
+    fetched_data.get(category).add(id);
+  }
+  return true;
+}
+
 function partsePluviometer(row) {
+  if (!is_valid(row["Id"], "pluv")) {
+    return null;
+  }
+
   displacement += offset;
   return {
     ID: ++ID,
@@ -41,6 +62,10 @@ function partsePluviometer(row) {
 }
 
 function parseFloodZones(row) {
+  if (!is_valid(row["Id"], "flood")) {
+    return null;
+  }
+
   displacement += offset;
   return {
     ID: ++ID,
@@ -55,6 +80,10 @@ function parseFloodZones(row) {
 }
 
 function parseRiverLevel(row) {
+  if (!is_valid(row["Id"], "river")) {
+    return null;
+  }
+
   displacement += offset;
   const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"];
   const riverIdx = row["RiverIdx"];
@@ -71,6 +100,10 @@ function parseRiverLevel(row) {
 }
 
 function parseRainLevel(row) {
+  if (!is_valid(row["Id"], "rain")) {
+    return null;
+  }
+
   displacement += offset;
   const rainLevel = [
     "Sem chuva",
@@ -98,20 +131,26 @@ function parseResult(db_result, parseRow) {
 
   for (let i = 0; i < db_result.rows.length; ++i) {
     var row = db_result.rows.item(i);
-    warnings.push(parseRow(row));
+    const data = parseRow(row);
+    if (data !== null) {
+      warnings.push(data);
+    }
   }
 
   return warnings;
 }
 
-function genericSelect(dispatch, query, parseFunction) {
+function genericSelect(queriesToParsersMapper, dispatch, isFocused) {
   useEffect(() => {
-    global.userDataBase.transaction((tx) => {
-      tx.executeSql(query, [], (tx, results) => {
-        dispatch({ increment: parseResult(results, parseFunction) });
+    console.log("requesting data");
+    queriesToParsersMapper.forEach(([query, parser]) => {
+      global.userDataBase.transaction((tx) => {
+        tx.executeSql(query, [], (tx, results) => {
+          dispatch({ increment: parseResult(results, parser) });
+        });
       });
     });
-  }, []);
+  }, [isFocused]);
 }
 
 const initialState = { markers: new Set() };
@@ -126,7 +165,7 @@ function reducer(state = initialState, action) {
   };
 }
 
-function useMarkers() {
+function useMarkers(isFocused) {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   const queriesToParsersMapper = [
@@ -136,10 +175,7 @@ function useMarkers() {
     ["SELECT * FROM RainLevel;", parseRainLevel],
   ];
 
-  queriesToParsersMapper.forEach(([query, parser]) => {
-    console.log(query);
-    genericSelect(dispatch, query, parser);
-  });
+  genericSelect(queriesToParsersMapper, dispatch, isFocused);
 
   return state;
 }

src/app/hooks/useFocus.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { useIsFocused } from "@react-navigation/native";
+
+/*
+  
+    NOTE: This hook is used this way because react-navigation/native
+    IsFocused change its state when screen focus changes, so it would
+    trigger an event to query the database when screen loose focus.
+    But, what we want is to change its focus only when it is being
+    focused.
+
+  */
+
+export default function attachFocusToQuery() {
+  const isFocused = useIsFocused();
+  const [hasToQuery, setHasToQuery] = useState(null);
+
+  useEffect(() => {
+    if (isFocused == true) {
+      setHasToQuery(!hasToQuery);
+    }
+  }, [isFocused]);
+
+  return hasToQuery;
+}

src/app/screens/MapFeedScreen.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import MapView from "react-native-maps";
 
@@ -7,6 +7,7 @@ import colors from "../config/colors";
 import useLocation from "../hooks/useLocation";
 import useMarkers from "../hooks/selectFromDB";
 import MapMarker from "../components/MapMarker";
+import attachFocusToQuery from "../hooks/useFocus";
 
 function MapFeedScreen(props) {
   const location = useLocation({
@@ -14,7 +15,8 @@ function MapFeedScreen(props) {
     longitude: -51.3948396,
   });
 
-  const markers = useMarkers();
+  const hasToQuery = attachFocusToQuery();
+  const markers = useMarkers(hasToQuery);
 
   return (
     <View style={styles.container}>