mifi/Eventment
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

- Wiring up nom and phone registration bits

Browse Source 
- Added guided registration
This commit is contained in:
Mike Fitzpatrick
2019-08-14 11:18:21 -04:00
parent cf07ab1c2e
commit c146884636
11 changed files with 190 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/api/helpers.js
View File

@@ -33,6 +33,11 @@ export const formatPostData = (body) => {
return postData;
};
export const formatJsonData = (body) => {
console.log('formateJsonBody:', body);
return body; //JSON.stringify(body);
};
const parseQueryParamsString = (queryParams) => {
if (typeof queryParams !== 'string') {
return null;

9
app/api/index.js
View File

@@ -1,6 +1,7 @@
import {
constructUrl,
formatPostData,
formatJsonData,
parseQueryParams,
request,
unwrapJson,
@@ -74,9 +75,15 @@ export const requestPost = (options) => {
queryParams = [],
requestOptions = {},
isFormattedPostData = false,
shouldUseFormData = false,
} = options;
const params = parseQueryParams(queryParams || []);
let postData = isFormattedPostData ? body : null;
if (!postData) {
postData = shouldUseFormData ? formatPostData(body) : formatJsonData(body);
}
if (params === null) {
throw new Error('invalid queryParams');
@@ -88,7 +95,7 @@ export const requestPost = (options) => {
...DefaultRequestOptions,
...requestOptions,
method: 'POST',
body: isFormattedPostData ? body : formatPostData(body),
body: postData,
})
.then(validateResponse)
.then(unwrapJson);

2
app/api/profile.js
View File

@@ -1,7 +1,7 @@
import { API_ENDPOINTS, requestGet, requestPost } from './index.js';
export const getEmailAvailability = (email) =>
requestGet(`${API_ENDPOINTS.VALIDATE_SIGNUP_EMAIL}/&{encodeURI(email)}`);
requestGet(`${API_ENDPOINTS.VALIDATE_SIGNUP_EMAIL}/${encodeURI(email)}`);
export const getNomAvailaibility = (nomDeBid) =>
requestGet(`${API_ENDPOINTS.VALIDATE_SIGNUP_NOM}/${encodeURI(nomDeBid)}`);

19
app/components/Profile/EditNomDeBid.js
View File

@@ -22,21 +22,21 @@ export default function EditNomDeBid({
updateNomDeBid,
}) {
const [newNom, setNomDeBid] = useState(isGeneratedNomDeBid || !nomDeBid ? '' : nomDeBid);
const [isNomValid, setValidNom] = useState(false);
const [isNomValid, setValidNom] = useState(null);
const _handleEndEditing = (nomDeBid) => {
getNomAvailaibility(nomDeBid).then((result) => {
const _handleEndEditing = () => {
getNomAvailaibility(newNom).then((result) => {
setValidNom(result.available);
if (isStandalone) {
updateNomDeBid({ nomDeBid });
updateNomDeBid(newNom);
}
});
};
const _handleSubmitNom = () => {
if (isNomValid) {
updateNomDeBid({ newNom });
updateNomDeBid(newNom);
}
};
@@ -48,12 +48,19 @@ export default function EditNomDeBid({
<View style={styles.profileFormWrap}>
<Text style={styles.hintText}>{explanationString}</Text>
<TextInput
autoCapitalize="none"
onChangeText={(text) => setNomDeBid(text)}
onEndEditing={(text) => _handleEndEditing(text)}
onEndEditing={() => _handleEndEditing()}
placeholder="nom de bid"
style={[styles.textInput, styles.requiredInput]}
value={newNom}
/>
{isNomValid === false && (
<Text style={{color:'red'}}>Nom De Bid is taken!</Text>
)}
{isNomValid === true && (
<Text style={{color:'green'}}>Nom De Bid is available!</Text>
)}
{!isStandalone && (
<Button
title={STRINGS.SUBMIT_NOM}

225
app/components/Profile/EditProfile.js
View File

@@ -11,10 +11,12 @@ import PhoneListInput from './PhoneInput/PhoneListInput.js';
import styles from './Profile.styles.js';
const STRINGS = {
AVATAR_HEADING: 'Want to add a picture?',
CANCEL: 'Cancel',
NOM_HEADING: 'Nom de Bid',
PASSWORD_HEADING: 'Password',
PERSONAL_HEADING: 'A bit about you...',
EMAIL_HEADING: 'Email (this will be your username)',
NOM_HEADING: 'and a Nom de Bid - your bidding alias!',
PASSWORD_HEADING: 'For security, let\'s choose a password',
PERSONAL_HEADING: 'Great! And now a bit about you...',
SAVE_PROFILE: 'Save profile',
};
@@ -28,6 +30,7 @@ export default class EditProfile extends Component {
firstName: PropTypes.string,
initials: PropTypes.string,
isGeneratedNomDeBid: PropTypes.bool,
isGuided: PropTypes.bool,
isRegsiteredAccount: PropTypes.bool,
lastName: PropTypes.string,
nomDeBid: PropTypes.string,
@@ -46,6 +49,7 @@ export default class EditProfile extends Component {
firstName: null,
initials: null,
isGeneratedNomDeBid: false,
isGuided: false,
isRegsiteredAccount: false,
lastName: null,
nomDeBid: null,
@@ -55,6 +59,16 @@ export default class EditProfile extends Component {
};
}
static validatePasswordMatch(password, passwordCheck) {
if ((!password || !passwordCheck) ||
(password || passwordCheck && password.length === passwordCheck.length)
){
return null;
}
return password === passwordCheck;
}
constructor(props) {
super(props);
@@ -64,11 +78,10 @@ export default class EditProfile extends Component {
email: this.props.email,
firstName: this.props.firstName,
lastName: this.props.lastName,
invalidEmail: false,
invalidNomDeBid: false,
invalidEmail: null,
nomDeBid: this.props.nomDeBid,
password: this.props.password,
passwordsMismatch: false,
passwordCheck: null,
phones: this.props.phones,
};
@@ -78,32 +91,22 @@ export default class EditProfile extends Component {
_validateEmail() {
getEmailAvailability(this.state.email)
.then(({ available = false }) =>
this.setState('invalidEmail', !available),
);
}
_validateNomDeBid() {
getNomAvailability(this.state.nomDeBid)
.then(({ available = false }) =>
this.setState('invalidNomDeBid', !available),
);
}
_validatePasswordMatch(password) {
this.setState({ passwordsMismatch: this.state.password !== password });
.then((result) => {
console.log(`_validateEmail => getEmailAvailability(${this.state.email}):`, result);
this.setState({ invalidEmail: !result.available });
});
}
getProfileFromState() {
return {
addresses: this.state.addresses,
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,
phones: this.state.phones.toArray(),
};
}
@@ -123,7 +126,7 @@ export default class EditProfile extends Component {
isFormComplete() {
const { showPasswordEntry } = this.props;
const { password } = this.state;
const { password, passwordCheck } = this.state;
return (
!this.state.invalidEmail &&
@@ -133,96 +136,130 @@ export default class EditProfile extends Component {
!!this.state.email &&
!!this.state.nomDeBid &&
!!this.state.phones.size &&
((showPasswordEntry && !!password) || !showPasswordEntry)
((showPasswordEntry && EditProfile.validatePasswordMatch(password, passwordCheck)) || !showPasswordEntry)
);
}
render() {
const { isGeneratedNomDeBid, isRegsiteredAccount, showPasswordEntry } = this.props;
const { addresses, avatar, firstName, lastName, phones } = this.state;
const { isGeneratedNomDeBid, isGuided, isRegsiteredAccount, showPasswordEntry } = this.props;
const { addresses, avatar, firstName, invalidEmail, lastName, password, passwordCheck, phones } = this.state;
const addressesTitle = 'Addresses';
const numbersTitle = 'Numbers';
return (
<ScrollView style={styles.profileFormWrap}>
<View style={[styles.sectionWrap, styles.avatarWrap]}>
{avatar !== null ? (
<Avatar source={{ uri: this.state.avatar }} showEditButton />
) : (
<Avatar title={this.props.initials} showEditButton />
)}
</View>
<View style={[styles.sectionWrap, styles.nameWrap]}>
<Text style={styles.groupHeading}>{STRINGS.PERSONAL_HEADING}</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>
<View style={[styles.sectionWrap, styles.emailWrap, styles.requiredWrap]}>
<Text style={styles.groupHeading}>{STRINGS.EMAIL_HEADING}</Text>
<TextInput
autoCapitalize="none"
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}
value={this.state.email || ''}
/>
</View>
{showPasswordEntry && (
<View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
<Text style={styles.groupHeading}>{STRINGS.PASSWORD_HEADING}</Text>
<TextInput
onChangeText={(text) => this.setState({ password: text })}
placeholder="password"
secureTextEntry
style={[styles.textInput, styles.requiredInput]}
/>
<TextInput
onEndEditing={(text) => this._validatePasswordMatch(text)}
placeholder="re-enter password"
secureTextEntry
style={[styles.textInput, styles.requiredInput]}
/>
</View>
)}
{(isGeneratedNomDeBid || !isRegsiteredAccount) && (
<View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
<Text style={styles.groupHeading}>{STRINGS.NOM_HEADING}</Text>
<EditNomDeBid
isGeneratedNomDeBid={isGeneratedNomDeBid}
isStandalone
nomDeBid={this.state.nomDeBid}
updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
/>
</View>
)}
<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]}>
<Text style={styles.groupHeading}>{addressesTitle}</Text>
{addresses !== null && addresses.size > 0 && (
/* LIST ADDRESSES */
<View />
{invalidEmail === true && (
<View style={styles.emailTaken}>
<Text style={{color:'red'}}>{`You've already registered!`}</Text>
<Button title="Forgot Password" onPress={() => {}} />
</View>
)}
{invalidEmail === false && (
<Text style={{color:'green'}}>{`Great, lets add a bit more detail...`}</Text>
)}
<Button title="Add address" onPress={() => false} />
</View>
<View style={styles.register}>
<Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
{(!isGuided || (isGuided && invalidEmail === false)) && (
<View style={styles.rollDownPanel}>
<View style={[styles.sectionWrap, styles.nameWrap]}>
<Text style={styles.groupHeading}>{STRINGS.PERSONAL_HEADING}</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>
{showPasswordEntry &&
(!isGuided || (isGuided && firstName !== null && lastName !== null)) &&
(
<View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
<Text style={styles.groupHeading}>{STRINGS.PASSWORD_HEADING}</Text>
<TextInput
onChangeText={(text) => this.setState({ password: text })}
placeholder="password"
secureTextEntry
style={[styles.textInput, styles.requiredInput]}
/>
<TextInput
onChangeText={(text) => this.setState({ passwordCheck: text })}
placeholder="re-enter password"
secureTextEntry
style={[styles.textInput, styles.requiredInput]}
/>
{EditProfile.validatePasswordMatch(password, passwordCheck) === true && (
<Text style={{ color: 'green' }}>{`That's a match!`}</Text>
)}
{EditProfile.validatePasswordMatch(password, passwordCheck) === false && (
<Text style={{ color: 'red' }}>{`Well that's not a match...`}</Text>
)}
</View>
)}
{(isGeneratedNomDeBid || !isRegsiteredAccount) &&
(!isGuided || (isGuided && EditProfile.validatePasswordMatch(password, passwordCheck) === true)) &&
(
<View style={[styles.sectionWrap, styles.nomWrap, styles.requiredWrap]}>
<Text style={styles.groupHeading}>{STRINGS.NOM_HEADING}</Text>
<EditNomDeBid
isGeneratedNomDeBid={isGeneratedNomDeBid}
isStandalone
nomDeBid={this.state.nomDeBid}
updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
/>
</View>
)}
{(!isGuided || (isGuided && this.state.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]}>
<Text style={styles.groupHeading}>{addressesTitle}</Text>
{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>
)}
{(!isGuided || (isGuided && phones !== null && phones.size > 0)) && (
<View style={styles.register}>
<Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
</View>
)}
</View>
)}
<View style={styles.cancelWrap}>
<Button title={STRINGS.CANCEL} onPress={this.handleCancel} />
</View>
</ScrollView>

19
app/components/Profile/PhoneInput/PhoneListInput.js
View File

@@ -34,7 +34,12 @@ export default class PhoneListInput extends Component {
constructor(props) {
super(props);
this.state = { ...defaultState };
this.handleAdd = this.handleAdd.bind(this);
this.handleEdit = this.handleEdit.bind(this);
this.handleEditCancel = this.handleEditCancel.bind(this);
}
handleAdd() {
@@ -78,8 +83,8 @@ export default class PhoneListInput extends Component {
{phones.map((phone, index) =>
<PhoneListItem
index={index}
label={phone.get('label')}
number={phone.get('number')}
label={phone.label}
number={phone.number}
handleDelete={this.props.handleDelete}
handleEdit={this.props.handleEdit ? this.handleEdit : null}
handleEditStart={this.handleEditStart}
@@ -88,7 +93,7 @@ export default class PhoneListInput extends Component {
</View>
)}
<TextInput
onChangeText={(text) => this.setState({ editingPhone: text })}
onChangeText={(text) => this.setState({ newPhone: text })}
placeholder="phone number"
style={[styles.textInput, styles.requiredInput]}
value={this.state.newPhone}
@@ -97,13 +102,19 @@ export default class PhoneListInput extends Component {
onValueChange={(type, index) => this.setState({ newPhoneType: type })}
selectedValue={this.state.newPhoneType}
>
{PHONE_TYPES.map((type) => <Picker.Item label={type.label} value={type.value} />)}
{PHONE_TYPES.map((type) => <Picker.Item key={type.value} {...type} />)}
</Picker>
<Button
disabled={!this.state.newPhone && !this.state.newPhoneType}
onPress={isEditing ? () => this.handleEdit(index) : this.handleAdd}
title={isEditing ? 'update' : 'add number'}
/>
{isEditing && (
<Button
onPress={this.handleEditCancel}
title="cancel"
/>
)}
</View>
);
}

8
app/components/Profile/PhoneInput/PhoneListItem.js
View File

@@ -9,12 +9,12 @@ export default function PhoneListItem({ index, label, number, handleDelete, hand
return (
<View style={styles.listItem}>
<View style={styles.listValue}>
<Text style={styles.value}>{phone.get('number')}</Text>
<Text style={styles.label}>{phone.get('label')}</Text>
<Text style={styles.value}>{number}</Text>
<Text style={styles.label}>{label}</Text>
</View>
<View style={styles.listActions}>
{handleEdit !== null && <Button title={`Edit`} onPress={() => this.handleEditStart(index)} />}
<Button title={`X`} onPress={() => this.props.handleDelete(index)} />
{handleEdit !== null && <Button title={`Edit`} onPress={() => handleEditStart(index)} />}
<Button title={`X`} onPress={() => handleDelete(index)} />
</View>
</View>
);

4
app/components/Profile/Profile.js
View File

@@ -7,6 +7,7 @@ import ViewProfile from './ViewProfile.container.js';
export default function Profile({
cancelEditAction,
isGuidedRegistration,
isInEditMode,
saveProfileAction,
saveProfileLabel,
@@ -28,6 +29,7 @@ export default function Profile({
{editMode ? (
<EditProfile
cancelEditAction={_cancelEditAction}
isGuided={isGuidedRegistration}
saveProfileAction={_saveProfileAction}
saveProfileLabel={saveProfileLabel}
/>
@@ -40,12 +42,14 @@ export default function Profile({
Profile.propTypes = {
cancelEditAction: PropTypes.func.isRequired,
isGuidedRegistration: PropTypes.bool,
isInEditMode: PropTypes.bool,
saveProfileAction: PropTypes.func.isRequired,
saveProfileLabel: PropTypes.string,
};
Profile.defaultProps = {
isGuidedRegistration: false,
isInEditMode: false,
saveProfileLabel: null,
};

4
app/components/Profile/Profile.styles.js
View File

@@ -12,9 +12,9 @@ export default StyleSheet.create({
sectionWrap: {
marginBottom: 15,
},
avatarWrap: {
emailWrap: {
marginBottom: 40,
marginTop: 30,
marginTop: 20,
textAlign: 'center',
},
groupHeading: {

12
app/constants/constants.js
View File

@@ -52,10 +52,10 @@ export const PERMISSIONS = {
FACEBOOK: ['email', 'public_profile'],
};
export const PHONE_TYPES = {
HOME: { label: 'home', value: 'home' },
MOBILE: { label: 'mobile', value: 'mobile' },
WORK: { label: 'work', value: 'work' },
};
export const PHONE_TYPES = [
{ label: 'home', value: 'home' },
{ label: 'mobile', value: 'mobile' },
{ label: 'work', value: 'work' },
];
export const PHONE_TYPE_DEFAULT = PHONE_TYPES.HOME.value;
export const PHONE_TYPE_DEFAULT = PHONE_TYPES[0].value;

1
app/screens/Register.js
View File

@@ -22,6 +22,7 @@ export default function Register({ doRegistration, navigation }) {
<Text style={styles.heading}>{title}</Text>
<EditProfile
cancelEditAction={() => navigation.goBack()}
isGuided
saveProfileAction={_doRegistration}
saveProfileLabel="Register"
showPasswordEntry