Refactoring MapFeedScreen to hook model

src/app/hooks/selectFromDB.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import "../config/globals";
+
+const floodZoneAsset = require("../assets/pontos_alagamento_peq.png");
+
+function parseFloodZones(row) {
+  return {
+    key: row["Id"],
+    title: row["Passable"] == 0 ? "Transponível" : "Intransponível",
+    coordinate: { latitude: row["Latitude"], longitude: row["Longitude"] },
+    image: floodZoneAsset,
+    description: row["Description"],
+  };
+}
+
+function parseResult(db_result, parseRow) {
+  var warnings = [];
+
+  for (let i = 0; i < db_result.rows.length; ++i) {
+    var row = db_result.rows.item(i);
+    warnings.push(parseRow(row));
+  }
+
+  return warnings;
+}
+
+function genericSelect(setState, query, parseFunction) {
+  useEffect(() => {
+    global.userDataBase.transaction((tx) => {
+      tx.executeSql(query, [], (tx, results) => {
+        setState(parseResult(results, parseFunction));
+      });
+    });
+  }, []);
+}
+
+function useSelect() {
+  const [warnings, setWarnings] = useState([]);
+  const query = "SELECT * FROM FloodZones;";
+
+  genericSelect(setWarnings, query, parseFloodZones);
+
+  return warnings;
+}
+
+export default useSelect;

src/app/hooks/useLocation.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import * as Location from "expo-location";
 
 export default useLocation = () => {
-  const [location, setLocation] = useState();
+  const [location, setLocation] = useState({ longitude: 0.0, latitude: 0.0 });
 
   const getLocation = async () => {
     try {

src/app/screens/MapFeedScreen.js

@@ -3,47 +3,30 @@ import { StyleSheet, View } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 
 import colors from "../config/colors";
-import "../config/globals";
 
-function parseResult(db_result) {
-  var warnings = [];
-
-  for (let i = 0; i < db_result.rows.length; ++i) {
-    var row = db_result.rows.item(i);
-    warnings.push({
-      key: row["Id"],
-      title: row["Passable"] == 0 ? "Transponível" : "Intransponível",
-      coordinate: { latitude: row["Latitude"], longitude: row["Longitude"] },
-      image: require("../assets/pontos_alagamento_peq.png"),
-      description: row["Description"],
-    });
-  }
-
-  return warnings;
-}
+import useLocation from "../hooks/useLocation";
+import useSelect from "../hooks/selectFromDB";
 
 function MapFeedScreen(props) {
-  const [warnings, setWarnings] = useState([]);
-
-  useEffect(() => {
-    global.userDataBase.transaction((tx) => {
-      tx.executeSql("SELECT * FROM FloodZones;", [], (tx, results) => {
-        setWarnings(parseResult(results));
-      });
-    });
-  }, []);
+  const location = useLocation();
+  const warnings = useSelect();
 
   return (
     <View style={styles.container}>
       <MapView
         style={styles.mapStyle}
         initialRegion={{
-          // TODO: make this flexible
           latitude: -22.1070263,
           longitude: -51.3948396,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421,
         }}
+        region={{
+          latitude: location["latitude"],
+          longitude: location["longitude"],
+          latitudeDelta: 0.0922,
+          longitudeDelta: 0.0421,
+        }}
       >
         {warnings.map((val) => {
           return <MapView.Marker {...val} />;