fga-eps-mds#166 - Initial field changes

Co-authored-by: Matheus Oliveira <matheus_oliveira30@hotmail.com> Co-authored-by: Rudmar <rudmar_junior@hotmail.com>
Ronyell · May 15, 2018 · 5eb0b18 · 5eb0b18
1 parent cf8fcdc
commit 5eb0b18
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 101 deletions.
diff --git a/__tests__/screens/RegisterScreen.test.js b/__tests__/screens/RegisterScreen.test.js
@@ -8,6 +8,7 @@ import RegisterScreenContainer from '../../src/Containers/RegisterScreenContaine
 import RegisterScreen from '../../src/screens/RegisterScreen';
 import CpfField from '../../src/components/CpfField';
 import NameField from '../../src/components/NameField';
+import GenericField from '../../src/components/GenericField';
 import EmailField from '../../src/components/EmailField';
 import PasswordField from '../../src/components/PasswordField';
 import PhoneField from '../../src/components/PhoneField';
@@ -67,19 +68,19 @@ describe('Testing RegisterScreen Input', () => {
     expect(wrapper.state().profile.cpf).toEqual('11111111111');
   });
 
-  it('should change state when the text of name input component changes', () => {
-    const nameInputComponent = wrapper.find(NameField).dive().find(TextInput);
-    expect(wrapper.state('name')).toEqual('');
-    nameInputComponent.simulate('ChangeText', 'test');
-    expect(wrapper.state('name')).toEqual('test');
-  });
-
-  it('should change state when the text of email input component changes', () => {
-    const emailInputComponent = wrapper.find(EmailField).dive().find(TextInput);
-    expect(wrapper.state('email')).toEqual('');
-    emailInputComponent.simulate('ChangeText', 'test5@test.com');
-    expect(wrapper.state('email')).toEqual('test5@test.com');
-  });
+  // it('should change state when the text of name input component changes', () => {
+  //   const nameInputComponent = wrapper.find(GenericField).dive().find(TextInput);
+  //   expect(wrapper.state('name')).toEqual('');
+  //   nameInputComponent.simulate('ChangeText', 'test');
+  //   expect(wrapper.state('name')).toEqual('test');
+  // });
+
+  // it('should change state when the text of email input component changes', () => {
+  //   const emailInputComponent = wrapper.find(EmailField).dive().find(TextInput);
+  //   expect(wrapper.state('email')).toEqual('');
+  //   emailInputComponent.simulate('ChangeText', 'test5@test.com');
+  //   expect(wrapper.state('email')).toEqual('test5@test.com');
+  // });
 
   it('should change state when the text of password input component changes', () => {
     const passwordInputComponent = wrapper.find(PasswordField).at(0).dive().find(TextInput);

diff --git a/__tests__/screens/__snapshots__/RegisterScreen.test.js.snap b/__tests__/screens/__snapshots__/RegisterScreen.test.js.snap
@@ -34,11 +34,12 @@ exports[`Testing RegisterScreen renders as expected 1`] = `
         }
       >
         <GenericField
-          errorMessage="Está errado!"
-          header="Genérico"
+          errorMessage="Por favor, digite um nome válido."
+          header="Nome"
           icon="chevrons-up"
-          placeholderMessage="Componente de Input"
-          regexInput={/\\\\w\\{6,\\}/}
+          keyboardType="default"
+          placeholderMessage="Digite o seu nome"
+          regexInput={/\\(\\[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ \\]\\)\\{3,\\}/}
           setStateValue={[Function]}
         />
         <Text
@@ -53,33 +54,14 @@ exports[`Testing RegisterScreen renders as expected 1`] = `
           callback={[Function]}
           value=""
         />
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-        >
-          Nome
-        </Text>
-        <NameField
-          callback={[Function]}
-          value=""
-        />
-        <Text
-          accessible={true}
-          allowFontScaling={true}
-          disabled={false}
-          ellipsizeMode="tail"
-        >
-          Email
-        </Text>
-        <EmailField
-          callback={[Function]}
-          onSubmitEditing={[Function]}
-          placeholder="Digite o seu email"
-          size={26}
-          value=""
-          width={null}
+        <GenericField
+          errorMessage="Por favor, digite um email válido."
+          header="Email"
+          icon="chevrons-up"
+          keyboardType="email-address"
+          placeholderMessage="Digite um email que você tenha acesso"
+          regexInput={/\\^\\(\\(\\[\\^<>\\(\\)\\\\\\[\\\\\\]\\\\\\\\\\.,;:\\\\s@"\\]\\+\\(\\\\\\.\\[\\^<>\\(\\)\\\\\\[\\\\\\]\\\\\\\\\\.,;:\\\\s@"\\]\\+\\)\\*\\)\\|\\("\\.\\+"\\)\\)@\\(\\(\\\\\\[\\[0-9\\]\\{1,3\\}\\\\\\.\\[0-9\\]\\{1,3\\}\\\\\\.\\[0-9\\]\\{1,3\\}\\\\\\.\\[0-9\\]\\{1,3\\}\\]\\)\\|\\(\\(\\[a-zA-Z\\\\-0-9\\]\\+\\\\\\.\\)\\+\\[a-zA-Z\\]\\{2,\\}\\)\\)\\$/}
+          setStateValue={[Function]}
         />
         <Text
           accessible={true}

diff --git a/src/RegexList.js b/src/RegexList.js
@@ -0,0 +1,12 @@
+/* eslint-disable no-useless-escape */
+
+const regex = {
+  cpfRegex: /[0-9]{11}/,
+  nameRegex: /([A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]){3,}/,
+  emailRegex: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+  passwordRegex: /^(?=.{6,})(?!.*\s).*$/,
+  phoneRegex1: /[0-9]{11}/,
+  phoneRegex2: /[0-9]{10}/,
+};
+
+export default regex;
diff --git a/src/components/GenericField.js b/src/components/GenericField.js
@@ -1,80 +1,86 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text, View, TextInput } from 'react-native';
+import { FontAwesome } from '@expo/vector-icons';
 import styles from '../Styles/GeneralStyles';
 
 export default class GenericField extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      styleInUse: styles.InputFieldStyle,
