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

- more

Browse Source
This commit is contained in:
Mike Fitzpatrick
2019-08-12 17:44:01 -04:00
parent 0f618fdd78
commit f0460a1b76
21 changed files with 432 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,9 +24,9 @@ export default class AppHeader extends Component {
return (
<Header
placement="left"
leftComponent={<HeaderContentRight navigation={navigation} />}
centerComponent={<HeaderTitle navigation={navigation} />}
rightComponent={<HeaderContentLeft navigation={navigation} />}
leftComponent={<HeaderContentLeft navigation={navigation} />}
rightComponent={<HeaderContentRight navigation={navigation} />}
/>
);
}

6
app/components/AppHeader/HeaderContentLeft.js
View File

@@ -32,7 +32,11 @@ export default function HeaderContentLeft({
return <BackIcon action={_goBack} />;
}
return <EventsIcon action={hasMultipleEvents ? _showEvents : null} />;
if (hasMultipleEvents) {
return <EventsIcon action={_showEvents} />;
}
return null;
}
HeaderContentLeft.propTypes = {

2
app/components/AppHeader/HeaderContentRight.js
View File

@@ -8,7 +8,7 @@ export default function HeaderContentRight({ hideUserProfileButton, navigation }
return null;
}
return <UserProfileButton />;
return <UserProfileButton navigation={navigation} />;
}
HeaderContentRight.propTypes = {

3
app/components/AppHeader/HeaderTitle/HeaderTitle.js
View File

@@ -8,6 +8,7 @@ import EventTitle from './EventTitle/EventTitle.container.js';
import styles from './HeaderTitle.styles.js';
const STRINGS = {
EVENTS: 'Events',
PROFILE: 'Profile',
};
@@ -34,7 +35,7 @@ export default function HeaderTitle({
if (activeRoute === 'Events') {
return (
<TouchableOpacity onPress={_goBack}>
<Text style={styles.screenHeader}>{STRINGS.PROFILE}</Text>
<Text style={styles.screenHeader}>{STRINGS.EVENTS}</Text>
</TouchableOpacity>
);
}

8
app/components/AppHeader/UserProfileButton/UserProfileButton.js
View File

@@ -13,8 +13,12 @@ export default function UserProfileButton({
navigation,
}) {
const _goToProfile = () => {
navigation.navigate('Profile');
return false;
if (isRegisteredAccount) {
navigation.navigate('Profile');
return false;
}
navigation.navigate('SignInOrRegister');
};
return (

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

@@ -29,14 +29,14 @@ export default function EditNomDeBid({
setValidNom(result.available);
if (isStandalone) {
updateNomDeBid(nomDeBid);
updateNomDeBid({ nomDeBid });
}
});
};
const _handleSubmitNom = () => {
if (isNomValid) {
updateNomDeBid(newNom);
updateNomDeBid({ newNom });
}
};

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

@@ -1,48 +1,57 @@
import { List } from 'immutable';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Text, TextInput, View } from 'react-native';
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 './EditNomDeBid.js';
import PhoneListInput from './PhoneInput/PhoneListInput.js';
import styles from './Profile.styles.js';
const STRINGS = {
CANCEL: 'Cancel',
NOM_HEADING: 'Nom de Bid',
PASSWORD_HEADING: 'Password',
PERSONAL_HEADING: 'A bit about you...',
SAVE_PROFILE: 'Save profile',
};
export default class EditProfile extends Component {
static get propTypes() {
return {
addresses: PropTypes.array,
addresses: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
avatar: PropTypes.string,
cancelEditAction: PropTypes.func.isRequired,
email: PropTypes.string,
firstName: PropTypes.string,
initials: PropTypes.string,
isGeneratedNomDeBid: PropTypes.bool,
isRegsiteredAccount: PropTypes.bool,
lastName: PropTypes.string,
nomDeBid: PropTypes.string,
phones: PropTypes.array,
phones: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
saveProfileAction: PropTypes.func.isRequired,
saveProfileLabel: PropTypes.string,
showPasswordEntry: PropTypes.bool,
};
}
static get defaultProps() {
return {
addresses: null,
addresses: new List(),
avatar: null,
email: null,
firstName: null,
initials: null,
isGeneratedNomDeBid: false,
isRegsiteredAccount: false,
lastName: null,
nomDeBid: null,
phones: null,
phones: new List(),
saveProfileLabel: STRINGS.SAVE_PROFILE,
showPasswordEntry: false,
};
}
@@ -59,6 +68,7 @@ export default class EditProfile extends Component {
invalidNomDeBid: false,
nomDeBid: this.props.nomDeBid,
password: this.props.password,
passwordsMismatch: false,
phones: this.props.phones,
};
@@ -67,15 +77,21 @@ export default class EditProfile extends Component {
}
_validateEmail() {
getEmailAvailability(this.state.email, (result) =>
this.setState('invalidEmail', !result.available),
);
getEmailAvailability(this.state.email)
.then(({ available = false }) =>
this.setState('invalidEmail', !available),
);
}
_validateNomDeBid() {
getNomAvailability(this.state.nomDeBid, (result) =>
this.setState('invalidNomDeBid', !result.available),
);
getNomAvailability(this.state.nomDeBid)
.then(({ available = false }) =>
this.setState('invalidNomDeBid', !available),
);
}
_validatePasswordMatch(password) {
this.setState({ passwordsMismatch: this.state.password !== password });
}
getProfileFromState() {
@@ -106,6 +122,9 @@ export default class EditProfile extends Component {
}
isFormComplete() {
const { showPasswordEntry } = this.props;
const { password } = this.state;
return (
!this.state.invalidEmail &&
!this.state.invalidNomDeBid &&
@@ -113,27 +132,28 @@ export default class EditProfile extends Component {
!!this.state.lastName &&
!!this.state.email &&
!!this.state.nomDeBid &&
!!this.state.phones.length &&
!!this.state.password
!!this.state.phones.size &&
((showPasswordEntry && !!password) || !showPasswordEntry)
);
}
render() {
const { isGeneratedNomDeBid } = this.props;
const { avatar, firstName, lastName } = this.state;
const { isGeneratedNomDeBid, isRegsiteredAccount, showPasswordEntry } = this.props;
const { addresses, avatar, firstName, lastName, phones } = this.state;
const addressesTitle = 'Addresses';
const numbersTitle = 'Numbers';
return (
<View style={styles.profileFormWrap}>
<View style={styles.avatarWrap}>
<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.nameWrap}>
<View style={[styles.sectionWrap, styles.nameWrap]}>
<Text style={styles.groupHeading}>{STRINGS.PERSONAL_HEADING}</Text>
<TextInput
onChange={(text) => this.setState({ firstName: text })}
placeholder="first name"
@@ -147,7 +167,7 @@ export default class EditProfile extends Component {
value={this.state.lastName}
/>
</View>
<View style={[styles.emailWrap, styles.requiredWrap]}>
<View style={[styles.sectionWrap, styles.emailWrap, styles.requiredWrap]}>
<TextInput
keyboardType="email-address"
onChangeText={(text) => this.setState({ email: text })}
@@ -157,27 +177,45 @@ export default class EditProfile extends Component {
value={this.state.email}
/>
</View>
{isGeneratedNomDeBid && (
<View style={[styles.nomWrap, styles.requiredWrap]}>
{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={false}
isStandalone
nomDeBid={this.state.nomDeBid}
updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
/>
</View>
)}
<View style={styles.phonesWrap}>
<Text style={[styles.groupLabel, styles.requiredLabel]}>{numbersTitle}</Text>
{this.props.phones.length > 0 && (
/* LIST PHONES */
<View />
)}
<Button title="Add number" onPress={() => false} />
<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.addressesWrap}>
<Text style={styles.groupLabel}>{addressesTitle}</Text>
{this.props.addresses.length > 0 && (
<View style={[styles.sectionWrap, styles.addressesWrap]}>
<Text style={styles.groupHeading}>{addressesTitle}</Text>
{addresses !== null && addresses.size > 0 && (
/* LIST ADDRESSES */
<View />
)}
@@ -187,7 +225,7 @@ export default class EditProfile extends Component {
<Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />
<Button title={STRINGS.CANCEL} onPress={this.handleCancel} />
</View>
</View>
</ScrollView>
);
}
}

110
app/components/Profile/PhoneInput/PhoneListInput.js Normal file
View File

@@ -0,0 +1,110 @@
import { List } from 'immutable';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Button, Picker, Text, TextInput, View } from 'react-native';
import { PHONE_TYPE_DEFAULT, PHONE_TYPES } from '../../../constants/constants.js';
import PhoneListItem from './PhoneListItem.js';
import styles from '../Profile.styles.js';
const defaultState = {
editingIndex: null,
isEditing: false,
newPhone: null,
newPhoneType: PHONE_TYPE_DEFAULT,
};
export default class PhoneListInput extends Component {
static get propTypes() {
return {
handleAdd: PropTypes.func.isRequired,
handleDelete: PropTypes.func.isRequired,
handleEdit: PropTypes.func,
phones: PropTypes.instanceOf(List).isRequired,
};
};
static get defaultProps() {
return {
handleEdit: null,
};
};
constructor(props) {
super(props);
this.state = { ...defaultState };
}
handleAdd() {
const { phones } = this.props;
const { newPhone, newPhoneType } = this.state;
this.props.handleAdd(phones.push({ number: newPhone, label: newPhoneType }));
this.setState(defaultState);
}
handleEdit(index) {
const { phones } = this.props;
const { newPhone, newPhoneType } = this.state;
this.props.handleEdit(phones.set(index, { number: newPhone, label: newPhoneType }));
this.setState(defaultState);
}
handleEditStart(index) {
const toBeEdited = this.props.phones.get(index);
this.setState({
editingIndex: index,
isEditing: true,
newPhone: toBeEdited.get('number'),
newPhoneType: toBeEdited.get('label'),
});
}
handleEditCancel(index) {
this.setState(defaultState);
}
render() {
const { phones } = this.props;
const { isEditing, newPhone, newPhoneType } = this.state;
const numbersTitle = 'Numbers';
return (
<View>
<Text style={[styles.groupHeading, styles.requiredLabel]}>{numbersTitle}</Text>
{phones !== null && phones.size > 0 && (
<View style={styles.phoneList}>
{phones.map((phone, index) =>
<PhoneListItem
index={index}
label={phone.get('label')}
number={phone.get('number')}
handleDelete={this.props.handleDelete}
handleEdit={this.props.handleEdit ? this.handleEdit : null}
handleEditStart={this.handleEditStart}
/>
)}
</View>
)}
<TextInput
onChangeText={(text) => this.setState({ editingPhone: text })}
placeholder="phone number"
style={[styles.textInput, styles.requiredInput]}
value={this.state.newPhone}
/>
<Picker
onValueChange={(type, index) => this.setState({ newPhoneType: type })}
selectedValue={this.state.newPhoneType}
>
{PHONE_TYPES.map((type) => <Picker.Item label={type.label} value={type.value} />)}
</Picker>
<Button
disabled={!this.state.newPhone && !this.state.newPhoneType}
onPress={isEditing ? () => this.handleEdit(index) : this.handleAdd}
title={isEditing ? 'update' : 'add number'}
/>
</View>
);
}
}

37
app/components/Profile/PhoneInput/PhoneListItem.js Normal file
View File

@@ -0,0 +1,37 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button, Text, View } from 'react-native';
import styles from '../Profile.styles.js';
export default function PhoneListItem({ index, label, number, handleDelete, handleEdit, handleEditStart }) {
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>
</View>
<View style={styles.listActions}>
{handleEdit !== null && <Button title={`Edit`} onPress={() => this.handleEditStart(index)} />}
<Button title={`X`} onPress={() => this.props.handleDelete(index)} />
</View>
</View>
);
}
PhoneListItem.propTypes = {
index: PropTypes.number.isRequired,
label: PropTypes.string.isRequired,
number: PropTypes.string.isRequired,
handleDelete: PropTypes.func.isRequired,
handleEdit: PropTypes.func,
handleEditStart: PropTypes.func.isRequired,
};
PhoneListItem.defaultProps = {
handleEdit: null,
};

5
app/components/Profile/Profile.stateProps.js
View File

@@ -1,14 +1,15 @@
import { getProfile, isGeneratedNomDeBid } from '../../selectors/profile.js';
import { getProfile, isGeneratedNomDeBid, isRegisteredAccount } from '../../selectors/profile.js';
export const matchStateToProps = (state) => {
const profile = getProfile(state);
return {
addresses: profile.get('addresses').toArray(),
addresses: profile.get('addresses'),
avatar: profile.get('avatar'),
email: profile.get('email'),
initials: profile.get('initials'),
isGeneratedNomDeBid: isGeneratedNomDeBid(state),
isRegisteredAccount: isRegisteredAccount(state),
nomDeBid: profile.get('nomDeBid'),
phones: profile.get('phones'),
};

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

@@ -2,7 +2,35 @@ import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
alignItems: 'flex-start',
backgroundColor: '#F5FCFF',
flex: 1,
justifyContent: 'center',
paddingLeft: 10,
paddingRight: 10,
},
sectionWrap: {
marginBottom: 15,
},
avatarWrap: {
marginBottom: 40,
marginTop: 30,
textAlign: 'center',
},
groupHeading: {
fontSize: 18,
fontWeight: 'bold',
margin: 10,
textAlign: 'center',
},
hintText: {
color: '#666666',
fontSize: 14,
margin: 5,
},
textInput: {
fontSize: 24,
margin: 10,
textAlign: 'center',
},
textInput: {},
});

2
app/components/Profile/ViewProfile.container.js
View File

@@ -2,7 +2,6 @@ import { connect } from 'react-redux';
import { getProfile } from '../../selectors/profile.js';
import { matchStateToProps as matchCommonStateProps } from './Profile.stateProps.js';
import { isRegisteredAccount } from '../../selectors/profile.js';
import ViewProfile from './ViewProfile.js';
@@ -13,7 +12,6 @@ const matchStateToProps = (state) => {
return {
...commonProps,
fullName: profile.get('fullName'),
isRegisteredAccount: isRegisteredAccount(state),
};
};

21
app/components/Profile/ViewProfile.js
View File

@@ -1,6 +1,7 @@
import { List } from 'immutable';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, Text, TextInput, View } from 'react-native';
import { Button, ScrollView, Text, TextInput, View } from 'react-native';
import { Avatar } from 'react-native-elements';
import EditNomDeBid from './EditNomDeBid.container.js';
@@ -23,9 +24,9 @@ export default function ViewProfile({
nomDeBid,
phones,
}) {
const _getSavedText = (count) => `${count} saved`;
const addressesCountString = _getSavedText(addresses.length);
const phonesCountString = _getSavedText(phones.length);
const _getSavedText = (count) => count > 0 ? `${count} saved` : 'None saved';
const addressesCountString = _getSavedText(addresses.size);
const phonesCountString = _getSavedText(phones.size);
const [isEditingNom, setEditNom] = useState(false);
@@ -34,7 +35,7 @@ export default function ViewProfile({
const numbersTitle = 'numbers';
return (
<View style={styles.profileFormWrap}>
<ScrollView style={styles.profileFormWrap}>
<View style={styles.avatarWrap}>
{avatar !== null ? (
<Avatar source={{ uri: avatar }} />
@@ -72,12 +73,12 @@ export default function ViewProfile({
<Button title={STRINGS.EDIT} onPress={editProfileAction} />
</View>
)}
</View>
</ScrollView>
);
}
ViewProfile.propTypes = {
addresses: PropTypes.array,
addresses: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
avatar: PropTypes.string,
editProfileAction: PropTypes.func,
email: PropTypes.string,
@@ -86,11 +87,11 @@ ViewProfile.propTypes = {
isGeneratedNomDeBid: PropTypes.bool,
isRegisteredAccount: PropTypes.bool,
nomDeBid: PropTypes.string,
phones: PropTypes.array,
phones: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(List)]),
};
ViewProfile.defaultProps = {
addresses: [],
addresses: new List(),
avatar: null,
editProfileAction: null,
email: null,
@@ -99,5 +100,5 @@ ViewProfile.defaultProps = {
isGeneratedNomDeBid: false,
isRegisteredAccount: false,
nomDeBid: null,
phones: [],
phones: new List(),
};