Merge branch 'placeholder'

Author: benma

frontends/web/src/routes/account/add/add.tsx

@@ -45,7 +45,6 @@ interface State {
     step: TStep;
     supportedCoins: backendAPI.ICoin[];
     adding: boolean; // true while the backend is working to add the account.
-    accountNamePlaceholder: string;
 }
 
 class AddAccount extends Component<Props, State> {
@@ -57,7 +56,6 @@ class AddAccount extends Component<Props, State> {
         step: 'select-coin',
         supportedCoins: [],
         adding: false,
-        accountNamePlaceholder: '',
     };
 
     private onlyOneSupportedCoin = (): boolean => {
@@ -87,14 +85,9 @@ class AddAccount extends Component<Props, State> {
         }
     }
 
-    private accountName = (): string => {
-        const { accountName, accountNamePlaceholder } = this.state;
-        return accountName === '' ? accountNamePlaceholder : accountName;
-    }
-
     private next = (e: Event) => {
         e.preventDefault();
-        const { accountCode, coinCode, step } = this.state;
+        const { accountName, accountCode, coinCode, step } = this.state;
         const { t } = this.props;
         switch (step) {
             case 'select-coin':
@@ -110,7 +103,7 @@ class AddAccount extends Component<Props, State> {
                 this.setState({ adding: true });
                 apiPost('account-add', {
                     coinCode,
-                    name: this.accountName(),
+                    name: accountName,
                 })
                     .then((data: ResponseData) => {
                         this.setState({ adding: false });
@@ -162,12 +155,12 @@ class AddAccount extends Component<Props, State> {
 
     private renderContent = () => {
         const { t } = this.props;
-        const { accountName, accountNamePlaceholder, coinCode, step, supportedCoins} = this.state;
+        const { accountName, coinCode, step, supportedCoins} = this.state;
         switch (step) {
             case 'select-coin':
                 return (
                     <CoinDropDown
-                        onChange={coin => this.setState({ coinCode: coin.coinCode, accountNamePlaceholder: coin.suggestedAccountName })}
+                        onChange={coin => this.setState({ coinCode: coin.coinCode, accountName: coin.suggestedAccountName })}
                         supportedCoins={supportedCoins}
                         value={coinCode} />
                 );
@@ -178,7 +171,6 @@ class AddAccount extends Component<Props, State> {
                         getRef={this.focusRef}
                         id="accountName"
                         onInput={e => this.setState({ accountName: e.target.value })}
-                        placeholder={accountNamePlaceholder}
                         value={accountName} />
                 );
             case 'success':
@@ -187,7 +179,7 @@ class AddAccount extends Component<Props, State> {
                         <img src={checkicon} className={styles.successCheck} /><br />
                         <SimpleMarkup
                             className={styles.successMessage}
-                            markup={t('addAccount.success.message', { accountName: this.accountName() })}
+                            markup={t('addAccount.success.message', { accountName })}
                             tagName="p" />
                     </div>
                 );
@@ -218,6 +210,7 @@ class AddAccount extends Component<Props, State> {
     public render(
         { t }: RenderableProps<Props>,
         {
+            accountName,
             coinCode,
             errorMessage,
             step,
@@ -270,7 +263,7 @@ class AddAccount extends Component<Props, State> {
                                 <Button
                                     disabled={
                                         (step === 'select-coin' && coinCode === 'choose')
-                                        || (step === 'choose-name' && adding)
+                                        || (step === 'choose-name' && (accountName === '' || adding))
                                     }
                                     primary
                                     type="submit">