Eventment/app/components/Profile/EditProfile.js

import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';
import { Avatar } from 'react-native-elements';

import { getEmailAvailability, getNomAvailability } from '../api/profile.js';

import styles from './Profile.styles.js';

const STRINGS = {
  CANCEL: 'Cancel',
  NOM_EXPLANATION: 'Selecting a nom de bid allows you to bid anonymously - or not. By default, we\'ll use your first initial and last name.',
  SAVE_PROFILE: 'Save profile',
};

export default class EditProfile extends Component {

    static get propTypes() {
        return {
            addresses: PropTypes.array,
            avatar: PropTypes.string,
            cancelEditAction: PropTypes.func.isRequired,
            email: PropTypes.string,
            firstName: PropTypes.string,
            initials: PropTypes.string,
            lastName: PropTypes.string,
            nomDeBid: PropTypes.string,
            phones: PropTypes.array,
            saveProfileAction: PropTypes.func.isRequired,
            saveProfileLabel: PropTypes.string,
        };
    }

    static get defaultProps() {
        return {
            addresses: null,
            avatar: null,
            email: null,
            firstName: null,
            initials: null,
            lastName: null,
            nomDeBid: null,
            phones: null,
            saveProfileLabel: STRINGS.SAVE_PROFILE,
        };
    }

    constructor() {
        super(props);

        this.state = {
            addresses: this.props.addresses,
            avatar: this.props.avatar,
            email: this.props.email,
            firstName: this.props.firstName,
            lastName: this.props.lastName,
            invalidEmail: false,
            invalidNomDeBid: false,
            nomDeBid: this.props.nomDeBid,
            password: this.props.password,
            phones: this.props.phones,
        };

        this.handleCancel = this.handleCancel.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    _validateEmail() {
        getEmailAvailability(this.state.email, (result) => this.setState('invalidEmail', !result.available));
    }

    _validateNomDeBid() {
        getNomAvailability(this.state.nomDeBid, (result) => this.setState('invalidNomDeBid', !result.available));
    }

    getProfileFromState() {
        return {
            addresses: this.state.addresses,
            avatar: this.state.avatar,
            email: this.state.email,
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            nomDeBid: this.state.nomDeBid,
            password: this.state.password,
            phones: this.state.phones,
        };
    }

    handleCancel() {
        this.props.cancelEditAction();
    }

    handleSubmit() {
        if (!this.isFormComplete()) {
            console.error('Incomplete form... how did the button become enabled?');
            alert('Please complete all of the required fields. They have bold labels.');
            return;
        }

        this.props.saveProfileAction(this.getProfileFromState());
    }

    isFormComplete() {
        return !this.state.invalidEmail && !this.state.invalidNomDeBid &&
            !!this.state.firstName && !!this.state.lastName && !!this.state.email &&
            !!this.state.nomDeBid && !!this.state.phones.length && !!this.state.password;
    }

    render() {
        const { avatar, firstName, lastName } = this.state;
        const avatarTitle = !avatar && firstName && lastName
            ? `${firstName.substring(0,1)}${lastName.substring(0,1)}`
            : null;

        return (
            <View style={styles.profileFormWrap}>
                <View style={styles.avatarWrap}>
                    {avatar !== null ? (
                        <Avatar source={{ uri: this.state.avatar }} showEditButton />
                    ) : (
                        <Avatar title={this.props.initials} showEditButton />
                    )}
                </View>
                <View style={styles.nameWrap}>
                    <TextInput
                        onChange={(text) => this.setState({ firstName: text })}
                        placeholder="first name"
                        style={[styles.textInput, styles.requiredInput]}
                        value={this.state.firstName}
                    />
                    <TextInput
                        onChange={(text) => this.setState({ lastName: text })}
                        placeholder="last name"
                        style={[styles.textInput, styles.requiredInput]}
                        value={this.state.lastName}
                    />
                </View>
                <View style={[styles.emailWrap, styles.requiredWrap]}>
                    <TextInput
                        keyboardType="email-address"
                        onChangeText={(text) => this.setState({ email: text })}
                        onEndEditing={(text) => this._validateEmail(text)}
                        placeholder="email address"
                        style={[styles.textInput, styles.requiredInput]}
                        value={this.state.email}
                    />
                </View>
                <View style={[styles.nomWrap, styles.requiredWrap]}>
                    <Text style={styles.hintText}>{STRINGS.NOM_EXPLANATION}</Text>
                    <TextInput
                        onChangeText={(text) => this.setState({ nomDeBid: text })}
                        onEndEditing={(text) => this._validateEmail(text)}
                        placeholder="nom de bid"
                        style={[styles.textInput, styles.requiredInput]}
                        value={this.state.nomDeBid}
                    />
                </View>
                <View style={styles.phonesWrap}>
                    <Text style={[styles.groupLabel, styles.requiredLabel]}>Numbers</Text>
                    {phones.length > 0 && (
                        // LIST PHONES
                    )}
                    <Button title="Add number" onPress={() => false}/>
                </View>
                <View style={styles.addressesWrap}>
                    <Text style={styles.groupLabel}>Addresses</Text>
                    {addresses.length > 0 && (
                        // LIST ADDRESSES
                    )}
                    <Button title="Add address" onPress={() => false}/>
                </View>
                <View style={styles.register}>
                    <Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
                    <Button title={STRINGS.CANCEL} onPress={this.handleCancel} />
                </View>
            </View>
        );
    }
}