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

2019-08-08 16:18:08 -04:00
parent dfc4daf696
commit ebb6f47455
52 changed files with 453 additions and 259 deletions
--- a/app/components/Profile/EditNomDeBid.container.js
+++ b/app/components/Profile/EditNomDeBid.container.js
@@ -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);
--- a/app/components/Profile/EditNomDeBid.js
+++ b/app/components/Profile/EditNomDeBid.js
@@ -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,
+};
--- a/app/components/Profile/EditProfile.container.js
+++ b/app/components/Profile/EditProfile.container.js
@@ -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);
--- a/app/components/Profile/EditProfile.js
+++ b/app/components/Profile/EditProfile.js
@@ -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} />
--- a/app/components/Profile/Profile.container.js
+++ b/app/components/Profile/Profile.container.js
@@ -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);
--- a/app/components/Profile/Profile.js
+++ b/app/components/Profile/Profile.js
@@ -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>
--- a/app/components/Profile/Profile.styles.js
+++ b/app/components/Profile/Profile.styles.js
@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    textInput: {},
+});
--- a/app/components/Profile/ViewProfile.container.js
+++ b/app/components/Profile/ViewProfile.container.js
@@ -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);
--- a/app/components/Profile/ViewProfile.js
+++ b/app/components/Profile/ViewProfile.js
@@ -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 (
-        );
-    }
-}