+      styleInUse: styles.genericViewSection,
       errorTextArea: <Text />,
       text: '',
-      validValue: -1,
     };
   }
 
   handleInput(newText) {
     this.setState({ text: newText.trim() }, () => {
-      this.validateText(this.state.text, this.props.validorRegex);
+      this.validateText(this.state.text, this.props.regexInput);
     });
   }
 
-  handleUpdate() {
-    if (this.state.validValue) {
-      this.setState({ errorTextArea: <Text /> });
-      this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#80FF80', borderWidth: 2 }] });
-    } else {
-      this.setState({ errorTextArea: <Text>{this.props.errorMessage}</Text> });
-      this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#FF9999', borderWidth: 2 }] });
-    }
+  handleValidText() {
+    this.setState({ errorTextArea: <Text /> });
+    this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#80FF80', backgroundColor: '#d1ffd1', borderWidth: 2 }] });
+  }
+
+  handleInvalidText() {
+    this.setState({ errorTextArea: <Text>{this.props.errorMessage}</Text> });
+    this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#FF9999', backgroundColor: '#ffd6d6', borderWidth: 2 }] });
   }
 
   validateText(text, regexTest) {
     if (regexTest.global) {
-      console.warn('validateText()', 'Regexp using global flag! The results may be wrong.');
+      console.warn('validateText()', 'RegExp using global flag! The results may be wrong.');
     } else {
       // Do nothing
     }
 
-    const isValid = regexTest.test(text);
+    const isTextValid = regexTest.test(text);
 
-    if (isValid) {
-      console.warn('Valido');
-      this.setState({ validValue: true }, () => {
-        this.handleUpdate();
-      });
+    if (isTextValid) {
+      // setStateValue is the function in props at the component creation
+      this.props.setStateValue(this.state.text);
+      this.handleValidText();
+    } else if (!isTextValid && text === '') {
+      // This case is for empty text
+      this.setState({ styleInUse: styles.genericViewSection });
     } else {
-      console.warn('Invalido');
-      this.setState({ validValue: false }, () => {
-        this.handleUpdate();
-      });
+      this.handleInvalidText();
     }
   }
 
   render() {
     return (
       <View>
-        <Text> {this.props.header.toUpperCase()} </Text>
-        <TextInput
-          style={this.state.styleInUse}
-          placeholder={this.props.message}
-          value={this.state.test}
-          onChangeText={text => this.handleInput(text)}
-        />
+        <Text> {this.props.header.toUpperCase().trim()} </Text>
+        <View style={this.state.styleInUse}>
+          <FontAwesome name="user-circle" style={styles.icon} size={26} color="black" />
+          <TextInput
+            style={styles.InputStyle}
+            placeholder={this.props.placeholderMessage.trim()}
+            placeholderTextColor="#565454"
+            value={this.state.test}
+            keyboardType={this.props.keyboardType}
+            underlineColorAndroid="transparent"
+            onChangeText={text => this.handleInput(text)}
+          />
+        </View>
 
         {this.state.errorTextArea}
-
       </View>
     );
   }
 }
 
 GenericField.propTypes = {
   header: PropTypes.string.isRequired,
-  message: PropTypes.string.isRequired,
-  validorRegex: PropTypes.string.isRequired,
+  placeholderMessage: PropTypes.string.isRequired,
+  setStateValue: PropTypes.func.isRequired,
+  regexInput: PropTypes.string.isRequired,
+  keyboardType: PropTypes.string.isRequired,
   errorMessage: PropTypes.string.isRequired,
 };
 

diff --git a/src/screens/RegisterScreen.js b/src/screens/RegisterScreen.js
@@ -30,15 +30,14 @@ import {
 import { logInfo } from '../../logConfig/loggers';
 import brazilianStates from '../constants/brazilianStates';
 import CpfField from '../components/CpfField';
-import NameField from '../components/NameField';
-import EmailField from '../components/EmailField';
 import PasswordField from '../components/PasswordField';
 import GenericField from '../components/GenericField';
 import PhoneField from '../components/PhoneField';
 import DropdownComponent from '../components/DropdownComponent';
 import MunicipalDistrict from '../components/MunicipalDistrict';
 import ButtonWithActivityIndicator from '../components/ButtonWithActivityIndicator';
 import { backHandlerPop } from '../NavigationFunctions';
+import regex from '../../src/RegexList';
 
 const FILE_NAME = 'RegisterScreen.js';
 
@@ -248,24 +247,21 @@ export default class RegisterScreen extends React.Component {
     logInfo(FILE_NAME, 'render()',
       `State of register page: ${JSON.stringify(this.state, null, 2)}`);
 
-    // Testing regex list
-    const sixMoreWordCharRegex = /\w{6,}/;
-
     return (
       <View style={styles.principal}>
         <Header />
         <KeyboardAvoidingView style={styles.content} behavior="padding">
           <ScrollView>
             <View style={{ paddingHorizontal: 15 }}>
-
+              {/* Name Field */}
               <GenericField
-                header="Genérico"
-                placeholderMessage="Componente de Input"
+                header="Nome"
+                placeholderMessage="Digite o seu nome"
                 icon="chevrons-up"
-                setStateValue={newValue => this.setState({ teste: newValue })}
-                onChange={console.warn('OnChange', this.state.teste)}
-                regexInput={sixMoreWordCharRegex}
-                errorMessage="Está errado!"
+                setStateValue={newValue => this.setState({ name: newValue })}
+                keyboardType="default"
+                regexInput={regex.nameRegex}
+                errorMessage="Por favor, digite um nome válido."
               />
 
               <Text>CPF</Text>
@@ -275,19 +271,15 @@ export default class RegisterScreen extends React.Component {
                   this.setState({ profile: { ...this.state.profile, cpf: validCpf } })}
               />
 
-              <Text>Nome</Text>
-              <NameField
-                value={this.state.name}
-                callback={validName => this.setState({ name: validName })}
-              />
-
-              <Text>Email</Text>
-
-              <EmailField
-                value={this.state.email}
-                callback={validEmail => this.setState({ email: validEmail })}
-                placeholder="Digite o seu email"
-                size={26}
+              {/* Email Field */}
+              <GenericField
+                header="Email"
+                placeholderMessage="Digite um email que você tenha acesso"
+                icon="chevrons-up"
+                setStateValue={newValue => this.setState({ email: newValue })}
+                keyboardType="email-address"
+                regexInput={regex.emailRegex}
+                errorMessage="Por favor, digite um email válido."
               />
 
               <Text>Senha</Text>