- Stuff

app/components/Profile/EditProfile.js

@@ -0,0 +1,178 @@
+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>
+        );
+    }
+}