- Breaking up the profile
This commit is contained in:
Mike Fitzpatrick
225
app/components/Profile/CreateProfile.js
Normal file
225
app/components/Profile/CreateProfile.js
Normal file
@@ -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 (
|
||||
<ScrollView style={styles.profileFormWrap}>
|
||||
<View style={[styles.sectionWrap, styles.emailWrap, styles.requiredWrap]}>
|
||||
<Text style={styles.groupHeading}>{STRINGS.HEADINGS.EMAIL}</Text>
|
||||
<EmailInput
|
||||
handleValidEmailEntry={(email) => this.setState({ email })}
|
||||
isRequired
|
||||
showContinueButton
|
||||
/>
|
||||
{email !== false && (
|
||||
<Text style={{ color:'green', textAlign: 'center' }}>
|
||||
{`Great, lets add a bit more detail...`}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
{email !== null && (
|
||||
<View style={[styles.sectionWrap, styles.nameWrap]}>
|
||||
<Text style={styles.groupHeading}>{STRINGS.HEADINGS.PERSONAL}</Text>
|
||||
<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>
|
||||
)}
|
||||
{firstName !== null && lastName !== null && (
|
||||
<View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
|
||||
<Text style={styles.groupHeading}>{STRINGS.HEADINGS.PASSWORD}</Text>
|
||||
<PasswordInput handleValidPasswordEntry={this._handleValidPasswordEntry} />
|
||||
</View>
|
||||
)}
|
||||
{passwordMatch && (
|
||||
<View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
|
||||
<Text style={styles.groupHeading}>{STRINGS.HEADINGS.NOM}</Text>
|
||||
<EditNomDeBid
|
||||
isStandalone
|
||||
nomDeBid={this.state.nomDeBid}
|
||||
updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{nomDeBid !== null && (
|
||||
<View style={styles.rollDownPanel}>
|
||||
<View style={[styles.sectionWrap, styles.phonesWrap]}>
|
||||
<PhoneListInput
|
||||
handleAdd={(phones) => this.setState({ phones })}
|
||||
handleDelete={(phones) => this.setState({ phones })}
|
||||
handleEdit={(phones) => this.setState({ phones })}
|
||||
phones={phones}
|
||||
/>
|
||||
</View>
|
||||
<View style={[styles.sectionWrap, styles.addressesWrap]}>
|
||||
{addresses !== null && addresses.size > 0 && (
|
||||
/* LIST ADDRESSES */
|
||||
<View />
|
||||
)}
|
||||
<Button title="Add address" onPress={() => false} />
|
||||
</View>
|
||||
<View style={[styles.sectionWrap, styles.avatarWrap]}>
|
||||
<Text style={styles.groupHeading}>{STRINGS.AVATAR_HEADING}</Text>
|
||||
{avatar !== null ? (
|
||||
<Avatar source={{ uri: this.state.avatar }} showEditButton />
|
||||
) : (
|
||||
<Avatar title={this.props.initials} showEditButton />
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
{phones.size > 0 && (
|
||||
<View style={styles.register}>
|
||||
<Button title={STRINGS.BUTTONS.SUBMIT} onPress={this.handleSubmit} />
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.cancelWrap}>
|
||||
<Button title={STRINGS.BUTTONS.CANCEL} onPress={this.handleCancel} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user