diff --git a/app/components/Profile/CreateProfile.js b/app/components/Profile/CreateProfile.js new file mode 100644 index 0000000..a6ea3ec --- /dev/null +++ b/app/components/Profile/CreateProfile.js @@ -0,0 +1,225 @@ +import { List } from 'immutable'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { Button, Picker, ScrollView, Text, TextInput, View } from 'react-native'; +import { Avatar } from 'react-native-elements'; + +import { getEmailAvailability, getNomAvailability } from '../../api/profile.js'; + +import EditNomDeBid from './ProfileInputs/EditNomDeBid.js'; +import EmailInput from './ProfileInputs/EmailInput.js'; +import PasswordInput from './ProfileInputs/PasswordInput.js'; +import PhoneListInput from './ProfileInputs/PhoneListInput.js'; + +import styles from './Profile.styles.js'; + +const STRINGS = { + BUTTONS: { + CANCEL: 'Cancel', + SUBMIT: 'Register', + }, + DEV: { + FORM_INCOMPLETE_SUBMIT: 'Incomplete form... how did the button become enabled?', + }, + ERRORS: { + FORM_SUBMIT_ERRORS: 'Please complete all of the required fields. They have bold labels.', + }, + HEADINGS: { + AVATAR: 'Want to add a picture?', + EMAIL: 'Email (this will be your username)', + NOM: 'and a Nom de Bid - your bidding alias!', + PASSWORD: 'For security, let\'s choose a password', + PERSONAL: 'Great! And now a bit about you...', + }, +}; + +export default class CreateProfile extends Component { + static get propTypes() { + return { + cancelEditAction: PropTypes.func.isRequired, + saveProfileAction: PropTypes.func.isRequired, + }; + } + + constructor(props) { + super(props); + + this.state = { + addresses: new List(), + avatar: null, + email: null, + firstName: null, + lastName: null, + invalidEmail: null, + nomDeBid: null, + password: null, + passwordMatch: false, + phones: new List(), + }; + + this.handleCancel = this.handleCancel.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + + this._handleValidPasswordEntry = this._handleValidPasswordEntry.bind(this); + } + + _handleComponentStateUpdate(key, value) { + this.setState({ [key]: value }); + } + + _handleValidPasswordEntry(password) { + if (!password) { + this.setState({ passwordMatch: false }); + return; + } + + this.setState({ password, passwordMatch: true }); + } + + _validateEmail() { + getEmailAvailability(this.state.email) + .then((result) => { + console.log(`_validateEmail => getEmailAvailability(${this.state.email}):`, result); + this.setState({ invalidEmail: !result.available }); + }); + } + + getProfileFromState() { + return { + addresses: this.state.addresses.toArray(), + 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.toArray(), + }; + } + + handleCancel() { + this.props.cancelEditAction(); + } + + handleSubmit() { + if (!this.isFormComplete()) { + console.error(STRINGS.DEV.FORM_INCOMPLETE_SUBMIT); + alert(STRINGS.ERRORS.FORM_SUBMIT_ERRORS); + return; + } + + this.props.saveProfileAction(this.getProfileFromState()); + } + + isFormComplete() { + return ( + !!this.state.email && + !!this.state.firstName && + !!this.state.lastName && + !!this.state.email && + !!this.state.nomDeBid && + !!this.state.phones.size && + this.state.passwordMatch && !!this.state.password + ); + } + + render() { + const { + addresses, + avatar, + email, + firstName, + lastName, + nomDeBid, + password, + passwordMatch, + phones + } = this.state; + + return ( + + + {STRINGS.HEADINGS.EMAIL} + this.setState({ email })} + isRequired + showContinueButton + /> + {email !== false && ( + + {`Great, lets add a bit more detail...`} + + )} + + {email !== null && ( + + {STRINGS.HEADINGS.PERSONAL} + this.setState({ firstName: text })} + placeholder="first name" + style={[styles.textInput, styles.requiredInput]} + value={this.state.firstName || ''} + /> + this.setState({ lastName: text })} + placeholder="last name" + style={[styles.textInput, styles.requiredInput]} + value={this.state.lastName || ''} + /> + + )} + {firstName !== null && lastName !== null && ( + + {STRINGS.HEADINGS.PASSWORD} + + + )} + {passwordMatch && ( + + {STRINGS.HEADINGS.NOM} + this.setState({ nomDeBid })} + /> + + )} + {nomDeBid !== null && ( + + + this.setState({ phones })} + handleDelete={(phones) => this.setState({ phones })} + handleEdit={(phones) => this.setState({ phones })} + phones={phones} + /> + + + {addresses !== null && addresses.size > 0 && ( + /* LIST ADDRESSES */ + + )} +