Pluviometer Sharing Data Screen

src/app/screens/PluviometerSharingDataScreen.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { StyleSheet } from "react-native";
+
+import { StyleSheet, Text, View, Image } from "react-native";
 import * as Yup from "yup";
 
 import {
@@ -8,16 +9,13 @@ import {
     FormPicker as Picker,
     SubmitButton,
 } from "../components/forms";
-import CategoryPickerItem from "../components/CategoryPickerItem";
 import Screen from "../components/Screen";
 import DatePicker from 'react-native-datepicker';
 import useLocation from "../hooks/useLocation";
+import FormImagePicker from "../components/forms/FormImagePicker";
 
 const validationSchema = Yup.object().shape({
-    title: Yup.string().required().min(1).label("Title"),
-    price: Yup.number().required().min(1).max(10000).label("Price"),
-    description: Yup.string().label("Description"),
-    category: Yup.object().required().nullable().label("Category"),
+    pluviometer: Yup.number().required().min(1).max(10000).label("pluviometer"),
     images: Yup.array().min(1, "Please select at least one image."),
 });
 
@@ -25,38 +23,57 @@ const validationSchema = Yup.object().shape({
 function PluviometerSharingDataScreen() {
     const location = useLocation();
 
-    const [date, setDate] = useState('09-10-2020');
+    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: "",
-                    price: "",
+                    pluviometer: "",
                     description: "",
                     category: null,
                     images: [],
                 }}
                 onSubmit={(values) => console.log(location)}
-                validationSchema={validationSchema}
-            >
+                validationSchema={validationSchema}>
+                <View style={{ marginTop: 30 }}>
+                    <Text style={{
+                        fontSize: 16, fontWeight: 'bold', textAlign: 'left', color: '#1976D2', marginTop: 10
+                    }}>Quantidade de chuva:</Text>
                     <FormField
-                    keyboardType="numeric"
+                        keyboardType="pluviometer"
                         maxLength={200}
-                    name="price"
-                    placeholder="não esstá atualizando"
-                    width={220}
+                        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} // Initial date from state
+                        date={date}
                         mode="date" // The enum of date, datetime and time
-                    placeholder="select date"
-                    format="DD-MM-YYYY"
-                    minDate="01-01-2016"
-                    maxDate="01-01-2019"
-                    confirmBtnText="Confirm"
-                    cancelBtnText="Cancel"
+                        placeholder="Selecione a data da coleta"
+                        format="DD/MM/YYYY"
+                        minDate="01/01/2020"
+                        maxDate={currentDate}
+                        confirmBtnText="Confirmar"
+                        cancelBtnText="Cancelar"
                         customStyles={{
                             dateIcon: {
                                 //display: 'none',
@@ -67,14 +84,17 @@ function PluviometerSharingDataScreen() {
                             },
                             dateInput: {
                                 marginLeft: 36,
+                                borderRadius: 18,
                             },
                         }}
                         onDateChange={(date) => {
                             setDate(date);
                         }}
                     />
+                </View>
+                <FormImagePicker backgroundColor="#1976D2" name="images" styles={{ width: 50 }} />
 
-                <SubmitButton title="Post" />
+                <SubmitButton title="Enviar" />
             </Form>
         </Screen>
     );
@@ -82,8 +102,18 @@ function PluviometerSharingDataScreen() {
 
 const styles = StyleSheet.create({
     container: {
-        padding: 10,
+        paddingHorizontal: 10,
     },
-});
+    image: {
+        width: 85,
+        height: 85,
+        justifyContent: "center",
+        alignItems: "center",
+
+    },
+    datePickerStyle: {
+        width: 180,
+    }
+})
 
 export default PluviometerSharingDataScreen;

src/app/screens/SharingDataScreen.js

@@ -5,6 +5,7 @@ import { Image, Text, TouchableOpacity } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 import RainSharingDataScreen from "../screens/RainSharingDataScreen";
 import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
+import PluviometerSharingDataScreen from "./PluviometerSharingDataScreen";
 
 //1/3
 
@@ -46,7 +47,7 @@ function SharingDataScreen({ navigation }) {
       </View>
 
       <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
-        <TouchableOpacity style={{ alignItems: "center" }}>
+        <TouchableOpacity style={{ alignItems: "center" }} onPress={() => navigation.navigate('PluviometerSharingData')}>
           <Image
             style={styles.floodingLogo}
             source={require("../assets/diario_pluviometrico.png")}
@@ -96,6 +97,7 @@ function RainSharingDataNavigator() {
         name="FloodSharingData"
         component={SharingFloodZonesScreen}
       />
+      <Stack.Screen name="PluviometerSharingData" component={PluviometerSharingDataScreen} />
     </Stack.Navigator>
   );
 }