Working approach to view all four submitted values in map.

src/app/database/databaseLoader.js

@@ -35,6 +35,7 @@ function insertFloodZone({ images, description, passable, location }) {
 
 function insertPluviometerData({ pluviometer, images, date, location }) {
   const query = `INSERT INTO Pluviometer(Date, Images, Latitude, Longitude, Precipitation) VALUES(?, ?, ?, ?, ?);`;
+
   if (location === undefined) {
     console.debug("undefined location");
     return;
@@ -45,9 +46,11 @@ function insertPluviometerData({ pluviometer, images, date, location }) {
     JSON.stringify(images),
     parseFloat(location["latitude"]),
     parseFloat(location["longitude"]),
-    parseInt(pluviometer),
+    parseFloat(pluviometer),
   ];
 
+  console.log(values);
+
   transaction(global.userDataBase, query, values);
 }
 

src/app/hooks/selectFromDB.js

@@ -1,14 +1,19 @@
-import { useEffect, useState } from "react";
+import { useEffect, useReducer } from "react";
 import "../config/globals";
 
 const floodZoneAsset = require("../assets/pontos_alagamento_peq.png");
 
+// NOTE: For debug pourposes
+var offset = 0.001;
+var displacement = 0;
+
 function partsePluviometer(row) {
+  displacement += offset;
   return {
-    key: "999",
+    key: 999,
     title: "pluviometro",
     coordinate: {
-      latitude: row["Latitude"] + 0.5,
+      latitude: row["Latitude"] + displacement,
       longitude: row["Longitude"],
     },
     image: floodZoneAsset,
@@ -17,10 +22,14 @@ function partsePluviometer(row) {
 }
 
 function parseFloodZones(row) {
+  displacement += offset;
   return {
     key: row["Id"],
     title: row["Passable"] == 0 ? "Transponível" : "Intransponível",
-    coordinate: { latitude: row["Latitude"], longitude: row["Longitude"] },
+    coordinate: {
+      latitude: row["Latitude"],
+      longitude: row["Longitude"] + displacement,
+    },
     image: floodZoneAsset,
     description: row["Description"],
   };
@@ -37,31 +46,38 @@ function parseResult(db_result, parseRow) {
   return warnings;
 }
 
-function genericSelect(setState, query, parseFunction) {
+function genericSelect(dispatch, query, parseFunction) {
   useEffect(() => {
     global.userDataBase.transaction((tx) => {
       tx.executeSql(query, [], (tx, results) => {
-        setState(parseResult(results, parseFunction));
+        dispatch({ increment: parseResult(results, parseFunction) });
       });
     });
   }, []);
 }
 
-function useFlood() {
-  const [warnings, setWarnings] = useState([]);
-  const queryFloodZones = "SELECT * FROM FloodZones;";
+const initialState = { markers: [] };
 
-  genericSelect(setWarnings, queryFloodZones, parseFloodZones);
-
-  return warnings;
+function reducer(state = initialState, action) {
+  return {
+    markers: [...state.markers, ...action.increment],
+  };
 }
 
-function usePluviometer() {
-  const [warnings, setWarnings] = useState([]);
-  const queryPluviometer = "SELECT * FROM Pluviometer;";
+function useMarkers() {
+  const [state, dispatch] = useReducer(reducer, initialState);
 
-  genericSelect(setWarnings, queryPluviometer, partsePluviometer);
-  return warnings;
+  const queriesToParsersMapper = [
+    ["SELECT * FROM FloodZones;", parseFloodZones],
+    ["SELECT * FROM Pluviometer;", partsePluviometer],
+  ];
+
+  queriesToParsersMapper.forEach(([query, parser]) => {
+    console.log(query);
+    genericSelect(dispatch, query, parser);
+  });
+
+  return state;
 }
 
-export { useFlood, usePluviometer };
+export default useMarkers;

src/app/screens/MapFeedScreen.js

@@ -5,12 +5,11 @@ import MapView, { Marker } from "react-native-maps";
 import colors from "../config/colors";
 
 import useLocation from "../hooks/useLocation";
-import { useFlood, usePluviometer } from "../hooks/selectFromDB";
+import useMarkers from "../hooks/selectFromDB";
 
 function MapFeedScreen(props) {
   const location = useLocation();
-  const markerFlood = useFlood();
-  // const markerPluviometer = usePluviometer();
+  const markers = useMarkers();
 
   return (
     <View style={styles.container}>
@@ -29,12 +28,9 @@ function MapFeedScreen(props) {
           longitudeDelta: 0.0421,
         }}
       >
-        {markerFlood.map((val) => {
+        {markers.markers.map((val) => {
           return <MapView.Marker {...val} />;
         })}
-        {/* {markerPluviometer.map((val) => {
-          return <MapView.Marker {...val} />;
-        })} */}
       </MapView>
     </View>
   );