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

- The fix is in! Linty fresh and pretty...

Browse Source
This commit is contained in:
Mike Fitzpatrick
2019-08-08 16:18:08 -04:00
parent dfc4daf696
commit ebb6f47455
52 changed files with 453 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,8 +7,6 @@ import HeaderTitle from './HeaderTitle/HeaderTitle.container.js';
import HeaderContentLeft from './HeaderContentLeft.container.js';
import HeaderContentRight from './HeaderContentRight.container.js';
import styles from './AppHeader.styles.js';
export default class AppHeader extends Component {
static get propTypes() {
return {

0
app/components/AppHeader/AppHeader.styles.js
View File

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

@@ -1,12 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Text, TouchableOpacity, View } from 'react-native';
import BackIcon from './IconButtons/BackIcon.js';
import EventsIcon from './IconButtons/EventsIcon.js';
export default function HeaderContentLeft({ activeRoute, hasMultipleEvents, navigation }) {
export default function HeaderContentLeft({
activeRoute,
hasActiveEvent,
hasMultipleEvents,
navigation,
}) {
const _goBack = () => {
if (hasActiveEvent) {
navigation.goBack();
@@ -35,9 +38,11 @@ export default function HeaderContentLeft({ activeRoute, hasMultipleEvents, navi
HeaderContentLeft.propTypes = {
activeRoute: PropTypes.string.isRequired,
hasActiveEvent: PropTypes.bool,
hasMultipleEvents: PropTypes.bool,
navigation: PropTypes.func.isRequired,
};
HeaderContentLeft.defaultProps = {
hasActiveEvent: false,
hasMultipleEvents: false,
};

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

@@ -6,7 +6,9 @@ import HeaderContentRight from './HeaderContentRight.js';
const matchStateToProps = (state, ownProps) => ({
avatarUrl: getProfileAvatarUrl(state),
hideUserProfileButton: ownProps.navigation.state.routeName === 'Profile',
hideUserProfileButton:
['Profile', 'Register', 'SignInOrRegister'].indexOf(ownProps.navigation.state.routeName) >
-1,
});
export default connect(

1
app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.container.js
View File

@@ -1,5 +1,6 @@
import { connect } from 'react-redux';
import { hasActiveEvent } from '../../../../selectors/activeEvent.js';
import { getActiveEvent, getDefaultEvent } from '../../../../selectors/events.js';
import EventTitle from './EventTitle.js';

16
app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.js
View File

@@ -6,12 +6,16 @@ import { Text, TouchableOpacity, View } from 'react-native';
import styles from './EventTitle.styles.js';
export default function EventTitle({ action, date, end, name, start }) {
const _generateEventTitle = () => (
<View style={styles.eventInfo}>
<Text style={styles.eventName}>{name}</Text>
<Text style={styles.eventDate}>{`${date} | ${start} - ${end}`}</Text>
</View>
);
const _generateEventTitle = () => {
const whenString = `${date} | ${start} - ${end}`;
return (
<View style={styles.eventInfo}>
<Text style={styles.eventName}>{name}</Text>
<Text style={styles.eventDate}>{whenString}</Text>
</View>
);
};
if (action) {
return <TouchableOpacity onPress={action}>{_generateEventTitle()}</TouchableOpacity>;

4
app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.styles.js
View File

@@ -1,6 +1,6 @@
import { StyleSheet } from 'react-native';
export default (styles = StyleSheet.create({
export default StyleSheet.create({
eventInfo: {
flexDirection: 'row',
},
@@ -11,4 +11,4 @@ export default (styles = StyleSheet.create({
eventDate: {
flex: 1,
},
}));
});

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

@@ -7,6 +7,10 @@ import EventTitle from './EventTitle/EventTitle.container.js';
import styles from './HeaderTitle.styles.js';
const STRINGS = {
PROFILE: 'Profile',
};
export default function HeaderTitle({
activeRoute,
hasActiveEvent,
@@ -30,13 +34,13 @@ export default function HeaderTitle({
if (activeRoute === 'Events') {
return (
<TouchableOpacity onPress={_goBack}>
<Text style={styles.screenHeader}>Profile</Text>
<Text style={styles.screenHeader}>{STRINGS.PROFILE}</Text>
</TouchableOpacity>
);
}
if (activeRoute === 'Profile') {
return <Text style={styles.screenHeader}>Profile</Text>;
return <Text style={styles.screenHeader}>{STRINGS.PROFILE}</Text>;
}
return <EventTitle action={hasMultipleEvents ? _showEvents : null} />;

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

@@ -1,6 +1,6 @@
import { StyleSheet } from 'react-native';
export default (styles = StyleSheet.create({
export default StyleSheet.create({
filterBar: {
backgroundColor: '#0F0',
flexDirection: 'row',
@@ -11,4 +11,4 @@ export default (styles = StyleSheet.create({
view: {
flex: 2,
},
}));
});

2
app/components/AppHeader/IconButtons/BackIcon.js
View File

@@ -7,7 +7,7 @@ import { Icon } from 'react-native-elements';
export default function BackIcon({ action }) {
return (
<TouchableOpacity onPress={action}>
<Icon name="ei-chevron-left" type="evilicons" size={28} />;
<Icon name="ei-chevron-left" type="evilicons" size={28} />
</TouchableOpacity>
);
}

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

@@ -1,11 +1,17 @@
import { connect } from 'react-redux';
import { getProfileAvatarUrl } from '../../../selectors/profile.js';
import {
getProfileAvatarUrl,
getUserInitials,
isRegisteredAccount,
} from '../../../selectors/profile.js';
import UserProfileButton from './UserProfileButton.js';
const matchStateToProps = (state) => ({
avatarUrl: getProfileAvatarUrl(state),
initials: getUserInitials(state),
isRegisteredAccount: isRegisteredAccount(state),
});
export default connect(

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

@@ -2,11 +2,16 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Image, TouchableOpacity, View } from 'react-native';
import { Icon } from 'react-native-elements';
import { Avatar, Icon } from 'react-native-elements';
import styles from './UserProfileButton.styles.js';
export default function UserProfileButton({ avatarUrl, navigation }) {
export default function UserProfileButton({
avatarUrl,
initials,
isRegisteredAccount,
navigation,
}) {
const _goToProfile = () => {
navigation.navigate('Profile');
return false;
@@ -14,10 +19,12 @@ export default function UserProfileButton({ avatarUrl, navigation }) {
return (
<TouchableOpacity onPress={_goToProfile}>
{avatarUrl !== null ? (
<View style={styles.avatarWrap}>
<Image source={{ uri: avatarUrl }} />
</View>
{isRegisteredAccount !== null ? (
avatarUrl !== null ? (
<Avatar source={{ uri: avatarUrl }} />
) : (
<Avatar title={initials} />
)
) : (
<Icon name="ei-user" type="evilicons" size={28} />
)}
@@ -27,8 +34,12 @@ export default function UserProfileButton({ avatarUrl, navigation }) {
UserProfileButton.propTypes = {
avatarUrl: PropTypes.string,
initials: PropTypes.string,
isRegisteredAccount: PropTypes.bool,
};
UserProfileButton.propTypes = {
avatarUrl: null,
initials: null,
isRegisteredAccount: false,
};

10
app/components/Auction/AuctionListItem.js
View File

@@ -83,28 +83,28 @@ export default class AuctionListItem extends Component {
)}
<View style={styles.rowText}>
{type === ITEM_TYPES.AUCTION && <BidStatus itemId={id} />}
<Text style={styles.title} numberOfLines={2} ellipsizeMode={'tail'}>
<Text style={styles.title} numberOfLines={2} ellipsizeMode="tail">
{title}
</Text>
<Text style={styles.subtitle} numberOfLines={1} ellipsizeMode={'tail'}>
<Text style={styles.subtitle} numberOfLines={1} ellipsizeMode="tail">
{subtitle}
</Text>
{donor && (
<Text style={styles.donor} numberOfLines={1} ellipsizeMode={'tail'}>
<Text style={styles.donor} numberOfLines={1} ellipsizeMode="tail">
{donor}
</Text>
)}
{type === ITEM_TYPES.AUCTION ? (
<AuctionPriceAndBidCount itemId={id} />
) : (
<Text style={styles.price} numberOfLines={1} ellipsizeMode={'tail'}>
<Text style={styles.price} numberOfLines={1} ellipsizeMode="tail">
{formatPrice(startingPrice)}
</Text>
)}
<Text style={styles.timeline} numberOfLines={1}>
{this._getBidTime()}
</Text>
<Text style={styles.description} numberOfLines={3} ellipsizeMode={'tail'}>
<Text style={styles.description} numberOfLines={3} ellipsizeMode="tail">
{description}
</Text>
</View>

4
app/components/Auction/AuctionPriceAndBidCount.js
View File

@@ -6,9 +6,11 @@ import { formatPrice } from '../../library/helpers.js';
import { StyleSheet, Text } from 'react-native';
const AuctionPriceAndBidCount = ({ bidCount, currentPrice }) => {
const _getPriceAndBidString = () => `${formatPrice(currentPrice)} (${bidCount} bids)`;
return (
<Text style={styles.currentPriceAndBidCount} numberOfLines={1}>
{`${formatPrice(currentPrice)} (${bidCount} bids)`}
{_getPriceAndBidString()}
</Text>
);
};

2
app/components/Auction/BidStatus.js
View File

@@ -9,7 +9,7 @@ const BidStatus = ({ isBidding, isWinning }) => {
}
const statusBarStyle = isWinning
? [styles.bidStatus, styes.isWinning]
? [styles.bidStatus, styles.isWinning]
: [styles.bidStatus, styles.isOutbid];
return (

9
app/components/Auction/FilterBar.js
View File

@@ -3,10 +3,15 @@ import PropTypes from 'prop-types';
import { StyleSheet, Text, View } from 'react-native';
const STRINGS = {
FILTER: 'Filter',
VIEW: 'View',
};
const FilterBar = ({ changeFilterer, changeViewMode, filterMode, viewMode }) => (
<View style={styles.filterBar}>
<Text style={styles.filter}>Filter</Text>
<Text style={styles.view}>View</Text>
<Text style={styles.filter}>{STRINGS.FILTER}</Text>
<Text style={styles.view}>{STRINGS.VIEW}</Text>
</View>
);

16
app/components/Events/EventListItem.js
View File

@@ -33,24 +33,28 @@ export default class EventListItem extends Component {
constructor(props) {
super(props);
this._viewEventDetail = this._viewEventDetail.bind(this);
}
_viewEventDetail = () => {
getTimeString() {
const { end, start } = this.props;
return `${start} - ${end}`;
}
_viewEventDetail() {
this.props.setActiveEvent(this.props.id);
this.props.navigation.navigate('Event');
};
}
render() {
const { date, description, end, name, start } = this.props;
const { date, description, name } = this.props;
return (
<TouchableOpacity onPress={this._viewEventDetail}>
<View style={styles.rowContainer}>
<Text>{name}</Text>
<Text>{date}</Text>
<Text>
{start} - {end}
</Text>
<Text>{this.getTimeString()}</Text>
<Text>{description}</Text>
</View>
</TouchableOpacity>

81
app/components/Login/LocalLogin.js
View File

@@ -3,54 +3,51 @@ import PropTypes from 'prop-types';
import { Button, TextInput, View } from 'react-native';
import styles from './Login.styles.js';
export default function LocalLogin({ doLoginAction }) {
const [enabled, setEnableSubmit] = useState(false);
const [password, setPassword] = useState(null);
const [username, setUsername] = useState(null);
const [ enabled, setEnableSubmit ] = useState(false);
const [ password, setPassword ] = useState(null);
const [ username, setUsername ] = useState(null);
const _handleLoginSubmit = () => {
doLoginAction(username, password);
};
const _handleLoginSubmit = () => {
doLoginAction(username, password);
};
const _updateState = (field, value) => {
if (field === 'username') {
setUsername(value);
}
const _updateState = (field, value) => {
if (field === 'username') {
setUsername(value);
}
if (field === 'password') {
setPassword(value);
}
if (field === 'password') {
setPassword(value);
}
if (!!username && !!password) {
setEnableSubmit(true);
}
};
if (!!username && !!password) {
setEnableSubmit(true);
}
};
return (
<View style={styles.loginWrap}>
<TextInput
keyboardType="email-address"
onChangeText={(text) => _updateState('username', text)}
placeholder="email"
style={{height: 40}}
value={username}
/>
<TextInput
enablesReturnKeyAutomatically
onChangeText={(text) => _updateState('password', text)}
placeholder="password"
secureTextEntry
style={{height: 40}}
value={password}
/>
<Button
disabled={!enabled}
onPress={_handleLoginSubmit}
title="Login"
/>
</View>
);
return (
<View style={styles.loginWrap}>
<TextInput
keyboardType="email-address"
onChangeText={(text) => _updateState('username', text)}
placeholder="email"
style={styles.textInput}
value={username}
/>
<TextInput
enablesReturnKeyAutomatically
onChangeText={(text) => _updateState('password', text)}
placeholder="password"
secureTextEntry
style={styles.textInput}
value={password}
/>
<Button disabled={!enabled} onPress={_handleLoginSubmit} title="Login" />
</View>
);
}
LocalLogin.propTypes = {

8
app/components/Login/Login.styles.js Normal file
View File

@@ -0,0 +1,8 @@
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
},
textInput: {},
});

20
app/components/Profile/EditNomDeBid.container.js Normal file
View File

@@ -0,0 +1,20 @@
import { connect } from 'react-redux';
import { setNomDeBid } from '../../actions/profile.js';
import { getNomDeBid, isGeneratedNomDeBid } from '../../selectors/profile.js';
import EditNomDeBid from './EditNomDeBid.js';
const matchStateToProps = (state) => ({
isGeneratedNomDeBid: isGeneratedNomDeBid(state),
nomDeBid: getNomDeBid(state),
});
const matchDispatchToProps = (dispatch) => ({
updateNomDeBid: (nomDeBid) => dispatch(setNomDeBid(nomDeBid)),
});
export default connect(
matchStateToProps,
matchDispatchToProps,
)(EditNomDeBid);

79
app/components/Profile/EditNomDeBid.js Normal file
View File

@@ -0,0 +1,79 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, Text, TextInput, View } from 'react-native';
import { Avatar } from 'react-native-elements';
import { getNomAvailaibility } from '../../api/profile.js';
import styles from './Profile.styles.js';
const STRINGS = {
ABOUT_GENERATED_NOM:
'You currently have a generated Nom De Bid - the alias other bidders will know you as - why not personalize it?',
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.",
ONLY_SET_ONCE: 'This can only be set once!',
SUBMIT_NOM: 'Set Nom De Bid',
};
export default function EditNomDeBid({
isGeneratedNomDeBid,
isStandalone,
nomDeBid,
updateNomDeBid,
}) {
const [newNom, setNomDeBid] = useState(isGeneratedNomDeBid || !nomDeBid ? '' : nomDeBid);
const [isNomValid, setValidNom] = useState(false);
const _handleEndEditing = (nomDeBid) => {
getNomAvailaibility(nomDeBid).then((result) => {
setValidNom(result.available);
if (isStandalone) {
updateNomDeBid(nomDeBid);
}
});
};
const _handleSubmitNom = () => {
if (isNomValid) {
updateNomDeBid(newNom);
}
};
const explanationString = isGeneratedNomDeBid
? `${STRINGS.ABOUT_GENERATED_NOM} ${STRINGS.ONLY_SET_ONCE}`
: `${STRINGS.NOM_EXPLANATION} ${STRINGS.ONLY_SET_ONCE}`;
return (
<View style={styles.profileFormWrap}>
<Text style={styles.hintText}>{explanationString}</Text>
<TextInput
onChangeText={(text) => setNomDeBid(text)}
onEndEditing={(text) => _handleEndEditing(text)}
placeholder="nom de bid"
style={[styles.textInput, styles.requiredInput]}
value={newNom}
/>
{!isStandalone && (
<Button
title={STRINGS.SUBMIT_NOM}
onPress={_handleSubmitNom}
disabled={!isNomValid}
/>
)}
</View>
);
}
EditNomDeBid.propTypes = {
isGeneratedNomDeBid: PropTypes.bool,
isStandalone: PropTypes.bool,
nomDeBid: PropTypes.string,
updateNomDeBid: PropTypes.func.isRequired,
};
EditNomDeBid.defaultProps = {
isGeneratedNomDeBid: false,
isStandalone: false,
nomDeBid: null,
};

8
app/components/Profile/EditProfile.container.js
View File

@@ -1,9 +1,10 @@
import { connect } from 'react-redux';
import { getProfile } from '../../selectors/profile.js';
import { commonProfileStateToProps } from './Profile.container.js';
import EditProfile from './EditProfile.js';
const matchStateToProps = (dispatch) => {
const matchStateToProps = (state) => {
const commonProps = commonProfileStateToProps(state);
const profile = getProfile(state);
@@ -14,4 +15,7 @@ const matchStateToProps = (dispatch) => {
};
};
export default connect(matchStateToProps, null)(EditProfile);
export default connect(
matchStateToProps,
null,
)(EditProfile);

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

@@ -1,19 +1,19 @@
import React, { Component } from 'react';
import { Text, TextInput, View } from 'react-native';
import PropTypes from 'prop-types';
import { Button, 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 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',
CANCEL: 'Cancel',
SAVE_PROFILE: 'Save profile',
};
export default class EditProfile extends Component {
static get propTypes() {
return {
addresses: PropTypes.array,
@@ -22,6 +22,7 @@ export default class EditProfile extends Component {
email: PropTypes.string,
firstName: PropTypes.string,
initials: PropTypes.string,
isGeneratedNomDeBid: PropTypes.bool,
lastName: PropTypes.string,
nomDeBid: PropTypes.string,
phones: PropTypes.array,
@@ -37,6 +38,7 @@ export default class EditProfile extends Component {
email: null,
firstName: null,
initials: null,
isGeneratedNomDeBid: false,
lastName: null,
nomDeBid: null,
phones: null,
@@ -44,7 +46,7 @@ export default class EditProfile extends Component {
};
}
constructor() {
constructor(props) {
super(props);
this.state = {
@@ -65,11 +67,15 @@ export default class EditProfile extends Component {
}
_validateEmail() {
getEmailAvailability(this.state.email, (result) => this.setState('invalidEmail', !result.available));
getEmailAvailability(this.state.email, (result) =>
this.setState('invalidEmail', !result.available),
);
}
_validateNomDeBid() {
getNomAvailability(this.state.nomDeBid, (result) => this.setState('invalidNomDeBid', !result.available));
getNomAvailability(this.state.nomDeBid, (result) =>
this.setState('invalidNomDeBid', !result.available),
);
}
getProfileFromState() {
@@ -100,16 +106,23 @@ export default class EditProfile extends Component {
}
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;
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 { isGeneratedNomDeBid } = this.props;
const { avatar, firstName, lastName } = this.state;
const avatarTitle = !avatar && firstName && lastName
? `${firstName.substring(0,1)}${lastName.substring(0,1)}`
: null;
const addressesTitle = 'Addresses';
const numbersTitle = 'Numbers';
return (
<View style={styles.profileFormWrap}>
@@ -144,29 +157,31 @@ export default class EditProfile extends Component {
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>
{isGeneratedNomDeBid && (
<View style={[styles.nomWrap, styles.requiredWrap]}>
<EditNomDeBid
isGeneratedNomDeBid={isGeneratedNomDeBid}
isStandalone={false}
nomDeBid={this.state.nomDeBid}
updateNomDeBid={(nomDeBid) => this.setState({ nomDeBid })}
/>
</View>
)}
<View style={styles.phonesWrap}>
<Text style={[styles.groupLabel, styles.requiredLabel]}>Numbers</Text>
{phones.length > 0 && (
// LIST PHONES
<Text style={[styles.groupLabel, styles.requiredLabel]}>{numbersTitle}</Text>
{this.props.phones.length > 0 && (
/* LIST PHONES */
<View />
)}
<Button title="Add number" onPress={() => false}/>
<Button title="Add number" onPress={() => false} />
</View>
<View style={styles.addressesWrap}>
<Text style={styles.groupLabel}>Addresses</Text>
{addresses.length > 0 && (
// LIST ADDRESSES
<Text style={styles.groupLabel}>{addressesTitle}</Text>
{this.props.addresses.length > 0 && (
/* LIST ADDRESSES */
<View />
)}
<Button title="Add address" onPress={() => false}/>
<Button title="Add address" onPress={() => false} />
</View>
<View style={styles.register}>
<Button title={this.props.saveProfileLabel} onPress={this.handleSubmit} />

8
app/components/Profile/Profile.container.js
View File

@@ -1,6 +1,6 @@
import { connect } from 'react-redux';
import { getProfile } from '../selectors/profile.js';
import { getProfile, isGeneratedNomDeBid } from '../selectors/profile.js';
import Profile from './Profile.js';
@@ -12,9 +12,13 @@ export const commonProfileStateToProps = (state) => {
avatar: profile.get('avatar'),
email: profile.get('email'),
initials: profile.get('initials'),
isGeneratedNomDeBid: isGeneratedNomDeBid(state),
nomDeBid: profile.get('nomDeBid'),
phones: profile.get('phones'),
};
};
export default connect(commonProfileStateToProps, null)(Profile);
export default connect(
commonProfileStateToProps,
null,
)(Profile);

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

@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import EditProfile from './EditProfile.container.js';
@@ -20,7 +21,7 @@ export default function Profile({
const _saveProfileAction = (profile) => {
setEditMode(false);
saveProfileAction(profile);
}
};
return (
<View>

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

@@ -0,0 +1,8 @@
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
},
textInput: {},
});

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

@@ -1,17 +1,23 @@
import { connect } from 'react-redux';
import { getProfile } from '../../selectors/profile.js';
import { commonProfileStateToProps } from './Profile.container.js';
import { isRegisteredAccount } from '../../selectors/profile.js';
import ViewProfile from './ViewProfile.js';
const matchStateToProps = (dispatch) => {
const matchStateToProps = (state) => {
const commonProps = commonProfileStateToProps(state);
const profile = getProfile(state);
return {
...commonProps,
fullName: profile.get('fullName'),
generatedNomDeBid: propfile.get('generatedNomDeBid'),
isRegisteredAccount: isRegisteredAccount(state),
};
};
export default connect(matchStateToProps, null)(ViewProfile);
export default connect(
matchStateToProps,
null,
)(ViewProfile);

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

@@ -1,13 +1,14 @@
import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
import PropTypes from 'prop-types';
import { Button, Text, TextInput, View } from 'react-native';
import { Avatar } from 'react-native-elements';
import { getEmailAvailability, getNomAvailability } from '../api/profile.js';
import EditNomDeBid from './EditNomDeBid.container.js';
import styles from './Profile.styles.js';
const STRINGS = {
EDIT: 'Edit profile',
EDIT: 'Edit profile',
};
export default function ViewProfile({
@@ -16,16 +17,22 @@ export default function ViewProfile({
editProfileAction,
email,
fullName,
generatedNomDeBid,
initials,
isGeneratedNomDeBid,
isRegisteredAccount,
nomDeBid,
phones,
}) {
const addressesCount = addresses.length;
const phonesCount = phones.length;
const _getSavedText = (count) => `${count} saved`;
const addressesCountString = _getSavedText(addresses.length);
const phonesCountString = _getSavedText(phones.length);
const [isEditingNom, setEditNom] = useState(false);
const addressesTitle = 'addresses';
const emailTitle = 'email';
const numbersTitle = 'numbers';
return (
<View style={styles.profileFormWrap}>
<View style={styles.avatarWrap}>
@@ -39,33 +46,30 @@ export default function ViewProfile({
<Text style={styles.fullName}>{fullName}</Text>
<View style={styles.nomWrap}>
{isEditingNom ? (
<EditNomDeBid
<EditNomDeBid isStandalone />
) : (
<Text style={styles.nom}>{nomDeBid}</Text>
{generatedNomDeBid && (
<Button
title="Set bidding alias"
onPress={() => setEditNom(true)}
/>
)}
<Text style={styles.nom}>{nomDeBid}</Text>
)}
{!isEditingNom && isGeneratedNomDeBid && isRegisteredAccount && (
<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>
<Text style={styles.label}>{emailTitle}</Text>
<Text style={styles.value}>{email}</Text>
</View>
<View style={styles.phonesWrap}>
<Text style={styles.label}>numbers</Text>
<Text style={styles.value}>{`${phonesCount} saved`}
<Text style={styles.label}>{numbersTitle}</Text>
<Text style={styles.value}>{phonesCountString}</Text>
</View>
<View style={styles.addressesWrap}>
<Text style={styles.label}>addresses</Text>
<Text style={styles.value}>{`${addressesCount} saved`}
<Text style={styles.label}>{addressesTitle}</Text>
<Text style={styles.value}>{addressesCountString}</Text>
</View>
{editProfileAction !== null && (
<View style={styles.register}>
<Button title={STRINGS.EDIT} onPress={editProfile} />
<Button title={STRINGS.EDIT} onPress={editProfileAction} />
</View>
)}
</View>
@@ -78,8 +82,9 @@ ViewProfile.propTypes = {
editProfileAction: PropTypes.func,
email: PropTypes.string,
fullName: PropTypes.string,
generatedNomDeBid: PropTypes.bool,
initials: PropTypes.string,
isGeneratedNomDeBid: PropTypes.bool,
isRegisteredAccount: PropTypes.bool,
nomDeBid: PropTypes.string,
phones: PropTypes.array,
};
@@ -90,13 +95,9 @@ ViewProfile.defaultProps = {
editProfileAction: null,
email: null,
fullName: null,
generatedNomDeBid: false,
initials: null,
isGeneratedNomDeBid: false,
isRegisteredAccount: false,
nomDeBid: null,
phones: [],
};
return (
);
}
}