Failed approach to view all four submitted values in map.

src/App.js

@@ -6,20 +6,13 @@ import AppNavigator from "./app/navigation/AppNavigator";
 import "./app/config/globals.js";
 import openDatabase from "./app/database/database-connection";
 
-import SharingFloodZonesScreen from "./app/screens/SharingFloodZonesScreen";
 import initDatabase from "./app/database/database-init";
-import RainSharingDataScreen from "./app/screens/RainSharingDataScreen";
-import RainSharingDataNavigator from "./app/navigation/RainSharingDataNavigator";
-import PluviometerSharingDataScreen from "./app/screens/PluviometerSharingDataScreen";
 
 export default function App() {
   global.userDataBase = openDatabase();
   initDatabase(global.userDataBase);
 
   return (
-    //<SharingFloodZonesScreen/>
-    //<RainSharingDataScreen/>
-    //<PluviometerSharingDataScreen/>
     <NavigationContainer theme={navigationTheme}>
       <AppNavigator />
     </NavigationContainer>

src/app/database/databaseLoader.js

@@ -33,4 +33,22 @@ function insertFloodZone({ images, description, passable, location }) {
   transaction(global.userDataBase, query, values);
 }
 
-export default insertFloodZone;
+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;
+  }
+
+  const values = [
+    date,
+    JSON.stringify(images),
+    parseFloat(location["latitude"]),
+    parseFloat(location["longitude"]),
+    parseInt(pluviometer),
+  ];
+
+  transaction(global.userDataBase, query, values);
+}
+
+export { insertFloodZone, insertPluviometerData };

src/app/database/db.js

@@ -9,6 +9,14 @@ const init_queries = [
         Longitude real NOT NULL,
         Passable INTERGER NOT NULL
     );`,
+  `CREATE TABLE IF NOT EXISTS Pluviometer (
+        Id integer PRIMARY KEY autoincrement,
+        Date text NOT NULL,
+        Images text NOT NULL,
+        Latitude real NOT NULL,
+        Longitude real NOT NULL,
+        Precipitation real NOT NULL
+   );`,
 ];
 
 //   `CREATE TABLE IF NOT EXISTS Users (

src/app/hooks/selectFromDB.js

@@ -3,6 +3,19 @@ import "../config/globals";
 
 const floodZoneAsset = require("../assets/pontos_alagamento_peq.png");
 
+function partsePluviometer(row) {
+  return {
+    key: "999",
+    title: "pluviometro",
+    coordinate: {
+      latitude: row["Latitude"] + 0.5,
+      longitude: row["Longitude"],
+    },
+    image: floodZoneAsset,
+    description: row["Pluviometer"],
+  };
+}
+
 function parseFloodZones(row) {
   return {
     key: row["Id"],
@@ -34,13 +47,21 @@ function genericSelect(setState, query, parseFunction) {
   }, []);
 }
 
-function useSelect() {
+function useFlood() {
   const [warnings, setWarnings] = useState([]);
-  const query = "SELECT * FROM FloodZones;";
+  const queryFloodZones = "SELECT * FROM FloodZones;";
 
-  genericSelect(setWarnings, query, parseFloodZones);
+  genericSelect(setWarnings, queryFloodZones, parseFloodZones);
+
+  return warnings;
+}
+
+function usePluviometer() {
+  const [warnings, setWarnings] = useState([]);
+  const queryPluviometer = "SELECT * FROM Pluviometer;";
 
+  genericSelect(setWarnings, queryPluviometer, partsePluviometer);
   return warnings;
 }
 
-export default useSelect;
+export { useFlood, usePluviometer };

src/app/navigation/AppNavigator.js

@@ -4,8 +4,8 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 
 import AccountNavigator from "./AccountNavigator";
 import FeedNavigator from "./FeedNavigator";
-import MessagesNavigator from "./MessagesNavigator"
-import OfficialMessagesNavigator from "./OfficialMessagesNavigator"
+import MessagesNavigator from "./MessagesNavigator";
+import OfficialMessagesNavigator from "./OfficialMessagesNavigator";
 import SharingDataScreen from "../screens/SharingDataScreen";
 import NewListingButton from "./NewListingButton";
 import routes from "./routes";
@@ -28,7 +28,11 @@ const AppNavigator = () => (
       component={OfficialMessagesNavigator}
       options={{
         tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons name="check-circle" color={color} size={size} />
+          <MaterialCommunityIcons
+            name="check-circle"
+            color={color}
+            size={size}
+          />
         ),
       }}
     />
@@ -52,13 +56,16 @@ const AppNavigator = () => (
       })}
     />
 
-
     <Tab.Screen
       name="Notificação"
       component={MessagesNavigator}
       options={{
         tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons name="bell-outline" color={color} size={size} />
+          <MaterialCommunityIcons
+            name="bell-outline"
+            color={color}
+            size={size}
+          />
         ),
       }}
     />

src/app/screens/MapFeedScreen.js

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

src/app/screens/PluviometerSharingDataScreen.js

@@ -10,16 +10,16 @@ import {
   SubmitButton,
 } from "../components/forms";
 import Screen from "../components/Screen";
-import DatePicker from 'react-native-datepicker';
+import DatePicker from "react-native-datepicker";
 import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
