Finishing core implementation of register screen

src/app/components/SearchablePicker.js

@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { StyleSheet, View } from "react-native";
 
 import colors from "../config/colors";
 import DropDownPicker from "react-native-dropdown-picker";
 import { Shadow } from "react-native-shadow-2";
+import { useFormikContext } from "formik";
+import { ErrorMessage } from "./forms";
 
 function DropDown({
   value,
@@ -54,16 +56,29 @@ function DropDown({
 }
 
 function SearchablePicker({
-  value,
-  setValue,
   items,
   setItems,
   formPlaceholder,
   searchPlaceholder,
+  name,
   nothingToShow = "Não encontramos nada com esse termo",
+  marginRight = 2,
+  marginLeft = 16,
 }) {
+  const { values, setFieldValue, errors, touched } = useFormikContext();
+  const [value, setValue] = useState(values[name]);
+
+  useEffect(() => {
+    setFieldValue(name, value, true);
+  }, [value]);
+
   return (
-    <View style={styles.location}>
+    <View
+      style={[
+        styles.location,
+        { marginLeft: marginLeft, marginRight: marginRight },
+      ]}
+    >
       <Shadow
         offset={[0, 3]}
         distance={3}
@@ -81,6 +96,8 @@ function SearchablePicker({
           nothingToShow={nothingToShow}
         />
       </Shadow>
+
+      <ErrorMessage error={errors[name]} visible={touched[name]} />
     </View>
   );
 }
@@ -89,8 +106,6 @@ const styles = StyleSheet.create({
   location: {
     flex: 1,
     alignSelf: "flex-start",
-    marginRight: 2,
-    marginLeft: 16,
   },
 });
 

src/app/components/forms/FormField.js

@@ -70,7 +70,8 @@ function RenderPluviometerInput({
           }}
           width={width}
           value={fieldVal.toString()}
-        {...otherProps}/>
+          {...otherProps}
+        />
       </View>
 
       <TouchableOpacity
@@ -147,7 +148,7 @@ function AppFormField({
         )}
       </View>
 
-        <View style={{ paddingHorizontal: 16}}>
+      <View style={{ paddingRight: paddingRight, paddingLeft: paddingLeft }}>
         <ErrorMessage error={errors[name]} visible={touched[name]} />
       </View>
     </View>

src/app/screens/RegisterScreen.js

@@ -17,6 +17,7 @@ import moment from "moment";
 import { Shadow } from "react-native-shadow-2";
 import SearchablePicker from "../components/SearchablePicker";
 import { states, statesToCities } from "../assets/cities_states";
+import { useFormikContext } from "formik";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -38,6 +39,10 @@ const validationSchema = Yup.object().shape({
     .min(8, "Senha muito curta, minimo 8 caracteres")
     .matches(/[a-zA-Z]/, "A senha só pode conter letras"),
   state: Yup.string().required("O estado é obrigatório"),
+  institutionName: Yup.string(),
+  secQuestionAns: Yup.string()
+    .required("A resposta da pergunta de segurança é obrigatória")
+    .max(255),
 });
 
 function LocalDatePicker({ date, setDate, _moment }) {
@@ -89,7 +94,7 @@ function LocalDatePicker({ date, setDate, _moment }) {
   );
 }
 
-function GenderPicker({ value, setValue }) {
+function GenderPicker({ name }) {
   const [items, setItems] = useState([
     { value: "Feminino", label: "Feminino" },
     { value: "Masculino", label: "Masculino" },
@@ -97,8 +102,7 @@ function GenderPicker({ value, setValue }) {
   ]);
   return (
     <SearchablePicker
-      value={value}
-      setValue={setValue}
+      name={name}
       items={items}
       setItems={setItems}
       formPlaceholder={"Selecione o seu gênero"}
@@ -107,7 +111,7 @@ function GenderPicker({ value, setValue }) {
   );
 }
 
-function InstitutionPicker({ value, setValue }) {
+function InstitutionPicker({ name }) {
   const [items, setItems] = useState([
     { value: "Escola", label: "Escola" },
     { value: "Defesa civil", label: "Defesa civil" },
@@ -117,8 +121,7 @@ function InstitutionPicker({ value, setValue }) {
   ]);
   return (
     <SearchablePicker
-      value={value}
-      setValue={setValue}
+      name={name}
       items={items}
       setItems={setItems}
       formPlaceholder={"Seleciona o tipo da instituição"}
@@ -127,12 +130,11 @@ function InstitutionPicker({ value, setValue }) {
   );
 }
 
-function StatePicker({ value, setValue }) {
+function StatePicker({ name }) {
   const [items, setItems] = useState(states);
   return (
     <SearchablePicker
-      value={value}
-      setValue={setValue}
+      name={name}
       items={items}
       setItems={setItems}
       formPlaceholder={"Selecione o seu estado"}
@@ -141,16 +143,19 @@ function StatePicker({ value, setValue }) {
   );
 }
 
-function CityPicker({ value, setValue, state }) {
+function CityPicker({ name }) {
+  const { values } = useFormikContext();
+  const state = values["state"];
+
   useEffect(() => {
     state && setItems(statesToCities[state].cities);
   }, [state]);
 
   const [items, setItems] = useState([]);
+
   return (
     <SearchablePicker
-      value={value}
-      setValue={setValue}
+      name={name}
       items={items}
       setItems={setItems}
       formPlaceholder={"Selecione a sua cidade"}
@@ -164,13 +169,31 @@ function CityPicker({ value, setValue, state }) {
   );
 }
 
-export default function RegisterScreen(props) {
-  const [gender, setGender] = useState("");
-  const [state, setState] = useState("");
-  const [city, setCity] = useState("");
-  const [institution, setInstitution] = useState("");
-  const [secQuestion, setSecQuestion] = useState("");
+function SecQuestionPicker({ name }) {
+  const [items, setItems] = useState([
+    { value: "a", label: "Qual a sua cor predileta?" },
+    { value: "s", label: "Qual foi o seu livro predileto?" },
+    { value: "d", label: "Qual o nome da rua em que você cresceu?" },
+    { value: "f", label: "Qual o nome do seu bicho de estimação predileto?" },
+    { value: "g", label: "Qual a sua comida predileta?" },
+    { value: "h", label: "Qual cidade você nasceu?" },
+    { value: "j", label: "Qual é o seu país preferido?" },
+    { value: "k", label: "Qual é a sua marca de carro predileto?" },
+  ]);
+
+  return (
+    <SearchablePicker
+      name={name}
+      items={items}
+      setItems={setItems}
+      formPlaceholder={"Selecione a pergunta de segurança"}
+      searchPlaceholder={"Busca..."}
+      marginLeft={2}
+    />
+  );
+}
 
+export default function RegisterScreen(props) {
   const _moment = moment();
   const [date, setDate] = useState(_moment);
   const [singUpFailed, setSingUpFailed] = useState(false);
@@ -191,13 +214,19 @@ export default function RegisterScreen(props) {
           number: "",
           password: "",
           confirmPassword: "",
-          state: "",
           gender: "",
           institutionName: "",
+          secQuestionAns: "",
+          gender: "",
+          state: "",
+          city: "",
+          institution: "",
+          secQuestion: "",
         }}
-        onSubmit={({ name, number, password, confirmPassword }) => {
-          comparePassword(password, confirmPassword);
+        onSubmit={(form) => {
+          comparePassword(form.password, form.confirmPassword);
           console.log("cadastro ainda não implementado");
+          console.log("Forms values: \n" + JSON.stringify(form));
         }}
         validationSchema={validationSchema}
       >
@@ -301,7 +330,7 @@ export default function RegisterScreen(props) {
                 size={25}
                 color={colors.primary}
               />
-              <GenderPicker value={gender} setValue={setGender} />
+              <GenderPicker name="gender" />
             </View>
 
             <Text style={styles.labelStyle}>Estado*:</Text>
@@ -311,7 +340,7 @@ export default function RegisterScreen(props) {
                 size={25}
                 color={colors.primary}
               />
-              <StatePicker value={state} setValue={setState} />
+              <StatePicker name="state" />
             </View>
 
             <Text style={styles.labelStyle}>Cidade*:</Text>
@@ -321,7 +350,7 @@ export default function RegisterScreen(props) {
                 size={25}
                 color={colors.primary}
               />
-              <CityPicker value={city} setValue={setCity} state={state} />
+              <CityPicker name={"city"} />
             </View>
 
             <Text style={styles.labelStyle}>Tipo de instituição:</Text>
@@ -331,10 +360,7 @@ export default function RegisterScreen(props) {
                 size={25}
                 color={colors.primary}
               />
-              <InstitutionPicker
-                value={institution}
-                setValue={setInstitution}
-              />
+              <InstitutionPicker name="institution" />
             </View>
 
             <Text style={styles.labelStyle}>Nome da instituição</Text>
@@ -355,6 +381,30 @@ export default function RegisterScreen(props) {
               />
             </View>
 
+            <Text style={styles.labelStyle}>Pergunta de segurança*:</Text>
+            <View
+              style={{
+                flexDirection: "row",
+                marginTop: 12,
+                marginBottom: 24,
+              }}
+            >
+              <SecQuestionPicker name="secQuestion" />
+            </View>
+
+            <Text style={styles.labelStyle}>Resposta*:</Text>
+            <View style={styles.iconField}>
+              <FormField
+                flex={1}
+                maxLength={255}
+                name="secQuestionAns"
+                numberOfLines={2}
+                placeholder="Degite a resposta à sua pergunta"
+                paddingRight={2}
+                paddingLeft={2}
+              />
+            </View>
+
             <SubmitButton
               flex={1}
               title="cadastrar"