From 81296668f5b46f8d298f89161b369da0b5499707 Mon Sep 17 00:00:00 2001
From: GabrielTrettel <gabrielmtrettel@gmail.com>
Date: Thu, 12 Aug 2021 17:50:50 -0300
Subject: [PATCH] Increase/Decrease buttons in Pluviometer sharing data form.

---
 src/app/components/TextInput.js               |  34 ++---
 src/app/components/forms/ErrorMessage.js      |   2 +-
 src/app/components/forms/FormField.js         | 133 ++++++++++++++++--
 .../screens/PluviometerSharingDataScreen.js   |  42 ++----
 4 files changed, 151 insertions(+), 60 deletions(-)

diff --git a/src/app/components/TextInput.js b/src/app/components/TextInput.js
index 2bfbe65..b946e18 100644
--- a/src/app/components/TextInput.js
+++ b/src/app/components/TextInput.js
@@ -3,34 +3,34 @@ import { View, TextInput, StyleSheet } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import colors from "../config/colors";
 import defaultStyles from "../config/styles";
-import {Shadow} from "react-native-shadow-2";
+import { Shadow } from "react-native-shadow-2";
 
 function AppTextInput({ icon, width = "100%", ...otherProps }) {
   return (
     <Shadow
-      viewStyle={{ width: width, height: otherProps.numberOfLines * 20}}
+      viewStyle={{ width: width, height: otherProps.numberOfLines * 21 }}
       offset={[0, 4]}
       distance={4}
       radius={4}
       startColor="rgba(0, 0, 0, 0.25)"
       paintInside={true}
     >
-    <View style={[styles.container, { width }]}>
-      {icon && (
-        <MaterialCommunityIcons
-          name={icon}
-          size={20}
-          color={defaultStyles.colors.medium}
-          style={styles.icon}
+      <View style={[styles.container, { width }]}>
+        {icon && (
+          <MaterialCommunityIcons
+            name={icon}
+            size={20}
+            color={defaultStyles.colors.medium}
+            style={styles.icon}
+          />
+        )}
+        <TextInput
+          style={defaultStyles.text}
+          placeholderTextColor={colors.medium}
+          {...otherProps}
         />
-      )}
-      <TextInput
-        style={defaultStyles.text}
-        placeholderTextColor={colors.medium}
-        {...otherProps}
-      />
-    </View>
-      </Shadow>
+      </View>
+    </Shadow>
   );
 }
 
diff --git a/src/app/components/forms/ErrorMessage.js b/src/app/components/forms/ErrorMessage.js
index 82e2a67..9863d3e 100644
--- a/src/app/components/forms/ErrorMessage.js
+++ b/src/app/components/forms/ErrorMessage.js
@@ -10,7 +10,7 @@ function ErrorMessage({ error, visible }) {
 }
 
 const styles = StyleSheet.create({
-  error: { color: "red" },
+  error: { color: "red", paddingTop: 10 },
 });
 
 export default ErrorMessage;
diff --git a/src/app/components/forms/FormField.js b/src/app/components/forms/FormField.js
index 3c99d6c..a0888b1 100644
--- a/src/app/components/forms/FormField.js
+++ b/src/app/components/forms/FormField.js
@@ -1,23 +1,130 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useFormikContext } from "formik";
 
 import TextInput from "../TextInput";
 import ErrorMessage from "./ErrorMessage";
-import {View} from "react-native";
+import { View, Text } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import colors from "../../config/colors";
+import { Shadow } from "react-native-shadow-2";
 
