exemple de refactoring
import React from 'react';
import { StyleSheet, ScrollView, KeyboardAvoidingView, Button, Text, View, Switch } from 'react-native';
import TextEntry from './Components/TextEntry'
import useful from "./useful";
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F1F1F5',
justifyContent: 'center'
},
grayLight:{
color: "#a9a9ad"
}
});
const titlePassword ='Le mot de passe doit comporter au moins 6 caractéres sans accent ni tiret ni espace et au moins une lettre';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
email: null,
password: null
}
this.lastName = React.createRef();
this.firstName = React.createRef();
this.email = React.createRef();
this.password = React.createRef();
}
focusLastName = () => {
this.lastName.current.focus()
};
focusEmail = () => {
this.email.current.focus()
};
focusPassword = () => {
this.password.current.focus()
};
submit = () => {
const {email, password} = this.state
useful(email, password)
};
render() {
console.log(this.state.email)
console.log(this.state.password)
return (
<KeyboardAvoidingView style={{flex: 1}} behavior="padding" enabled>
<ScrollView contentContainerStyle={styles.container}>
{this.renderUSername()}
{this.renderFirstname()}
{this.renderLastname()}
{this.renderEmail()}
{this.renderPassword()}
{this.renderButton()}
</ScrollView>
</KeyboardAvoidingView>
);
}
renderUSername = () => (
<TextEntry
onSubmitEditing={this.focusLastName}
placeholder="Username"
title="Username"
returnKeyType='next'
textRef={this.firstName}
/>
)
renderFirstname = () => (
<TextEntry
onSubmitEditing={this.focusLastName}
placeholder="Nom"
title="Nom"
returnKeyType='next'
textRef={this.firstName}
/>
);
renderLastname = () => (
<TextEntry
placeholder="Prenom"
title="Prenom"
returnKeyType='next'
textRef={this.lastName}
onSubmitEditing={this.focusEmail}
/>
);
renderEmail = () => (
<TextEntry
placeholder="Email"
title="Email"
returnKeyType='next'
textRef={this.email}
onSubmitEditing={this.focusPassword}
onChangeText={(email) => this.setState({email})}
/>
);
renderPassword = () => (
<>
<TextEntry
placeholder="password"
title="password"
returnKeyType='next'
secureTextEntry={true}
textRef={this.password}
onChangeText={password => this.setState({password})}
/>
<Text style={styles.grayLight}>{titlePassword}🤗</Text>
</>
);
renderButton = () => (
<Button title="Submit" onPress={() => this.submit()}/>
)
}