Finishing core implementation of register screen

3 years ago · b74c4781fb
3 changed files with 130 additions and 64 deletions
--- a/src/app/components/SearchablePicker.js
+++ b/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,
  },
 });

--- a/src/app/components/forms/FormField.js
+++ b/src/app/components/forms/FormField.js
@ -59,18 +59,19 @@ function RenderPluviometerInput({
  return (
    <View
      style={{
-      flexDirection: "row",
+        flexDirection: "row",
      }}
    >
-      <View style={{flex: 1,alignSelf: "stretch"}}>
-      <TextInput
-        onBlur={() => setFieldTouched(name)}
-        onChangeText={(val) => {
-          setFieldVal(val);
-        }}
-        width={width}
-        value={fieldVal.toString()}
-        {...otherProps}/>
+      <View style={{ flex: 1, alignSelf: "stretch" }}>
+        <TextInput
+          onBlur={() => setFieldTouched(name)}
+          onChangeText={(val) => {
+            setFieldVal(val);
+          }}
+          width={width}
+          value={fieldVal.toString()}
+          {...otherProps}
+        />
      </View>

      <TouchableOpacity
@ -128,28 +129,28 @@ function AppFormField({
          paddingRight: increaseDecreaseButtons ? 0 : paddingRight,
        }}
      >
-          {name != "pluviometer" ? (
-            <TextInput
-              onBlur={() => setFieldTouched(name)}
-              onChangeText={handleChange(name)}
-              width={width}
-              {...otherProps}
-            />
-          ) : (
-            <RenderPluviometerInput
-              name={name}
-              setFieldTouched={setFieldTouched}
-              setFieldValue={setFieldValue}
-              otherProps={otherProps}
-              width={width}
-              values={values}
-            />
-          )}
+        {name != "pluviometer" ? (
+          <TextInput
+            onBlur={() => setFieldTouched(name)}
+            onChangeText={handleChange(name)}
+            width={width}
+            {...otherProps}
+          />
+        ) : (
+          <RenderPluviometerInput
+            name={name}
+            setFieldTouched={setFieldTouched}
+            setFieldValue={setFieldValue}
+            otherProps={otherProps}
+            width={width}
+            values={values}
+          />
+        )}
      </View>

-        <View style={{ paddingHorizontal: 16}}>
-          <ErrorMessage error={errors[name]} visible={touched[name]} />
-        </View>
+      <View style={{ paddingRight: paddingRight, paddingLeft: paddingLeft }}>
+        <ErrorMessage error={errors[name]} visible={touched[name]} />
+      </View>
    </View>
  );
 }
--- a/src/app/screens/RegisterScreen.js
+++ b/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"