Browse Source

Finishing core implementation of register screen

master
GabrielTrettel 3 years ago
parent
commit
b74c4781fb
  1. 27
      src/app/components/SearchablePicker.js
  2. 5
      src/app/components/forms/FormField.js
  3. 106
      src/app/screens/RegisterScreen.js

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

5
src/app/components/forms/FormField.js

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

106
src/app/screens/RegisterScreen.js

@ -17,6 +17,7 @@ import moment from "moment";
import { Shadow } from "react-native-shadow-2"; import { Shadow } from "react-native-shadow-2";
import SearchablePicker from "../components/SearchablePicker"; import SearchablePicker from "../components/SearchablePicker";
import { states, statesToCities } from "../assets/cities_states"; import { states, statesToCities } from "../assets/cities_states";
import { useFormikContext } from "formik";
const phoneRegex = RegExp( const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/ /^\(?[\(]?([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") .min(8, "Senha muito curta, minimo 8 caracteres")
.matches(/[a-zA-Z]/, "A senha só pode conter letras"), .matches(/[a-zA-Z]/, "A senha só pode conter letras"),
state: Yup.string().required("O estado é obrigatório"), 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 }) { 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([ const [items, setItems] = useState([
{ value: "Feminino", label: "Feminino" }, { value: "Feminino", label: "Feminino" },
{ value: "Masculino", label: "Masculino" }, { value: "Masculino", label: "Masculino" },
@ -97,8 +102,7 @@ function GenderPicker({ value, setValue }) {
]); ]);
return ( return (
<SearchablePicker <SearchablePicker
value={value}
setValue={setValue}
name={name}
items={items} items={items}
setItems={setItems} setItems={setItems}
formPlaceholder={"Selecione o seu gênero"} 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([ const [items, setItems] = useState([
{ value: "Escola", label: "Escola" }, { value: "Escola", label: "Escola" },
{ value: "Defesa civil", label: "Defesa civil" }, { value: "Defesa civil", label: "Defesa civil" },
@ -117,8 +121,7 @@ function InstitutionPicker({ value, setValue }) {
]); ]);
return ( return (
<SearchablePicker <SearchablePicker
value={value}
setValue={setValue}
name={name}
items={items} items={items}
setItems={setItems} setItems={setItems}
formPlaceholder={"Seleciona o tipo da instituição"} 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); const [items, setItems] = useState(states);
return ( return (
<SearchablePicker <SearchablePicker
value={value}
setValue={setValue}
name={name}
items={items} items={items}
setItems={setItems} setItems={setItems}
formPlaceholder={"Selecione o seu estado"} 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(() => { useEffect(() => {
state && setItems(statesToCities[state].cities); state && setItems(statesToCities[state].cities);
}, [state]); }, [state]);
const [items, setItems] = useState([]); const [items, setItems] = useState([]);
return ( return (
<SearchablePicker <SearchablePicker
value={value}
setValue={setValue}
name={name}
items={items} items={items}
setItems={setItems} setItems={setItems}
formPlaceholder={"Selecione a sua cidade"} 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 _moment = moment();
const [date, setDate] = useState(_moment); const [date, setDate] = useState(_moment);
const [singUpFailed, setSingUpFailed] = useState(false); const [singUpFailed, setSingUpFailed] = useState(false);
@ -191,13 +214,19 @@ export default function RegisterScreen(props) {
number: "", number: "",
password: "", password: "",
confirmPassword: "", confirmPassword: "",
state: "",
gender: "", gender: "",
institutionName: "", 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("cadastro ainda não implementado");
console.log("Forms values: \n" + JSON.stringify(form));
}} }}
validationSchema={validationSchema} validationSchema={validationSchema}
> >
@ -301,7 +330,7 @@ export default function RegisterScreen(props) {
size={25} size={25}
color={colors.primary} color={colors.primary}
/> />
<GenderPicker value={gender} setValue={setGender} />
<GenderPicker name="gender" />
</View> </View>
<Text style={styles.labelStyle}>Estado*:</Text> <Text style={styles.labelStyle}>Estado*:</Text>
@ -311,7 +340,7 @@ export default function RegisterScreen(props) {
size={25} size={25}
color={colors.primary} color={colors.primary}
/> />
<StatePicker value={state} setValue={setState} />
<StatePicker name="state" />
</View> </View>
<Text style={styles.labelStyle}>Cidade*:</Text> <Text style={styles.labelStyle}>Cidade*:</Text>
@ -321,7 +350,7 @@ export default function RegisterScreen(props) {
size={25} size={25}
color={colors.primary} color={colors.primary}
/> />
<CityPicker value={city} setValue={setCity} state={state} />
<CityPicker name={"city"} />
</View> </View>
<Text style={styles.labelStyle}>Tipo de instituição:</Text> <Text style={styles.labelStyle}>Tipo de instituição:</Text>
@ -331,10 +360,7 @@ export default function RegisterScreen(props) {
size={25} size={25}
color={colors.primary} color={colors.primary}
/> />
<InstitutionPicker
value={institution}
setValue={setInstitution}
/>
<InstitutionPicker name="institution" />
</View> </View>
<Text style={styles.labelStyle}>Nome da instituição</Text> <Text style={styles.labelStyle}>Nome da instituição</Text>
@ -355,6 +381,30 @@ export default function RegisterScreen(props) {
/> />
</View> </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 <SubmitButton
flex={1} flex={1}
title="cadastrar" title="cadastrar"

Loading…
Cancel
Save