80 lines
2.7 KiB
JavaScript
80 lines
2.7 KiB
JavaScript
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?',
|
|
CHECK_AVAILABILITY: 'check availability',
|
|
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!',
|
|
PLACEHOLDER: 'nom de bid',
|
|
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(null);
|
|
|
|
const _handleEndEditing = (updateOnValid = false) => () => {
|
|
getNomAvailaibility(newNom).then((result) => {
|
|
setValidNom(result.available);
|
|
|
|
if (updateOnValid && result.available) {
|
|
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
|
|
autoCapitalize="none"
|
|
onChangeText={(text) => setNomDeBid(text)}
|
|
onEndEditing={!isStandalone && _handleEndEditing(false)}
|
|
placeholder={STRINGS.PLACEHOLDER}
|
|
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>
|
|
)}
|
|
<Button
|
|
title={isStandalone ? STRINGS.CHECK_AVAILABILITY : STRINGS.SUBMIT_NOM}
|
|
onPress={_handleEndEditing(true)}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
EditNomDeBid.propTypes = {
|
|
isGeneratedNomDeBid: PropTypes.bool,
|
|
isStandalone: PropTypes.bool,
|
|
nomDeBid: PropTypes.string,
|
|
updateNomDeBid: PropTypes.func.isRequired,
|
|
};
|
|
|
|
EditNomDeBid.defaultProps = {
|
|
isGeneratedNomDeBid: false,
|
|
isStandalone: false,
|
|
nomDeBid: null,
|
|
};
|