-function AppFormField({ name, width, ...otherProps }) {
-  const { setFieldTouched, handleChange, errors, touched } = useFormikContext();
+function IncreaseDecreaseButtons({ content }) {
+  return (
+    <Shadow
+      offset={[0, 4]}
+      distance={4}
+      radius={4}
+      startColor="rgba(0, 0, 0, 0.25)"
+      paintInside={true}
+    >
+      <View
+        style={{
+          backgroundColor: colors.primary,
+          width: 35,
+          height: 42,
+          justifyContent: "center",
+          alignItems: "center",
+          borderRadius: 4,
+        }}
+      >
+        <Text style={{ color: "white", fontSize: 24 }}>{content}</Text>
+      </View>
+    </Shadow>
+  );
+}
+
+function AppFormField({
+  name,
+  width,
+  increaseDecreaseButtons = false,
+  ...otherProps
+}) {
+  const {
+    values,
+    setFieldTouched,
+    setFieldValue,
+    errors,
+    touched,
+  } = useFormikContext();
+
+  const [pluv, setPluv] = useState(0);
+
+  console.log(values);
+  console.log(pluv);
+
+  useEffect(() => {
+    setFieldValue("pluviometer", Number(pluv), true);
+  }, [pluv]);
+
+  const increase = () => {
+    setPluv((Number(pluv) + 1).toString());
+  };
+
+  const decrease = () => {
+    setPluv((Number(pluv) - 1).toString());
+  };
 
   return (
-    <View
-      paddingHorizontal={16}>
-      <TextInput
-        onBlur={() => setFieldTouched(name)}
-        onChangeText={handleChange(name)}
-        width={width}
-        {...otherProps}
-      />
-      <ErrorMessage error={errors[name]} visible={touched[name]} />
+    <View>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          paddingLeft: 16,
+          paddingRight: increaseDecreaseButtons ? 0 : 16,
+        }}
+      >
+        <View
+          style={{
+            alignSelf: "stretch",
+            flex: 1,
+          }}
+        >
+          <TextInput
+            onBlur={() => setFieldTouched(name)}
+            onChangeText={(val) => {
+              setPluv(val);
+            }}
+            width={width}
+            value={pluv}
+            {...otherProps}
+          />
+        </View>
+
+        {increaseDecreaseButtons && (
+          <>
+            <TouchableOpacity
+              onPress={() => {
+                increase();
+              }}
+              style={{
+                paddingLeft: 4,
+                paddingBottom: 8,
+                paddingRight: 1.5,
+              }}
+            >
+              <IncreaseDecreaseButtons content={"+"} />
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              onPress={() => {
+                decrease();
+              }}
+              style={{
+                paddingLeft: 1.5,
+                paddingBottom: 8,
+                paddingRight: 16,
+              }}
+            >
+              <IncreaseDecreaseButtons content={"-"} />
+            </TouchableOpacity>
+          </>
+        )}
+      </View>
+
+      <View style={{ paddingLeft: 16 }}>
+        <ErrorMessage error={errors[name]} visible={touched[name]} />
+      </View>
     </View>
   );
 }
diff --git a/src/app/screens/PluviometerSharingDataScreen.js b/src/app/screens/PluviometerSharingDataScreen.js
index 2b7a81f..cfaedc7 100644
--- a/src/app/screens/PluviometerSharingDataScreen.js
+++ b/src/app/screens/PluviometerSharingDataScreen.js
@@ -1,25 +1,16 @@
 import React, { useState, useContext, useEffect } from "react";
-import { StyleSheet, Text, View, ScrollView, PixelRatio } from "react-native";
+import { StyleSheet, Text, View, ScrollView } from "react-native";
 import * as Yup from "yup";
-import {
-  Form,
-  FormField,
-  FormPicker as Picker,
-  SubmitButton,
-} from "../components/forms";
+import { Form, FormField, SubmitButton } from "../components/forms";
 import Screen from "../components/Screen";
-import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import { insertPluviometerData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
 import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
-import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";
 import moment from "moment";
-import FormLocationPicker from "../components/forms/FormLocationPicker";
-import { TouchableOpacity } from "react-native-gesture-handler";
-import { EventLocationContext } from "../context/EventLocationContext";
 import PickEventDateLocation from "../components/PickEventDateLocation";
+import { EventLocationContext } from "../context/EventLocationContext";
 
 const dims = scaleDimsFromWidth(85, 85, 25);
 
@@ -36,24 +27,19 @@ const validationSchema = Yup.object().shape({
 
 function PluviometerSharingDataScreen(props) {
   const context = useContext(EventLocationContext);
-
-  const amount = 2;
+  const [dateTime, setDateTime] = useState(moment());
+  const [time, setTime] = useState(moment());
 
   useEffect(() => {
     context.defaultLocation();
   }, []);
-  const location = context.eventCoordinates;
-  const address = context.eventLocation;
-
-  const [dateTime, setDateTime] = useState(moment());
-  const [time, setTime] = useState(moment());
 
   return (
     <Screen style={styles.container}>
       <ScrollView>
         <Form
           initialValues={{
-            pluviometer: "",
+            pluviometer: 0,
             description: "",
             images: [],
           }}
@@ -69,22 +55,20 @@ function PluviometerSharingDataScreen(props) {
           }}
           validationSchema={validationSchema}
         >
-          <Text style={{...styles.labelStyle, paddingTop: 24 }}>Quantidade de chuva (mm):</Text>
-           
+          <Text style={{ ...styles.labelStyle, paddingTop: 24 }}>
+            Quantidade de chuva (mm):
+          </Text>
 
           <FormField
-            keyboardType="decimal-pad"
+            keyboardType="number-pad"
             maxLength={200}
             numberOfLines={2}
             name="pluviometer"
-            placeholder="Digite a quantidade de chuva"
+            placeholder="Quantidade de chuva"
+            increaseDecreaseButtons={true}
           />
 
-          <FormImagePicker
-            backgroundColor={colors.primary}
-            name="images"
-            styles={{ width: 50 }}
-          />
+          <FormImagePicker backgroundColor={colors.primary} name="images" />
 
           <PickEventDateLocation
             setDate={setDateTime}