+import { insertPluviometerData } from "../database/databaseLoader";
 
 const validationSchema = Yup.object().shape({
   pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"),
   images: Yup.array().min(1, "Por favor, selecione uma imagem."),
 });
 
-
 function PluviometerSharingDataScreen() {
   const location = useLocation();
 
@@ -27,32 +27,44 @@ function PluviometerSharingDataScreen() {
   var month = new Date().getMonth() + 1;
   var year = new Date().getFullYear();
 
-    var currentDate = day + '/' + month + '/' + year
+  var currentDate = day + "/" + month + "/" + year;
 
   const [date, setDate] = useState(currentDate);
 
-
   return (
     <Screen style={styles.container}>
-            <View style={{ alignSelf: 'center' }}>
-                <Image style={styles.image} source={require("../assets/pluviometro.png")} />
-                <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2' }}>Pluviômetro</Text>
+      <View style={{ alignSelf: "center" }}>
+        <Image
+          style={styles.image}
+          source={require("../assets/pluviometro.png")}
+        />
+        <Text style={{ fontSize: 18, fontWeight: "bold", color: "#1976D2" }}>
+          Pluviômetro
+        </Text>
       </View>
 
       <Form
         initialValues={{
-                    title: "",
           pluviometer: "",
-                    description: "",
-                    category: null,
           images: [],
         }}
-                onSubmit={(values) => console.log(location)}
-                validationSchema={validationSchema}>
+        onSubmit={(values) =>
+          insertPluviometerData({ ...values, date, location })
+        }
+        validationSchema={validationSchema}
+      >
         <View style={{ marginTop: 30 }}>
-                    <Text style={{
-                        fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: '#1976D2', marginTop: 10
-                    }}>Quantidade de chuva:</Text>
+          <Text
+            style={{
+              fontSize: 16,
+              fontWeight: "bold",
+              textAlign: "left",
+              color: "#1976D2",
+              marginTop: 10,
+            }}
+          >
+            Quantidade de chuva:
+          </Text>
           <FormField
             keyboardType="pluviometer"
             maxLength={200}
@@ -63,7 +75,17 @@ function PluviometerSharingDataScreen() {
         </View>
 
         <View style={{ marginTop: 10, width: 220, borderRadius: 25 }}>
-                    <Text style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: '#1976D2', marginBottom: 5 }}>Data da coleta:</Text>
+          <Text
+            style={{
+              fontSize: 16,
+              fontWeight: "bold",
+              textAlign: "left",
+              color: "#1976D2",
+              marginBottom: 5,
+            }}
+          >
+            Data da coleta:
+          </Text>
           <DatePicker
             style={styles.datePickerStyle}
             date={date}
@@ -77,7 +99,7 @@ function PluviometerSharingDataScreen() {
             customStyles={{
               dateIcon: {
                 //display: 'none',
-                                position: 'absolute',
+                position: "absolute",
                 left: 0,
                 top: 4,
                 marginLeft: 0,
@@ -92,7 +114,11 @@ function PluviometerSharingDataScreen() {
             }}
           />
         </View>
-                <FormImagePicker backgroundColor="#1976D2" name="images" styles={{ width: 50 }} />
+        <FormImagePicker
+          backgroundColor="#1976D2"
+          name="images"
+          styles={{ width: 50 }}
+        />
 
         <SubmitButton title="Enviar" />
       </Form>
@@ -109,11 +135,10 @@ const styles = StyleSheet.create({
     height: 85,
     justifyContent: "center",
     alignItems: "center",
-
   },
   datePickerStyle: {
     width: 180,
-    }
-})
+  },
+});
 
 export default PluviometerSharingDataScreen;

src/app/screens/SharingFloodZonesScreen.js

@@ -1,6 +1,12 @@
 import React, { useState } from "react";
 import { Dimensions } from "react-native";
-import { StyleSheet, Text, Image, View, KeyboardAvoidingView } from "react-native";
+import {
+  StyleSheet,
+  Text,
+  Image,
+  View,
+  KeyboardAvoidingView,
+} from "react-native";
 import * as Yup from "yup";
 
 import { Form, SubmitButton, FormField } from "../components/forms";
@@ -9,7 +15,7 @@ import Screen from "../components/Screen";
 import useLocation from "../hooks/useLocation";
 import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
-import insertFloodZone from "../database/databaseLoader";
+import { insertFloodZone } from "../database/databaseLoader";
 
 function submitForm(props) {
   // console.log(props);
@@ -31,10 +37,16 @@ function SharingFloodZonesScreen() {
   const location = useLocation();
 
   return (
-    <KeyboardAvoidingView
-      behavior="padding"
-      style={styles.container}>
-      <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#1976D2', textAlign: 'center', marginBottom: 30 }}>
+    <KeyboardAvoidingView behavior="padding" style={styles.container}>
+      <Text
+        style={{
+          fontSize: 18,
+          fontWeight: "bold",
+          color: "#1976D2",
+          textAlign: "center",
+          marginBottom: 30,
+        }}
+      >
         Pontos de alagamento
       </Text>
       <Form
@@ -83,7 +95,6 @@ function SharingFloodZonesScreen() {
         />
         <SubmitButton title="Enviar" backgroundColor={colors.primary} />
       </Form>
-
     </KeyboardAvoidingView>
   );
 }