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,12 +28,16 @@ const AppNavigator = () => (
       component={OfficialMessagesNavigator}
       options={{
         tabBarIcon: ({ color, size }) => (
-          <MaterialCommunityIcons name="check-circle" color={color} size={size} />
+          <MaterialCommunityIcons
+            name="check-circle"
+            color={color}
+            size={size}
+          />
         ),
       }}
     />
 
-<Tab.Screen
+    <Tab.Screen
       name="SharingData"
       component={SharingDataScreen}
       options={({ navigation }) => ({
@@ -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

@@ -4,116 +4,141 @@ import { StyleSheet, Text, View, Image } from "react-native";
 import * as Yup from "yup";
 
 import {
-    Form,
-    FormField,
-    FormPicker as Picker,
-    SubmitButton,
+  Form,
+  FormField,
+  FormPicker as Picker,
+  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."),
+  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();
-
-    var day = new Date().getDate();
-    var month = new Date().getMonth() + 1;
-    var year = new Date().getFullYear();
-
-    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>
-
-            <Form
-                initialValues={{
-                    title: "",
-                    pluviometer: "",
-                    description: "",
-                    category: null,
-                    images: [],
-                }}
-                onSubmit={(values) => console.log(location)}
-                validationSchema={validationSchema}>
-                <View style={{ marginTop: 30 }}>
-                    <Text style={{
-                        fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: '#1976D2', marginTop: 10
-                    }}>Quantidade de chuva:</Text>
-                    <FormField
-                        keyboardType="pluviometer"
-                        maxLength={200}
-                        name="pluviometer"
-                        placeholder="Digite a quantidade de chuva"
-                        width={280}
-                    />
-                </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>
-                    <DatePicker
-                        style={styles.datePickerStyle}
-                        date={date}
-                        mode="date" // The enum of date, datetime and time
-                        placeholder="Selecione a data da coleta"
-                        format="DD/MM/YYYY"
-                        minDate="01/01/2020"
-                        maxDate={currentDate}
-                        confirmBtnText="Confirmar"
-                        cancelBtnText="Cancelar"
-                        customStyles={{
-                            dateIcon: {
-                                //display: 'none',
-                                position: 'absolute',
-                                left: 0,
-                                top: 4,
-                                marginLeft: 0,
-                            },
-                            dateInput: {
-                                marginLeft: 36,
-                                borderRadius: 18,
-                            },
-                        }}
-                        onDateChange={(date) => {
-                            setDate(date);
-                        }}
-                    />
-                </View>
-                <FormImagePicker backgroundColor="#1976D2" name="images" styles={{ width: 50 }} />
-
-                <SubmitButton title="Enviar" />
-            </Form>
-        </Screen>
-    );
+  const location = useLocation();
+
+  var day = new Date().getDate();
+  var month = new Date().getMonth() + 1;
+  var year = new Date().getFullYear();
+
+  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>
+
+      <Form
+        initialValues={{
+          pluviometer: "",
+          images: [],
+        }}
+        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>
+          <FormField
+            keyboardType="pluviometer"
+            maxLength={200}
+            name="pluviometer"
+            placeholder="Digite a quantidade de chuva"
+            width={280}
+          />
+        </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>
+          <DatePicker
+            style={styles.datePickerStyle}
+            date={date}
+            mode="date" // The enum of date, datetime and time
+            placeholder="Selecione a data da coleta"
+            format="DD/MM/YYYY"
+            minDate="01/01/2020"
+            maxDate={currentDate}
+            confirmBtnText="Confirmar"
+            cancelBtnText="Cancelar"
+            customStyles={{
+              dateIcon: {
+                //display: 'none',
+                position: "absolute",
+                left: 0,
+                top: 4,
+                marginLeft: 0,
+              },
+              dateInput: {
+                marginLeft: 36,
+                borderRadius: 18,
+              },
+            }}
+            onDateChange={(date) => {
+              setDate(date);
+            }}
+          />
+        </View>
+        <FormImagePicker
+          backgroundColor="#1976D2"
+          name="images"
+          styles={{ width: 50 }}
+        />
+
+        <SubmitButton title="Enviar" />
+      </Form>
+    </Screen>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        paddingHorizontal: 10,
-    },
-    image: {
-        width: 85,
-        height: 85,
-        justifyContent: "center",
-        alignItems: "center",
-
-    },
-    datePickerStyle: {
-        width: 180,
-    }
-})
+  container: {
+    paddingHorizontal: 10,
+  },
+  image: {
+    width: 85,
+    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>
   );
 }