fga-eps-mds#166 - MINOR: Small refactoring in GenericField

Ronyell · Apr 19, 2018 · 2e89a90 · 2e89a90
1 parent 34686b6
commit 2e89a90
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 29 deletions.
diff --git a/__tests__/screens/__snapshots__/RegisterScreen.test.js.snap b/__tests__/screens/__snapshots__/RegisterScreen.test.js.snap
@@ -37,9 +37,9 @@ exports[`Testing RegisterScreen renders as expected 1`] = `
           errorMessage="Está errado!"
           header="Genérico"
           icon="chevrons-up"
-          message="Componente de Input"
+          placeholderMessage="Componente de Input"
+          regexInput={/\\\\w\\{6,\\}/}
           setStateValue={[Function]}
-          validorRegex={/\\\\w\\{6,\\}/}
         />
         <Text
           accessible={true}

diff --git a/src/components/GenericField.js b/src/components/GenericField.js
@@ -11,58 +11,53 @@ export default class GenericField extends Component {
       styleInUse: styles.InputFieldStyle,
       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);
     });
   }
 
-  updateStyles() {
-    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', borderWidth: 2 }] });
+  }
+
+  handleInvalidText() {
+    this.setState({ errorTextArea: <Text>{this.props.errorMessage}</Text> });
+    this.setState({ styleInUse: [styles.InputFieldStyle, { borderColor: '#FF9999', 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) {
+    if (isTextValid) {
       console.warn('Valido');
-      this.setState({ validValue: true }, () => {
-        // This uses the function passed in the component creation
-        this.props.setStateValue(this.state.text);
 
-        this.updateStyles();
-      });
+      // setStateValue is the function in props at the component creation
+      this.props.setStateValue(this.state.text);
+      this.handleValidText();
     } else {
       console.warn('Invalido');
-      this.setState({ validValue: false }, () => {
-        this.updateStyles();
-      });
+      this.handleInvalidText();
     }
   }
 
   render() {
     return (
       <View>
-        <Text> {this.props.header.toUpperCase()} </Text>
+        <Text> {this.props.header.toUpperCase().trim()} </Text>
         <TextInput
           style={this.state.styleInUse}
-          placeholder={this.props.message}
+          placeholder={this.props.placeholderMessage.trim()}
           value={this.state.test}
           onChangeText={text => this.handleInput(text)}
         />
@@ -76,9 +71,9 @@ export default class GenericField extends Component {
 
 GenericField.propTypes = {
   header: PropTypes.string.isRequired,
-  message: PropTypes.string.isRequired,
+  placeholderMessage: PropTypes.string.isRequired,
   setStateValue: PropTypes.func.isRequired,
-  validorRegex: PropTypes.string.isRequired,
+  regexInput: PropTypes.string.isRequired,
   errorMessage: PropTypes.string.isRequired,
 };
 

diff --git a/src/screens/RegisterScreen.js b/src/screens/RegisterScreen.js
@@ -260,11 +260,11 @@ export default class RegisterScreen extends React.Component {
 
               <GenericField
                 header="Genérico"
-                message="Componente de Input"
+                placeholderMessage="Componente de Input"
                 icon="chevrons-up"
                 setStateValue={newValue => this.setState({ teste: newValue })}
                 onChange={console.warn('OnChange', this.state.teste)}
-                validorRegex={sixMoreWordCharRegex}
+                regexInput={sixMoreWordCharRegex}
                 errorMessage="Está errado!"
               />