adding time picker to pluviometer screen

src/app/components/forms/FormDatePicker.js

@@ -20,6 +20,10 @@ const FormDatePicker = (props) => {
   const [date, setDate] = useState(moment(defaultDate));
   const [show, setShow] = useState(false);
   const [auxDate, setAuxDate] = useState(moment());
+  const [mode, setMode] = useState('date');
+  const [time, setTime] = useState(moment(defaultDate));
+
+  //-------------------------- Time picker ainda não está habilitado pra ios  -------------------------------- 
 
   const onChange = (e, selectedDate) => {
     setAuxDate(moment(selectedDate)); // variavel auxiliar para não alterar a data com a rolagem, apenas com o done
@@ -28,23 +32,33 @@ const FormDatePicker = (props) => {
   const androidOnChange = (e, selectedDate) => {
     setShow(false);
     if (selectedDate) {
-      setDate(moment(selectedDate));
-      props.onDateChange(selectedDate);
+      if (mode == 'date') {
+        setDate(moment(selectedDate));        
+        props.onDateChange(selectedDate);
+        setMode('time');
+        setShow(true); // to show the picker again in time mode
+      } else {
+        setTime(moment(selectedDate));
+        props.onTimeChange(selectedDate);
+        setShow(false);
+        setMode('date');
+      }
     }
   };
 
   const onCancelPress = () => {
-    //setDate(moment(defaultDate));
     setShow(false);
-    //console.log(moment(defaultDate).format("DD-MM-YYYY"))
   };
 
   const onDonePress = () => {
     setDate(moment(auxDate)); //atualizar a data com a variável auxiliar
     props.onDateChange(auxDate);
     setShow(false);
-    //console.log("done");
-    //console.log(date.format("DD-MM-YYYY"));
+  };
+
+  const formatDate = (date, time) => {
+    time.getHours();
+    time.getMinuts();
   };
 
   const renderDatePicker = () => {
@@ -52,12 +66,18 @@ const FormDatePicker = (props) => {
       <DateTimePicker
         timeZoneOffsetInDays={-1}
         value={new Date(auxDate)}
-        mode="date"
+        mode={mode}
+        is24Hour={true}
         minimumDate={new Date(moment().subtract(1, "month"))}
         maximumDate={new Date(moment())}
         formatChosenDate={(selectedDate) => {
-          return moment(selectedDate).format("DD/MM/YYYY");
-        }} //formatar a data do selected date
+          if(mode == "date"){
+            return moment(selectedDate).format("DD/MM/YYYY");
+          }
+          else{
+            return moment(selectedDate).format("HH:mm");
+          }
+        }} //formatar a data e hora do selected date
         display={Platform.OS === "ios" ? "spinner" : "default"}
         onChange={Platform.OS === "ios" ? onChange : androidOnChange}
       />
@@ -77,7 +97,7 @@ const FormDatePicker = (props) => {
         <View style={styles.dateInput}>
           <Text style={{ fontSize: dimensions.text.default }}>
             {" "}
-            {date.format("DD/MM/YYYY")}
+            {date.format("DD/MM/YYYY")} {"\n"} {time.format("HH:mm")}
           </Text>
         </View>
         <FontAwesome5 name="calendar-day" size={30} color="grey" />
@@ -148,6 +168,7 @@ FormDatePicker.defaultProps = {
   textStyle: {},
   defaultDate: moment(),
   onDateChange: () => {},
+  onTimeChange: () => {},
 };
 
 const styles = StyleSheet.create({

src/app/database/databaseLoader.js

@@ -36,7 +36,7 @@ function insertFloodZone({ images, description, passable, location }) {
   transaction(global.userDataBase, query, values);
 }
 
-function insertPluviometerData({ pluviometer, images, dateTime, location }) {
+function insertPluviometerData({ pluviometer, images, dateTime, time, location }) {
   const query = `INSERT INTO Pluviometer(Date, Images, Latitude, Longitude, Precipitation) VALUES(?, ?, ?, ?, ?);`;
 
   if (location === undefined) {
@@ -45,7 +45,7 @@ function insertPluviometerData({ pluviometer, images, dateTime, location }) {
   }
 
   const values = [
-    moment(dateTime).format("DD/MM/YYYY"),
+    moment(dateTime).format("DD/MM/YYYY") +" | "+ moment(time).format("HH:MM"),
     JSON.stringify(images),
     parseFloat(location["latitude"]),
     parseFloat(location["longitude"]),

src/app/screens/PluviometerSharingDataScreen.js

@@ -33,6 +33,7 @@ function PluviometerSharingDataScreen(props) {
   const location = useLocation();
 
   const [dateTime, setDateTime] = useState(moment());
+  const [time, setTime] = useState(moment());
 
   return (
     <Screen style={styles.container}>
@@ -58,7 +59,9 @@ function PluviometerSharingDataScreen(props) {
             images: [],
           }}
           onSubmit={(values) => {
-            insertPluviometerData({ ...values, dateTime, location });
+            insertPluviometerData({ ...values, dateTime, time, location });
+            console.log("DATA:" + dateTime);
+            console.log("HORA:" + time);
             showMessage({
               message: "Informação enviada!",
               duration: 3000,
@@ -89,6 +92,7 @@ function PluviometerSharingDataScreen(props) {
               }}
               defaultDate={new Date()}
               onDateChange={(value) => setDateTime(value)}
+              onTimeChange={(value)  => setTime(value)}              
             />
           </View>
 

src/package-lock.json

@@ -14387,6 +14387,15 @@
       "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.15.2.tgz",
       "integrity": "sha512-2hxLkBnZtEKFDyfvNO5EUywhy3f/EiLOBO8SWqKj4BMBTO0QwnybaPE5MVF00Fhz+VA4+h/iI40Dkrrtq70dGg=="
     },
+    "react-native-walkthrough-tooltip": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-walkthrough-tooltip/-/react-native-walkthrough-tooltip-1.2.0.tgz",
+      "integrity": "sha512-M4/dg8PuYKslitHXaCQ/JLudvGEVqI2tJLKv34AQ3X0tLTtNXvAvyCPlDZ+Bg2l9qJ5PQOz8iMt6dyqLn1ed+w==",
+      "requires": {
+        "prop-types": "^15.6.1",
+        "react-fast-compare": "^2.0.4"
+      }
+    },
     "react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",