- Stuff
This commit is contained in:
Mike Fitzpatrick
17
app/components/Profile/EditProfile.container.js
Normal file
17
app/components/Profile/EditProfile.container.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { commonProfileStateToProps } from './Profile.container.js';
|
||||
import EditProfile from './EditProfile.js';
|
||||
|
||||
const matchStateToProps = (dispatch) => {
|
||||
const commonProps = commonProfileStateToProps(state);
|
||||
const profile = getProfile(state);
|
||||
|
||||
return {
|
||||
...commonProps,
|
||||
firstName: profile.get('firstName'),
|
||||
lastName: profile.get('lastName'),
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(matchStateToProps, null)(EditProfile);
|
||||
178
app/components/Profile/EditProfile.js
Normal file
178
app/components/Profile/EditProfile.js
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
20
app/components/Profile/Profile.container.js
Normal file
20
app/components/Profile/Profile.container.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { getProfile } from '../selectors/profile.js';
|
||||
|
||||
import Profile from './Profile.js';
|
||||
|
||||
export const commonProfileStateToProps = (state) => {
|
||||
const profile = getProfile(state);
|
||||
|
||||
return {
|
||||
addresses: profile.get('addresses').toArray(),
|
||||
avatar: profile.get('avatar'),
|
||||
email: profile.get('email'),
|
||||
initials: profile.get('initials'),
|
||||
nomDeBid: profile.get('nomDeBid'),
|
||||
phones: profile.get('phones'),
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(commonProfileStateToProps, null)(Profile);
|
||||
50
app/components/Profile/Profile.js
Normal file
50
app/components/Profile/Profile.js
Normal file
@@ -0,0 +1,50 @@
|
||||
import React, { useState } from 'react';
|
||||
import { View } from 'react-native';
|
||||
|
||||
import EditProfile from './EditProfile.container.js';
|
||||
import ViewProfile from './ViewProfile.container.js';
|
||||
|
||||
export default function Profile({
|
||||
cancelEditAction,
|
||||
isInEditMode,
|
||||
saveProfileAction,
|
||||
saveProfileLabel,
|
||||
}) {
|
||||
const [editMode, setEditMode] = useState(isInEditMode);
|
||||
|
||||
const _cancelEditAction = () => {
|
||||
setEditMode(false);
|
||||
cancelEditAction();
|
||||
};
|
||||
|
||||
const _saveProfileAction = (profile) => {
|
||||
setEditMode(false);
|
||||
saveProfileAction(profile);
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
{editMode ? (
|
||||
<EditProfile
|
||||
cancelEditAction={_cancelEditAction}
|
||||
saveProfileAction={_saveProfileAction}
|
||||
saveProfileLabel={saveProfileLabel}
|
||||
/>
|
||||
) : (
|
||||
<ViewProfile editProfileAction={() => setEditMode(true)} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Profile.propTypes = {
|
||||
cancelEditAction: PropTypes.func.isRequired,
|
||||
isInEditMode: PropTypes.bool,
|
||||
saveProfileAction: PropTypes.func.isRequired,
|
||||
saveProfileLabel: PropTypes.string,
|
||||
};
|
||||
|
||||
Profile.defaultProps = {
|
||||
isInEditMode: false,
|
||||
saveProfileLabel: null,
|
||||
};
|
||||
0
app/components/Profile/Profile.styles.js
Normal file
0
app/components/Profile/Profile.styles.js
Normal file
17
app/components/Profile/ViewProfile.container.js
Normal file
17
app/components/Profile/ViewProfile.container.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { commonProfileStateToProps } from './Profile.container.js';
|
||||
import ViewProfile from './ViewProfile.js';
|
||||
|
||||
const matchStateToProps = (dispatch) => {
|
||||
const commonProps = commonProfileStateToProps(state);
|
||||
const profile = getProfile(state);
|
||||
|
||||
return {
|
||||
...commonProps,
|
||||
fullName: profile.get('fullName'),
|
||||
generatedNomDeBid: propfile.get('generatedNomDeBid'),
|
||||
};
|
||||
};
|
||||
|
||||
export default connect(matchStateToProps, null)(ViewProfile);
|
||||
102
app/components/Profile/ViewProfile.js
Normal file
102
app/components/Profile/ViewProfile.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import React, { useState } 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 = {
|
||||
EDIT: 'Edit profile',
|
||||
};
|
||||
|
||||
export default function ViewProfile({
|
||||
addresses,
|
||||
avatar,
|
||||
editProfileAction,
|
||||
email,
|
||||
fullName,
|
||||
generatedNomDeBid,
|
||||
initials,
|
||||
nomDeBid,
|
||||
phones,
|
||||
}) {
|
||||
const addressesCount = addresses.length;
|
||||
const phonesCount = phones.length;
|
||||
|
||||
const [isEditingNom, setEditNom] = useState(false);
|
||||
|
||||
return (
|
||||
<View style={styles.profileFormWrap}>
|
||||
<View style={styles.avatarWrap}>
|
||||
{avatar !== null ? (
|
||||
<Avatar source={{ uri: avatar }} />
|
||||
) : (
|
||||
<Avatar title={initials} />
|
||||
)}
|
||||
</View>
|
||||
<View style={styles.nameWrap}>
|
||||
<Text style={styles.fullName}>{fullName}</Text>
|
||||
<View style={styles.nomWrap}>
|
||||
{isEditingNom ? (
|
||||
<EditNomDeBid
|
||||
) : (
|
||||
<Text style={styles.nom}>{nomDeBid}</Text>
|
||||
{generatedNomDeBid && (
|
||||
<Button
|
||||
title="Set bidding alias"
|
||||
onPress={() => setEditNom(true)}
|
||||
/>
|
||||
)}
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.emailWrap}>
|
||||
<Text style={styles.label}>email</Text>
|
||||
<text style={styles.value}>{email}</Text>
|
||||
</View>
|
||||
<View style={styles.phonesWrap}>
|
||||
<Text style={styles.label}>numbers</Text>
|
||||
<Text style={styles.value}>{`${phonesCount} saved`}
|
||||
</View>
|
||||
<View style={styles.addressesWrap}>
|
||||
<Text style={styles.label}>addresses</Text>
|
||||
<Text style={styles.value}>{`${addressesCount} saved`}
|
||||
</View>
|
||||
{editProfileAction !== null && (
|
||||
<View style={styles.register}>
|
||||
<Button title={STRINGS.EDIT} onPress={editProfile} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
ViewProfile.propTypes = {
|
||||
addresses: PropTypes.array,
|
||||
avatar: PropTypes.string,
|
||||
editProfileAction: PropTypes.func,
|
||||
email: PropTypes.string,
|
||||
fullName: PropTypes.string,
|
||||
generatedNomDeBid: PropTypes.bool,
|
||||
initials: PropTypes.string,
|
||||
nomDeBid: PropTypes.string,
|
||||
phones: PropTypes.array,
|
||||
};
|
||||
|
||||
ViewProfile.defaultProps = {
|
||||
addresses: [],
|
||||
avatar: null,
|
||||
editProfileAction: null,
|
||||
email: null,
|
||||
fullName: null,
|
||||
generatedNomDeBid: false,
|
||||
initials: null,
|
||||
nomDeBid: null,
|
||||
phones: [],
|
||||
};
|
||||
|
||||
return (
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user