From 04a787d8451d0f73283650c755fa1782f83ebf7d Mon Sep 17 00:00:00 2001
From: NastiaS <anastasiasergienko@gmail.com>
Date: Tue, 29 May 2018 17:56:31 +0200
Subject: [PATCH] ensuring modal unmounting for the account settings when
 changing the account

---
 .../modals/AccountSettingRenderBody.js        | 197 ++++++++++++++++++
 src/components/modals/SettingsAccount.js      | 190 +----------------
 2 files changed, 201 insertions(+), 186 deletions(-)
 create mode 100644 src/components/modals/AccountSettingRenderBody.js

diff --git a/src/components/modals/AccountSettingRenderBody.js b/src/components/modals/AccountSettingRenderBody.js
new file mode 100644
index 00000000..46d4c2cc
--- /dev/null
+++ b/src/components/modals/AccountSettingRenderBody.js
@@ -0,0 +1,197 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+import { connect } from 'react-redux'
+import { compose } from 'redux'
+import get from 'lodash/get'
+import { translate } from 'react-i18next'
+
+import type { Account, Unit, Currency } from '@ledgerhq/live-common/lib/types'
+import type { T } from 'types/common'
+import { MODAL_SETTINGS_ACCOUNT } from 'config/constants'
+
+import { updateAccount } from 'actions/accounts'
+import { setDataModal } from 'reducers/modals'
+
+import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
+import Box from 'components/base/Box'
+import Button from 'components/base/Button'
+import Input, { ErrorMessageInput } from 'components/base/Input'
+import Select from 'components/base/Select/index'
+import { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
+
+type State = {
+  accountName: string | null,
+  accountUnit: Unit | null,
+  accountNameError: boolean,
+}
+
+type Props = {
+  setDataModal: Function,
+  updateAccount: Function,
+  t: T,
+  onClose: () => void,
+  data: any,
+}
+
+const mapDispatchToProps = {
+  setDataModal,
+  updateAccount,
+}
+
+const defaultState = {
+  accountName: null,
+  accountUnit: null,
+  accountNameError: false,
+}
+
+class HelperComp extends PureComponent<Props, State> {
+  state = {
+    ...defaultState,
+  }
+
+  getAccount(data: Object) {
+    const { accountName } = this.state
+    const account = get(data, 'account', {})
+
+    return {
+      ...account,
+      ...(accountName !== null
+        ? {
+            name: accountName,
+          }
+        : {}),
+    }
+  }
+
+  handleChangeName = (value: string) =>
+    this.setState({
+      accountName: value,
+    })
+
+  handleSubmit = (account: Account, onClose: () => void) => (
+    e: SyntheticEvent<HTMLFormElement>,
+  ) => {
+    e.preventDefault()
+
+    const { updateAccount, setDataModal } = this.props
+    const { accountName, accountUnit } = this.state
+
+    if (accountName !== '') {
+      account = { ...account, unit: accountUnit || account.unit }
+      updateAccount(account)
+      setDataModal(MODAL_SETTINGS_ACCOUNT, { account })
+      onClose()
+    } else {
+      this.setState({ accountNameError: true })
+    }
+  }
+
+  handleFocus = (e: any, name: string) => {
+    e.target.select()
+
+    switch (name) {
+      case 'accountName':
+        this.setState({ accountNameError: false })
+        break
+      default:
+        break
+    }
+  }
+
+  handleChangeUnit = (value: Unit) => {
+    this.setState({ accountUnit: value })
+  }
+
+  render() {
+    const { accountUnit, accountNameError } = this.state
+    const { t, onClose, data } = this.props
+
+    const account = this.getAccount(data)
+
+    return (
+      <ModalBody onClose={onClose}>
+        <form onSubmit={this.handleSubmit(account, onClose)}>
+          <ModalTitle>{t('account:settings.title')}</ModalTitle>
+          <ModalContent mb={3}>
+            <Container>
+              <Box>
+                <OptionRowTitle>{t('account:settings.accountName.title')}</OptionRowTitle>
+                <OptionRowDesc>{t('account:settings.accountName.desc')}</OptionRowDesc>
+              </Box>
+              <Box>
+                <Input
+                  value={account.name}
+                  onChange={this.handleChangeName}
+                  renderLeft={<InputLeft currency={account.currency} />}
+                  onFocus={e => this.handleFocus(e, 'accountName')}
+                />
+                {accountNameError && (
+                  <ErrorMessageInput>{t('account:settings.accountName.error')}</ErrorMessageInput>
+                )}
+              </Box>
+            </Container>
+            <Container>
+              <Box>
+                <OptionRowTitle>{t('account:settings.unit.title')}</OptionRowTitle>
+                <OptionRowDesc>{t('account:settings.unit.desc')}</OptionRowDesc>
+              </Box>
+              <Box style={{ width: 180 }}>
+                <Select
+                  keyProp="code"
+                  onChange={this.handleChangeUnit}
+                  renderSelected={item => item && item.code}
+                  renderItem={item => item && item.code}
+                  value={accountUnit || account.unit}
+                  items={account.currency.units}
+                />
+              </Box>
+            </Container>
+          </ModalContent>
+          <ModalFooter>
+            <Button small ml="auto" type="submit" primary>
+              {t('common:apply')}
+            </Button>
+          </ModalFooter>
+        </form>
+      </ModalBody>
+    )
+  }
+}
+
+export default compose(connect(null, mapDispatchToProps), translate())(HelperComp)
+
+export function InputLeft({ currency }: { currency: Currency }) {
+  return (
+    <Box ml={2} style={{ justifyContent: 'center' }} color={currency.color}>
+      <CryptoCurrencyIcon currency={currency} size={16} />
+    </Box>
+  )
+}
+
+export const Container = styled(Box).attrs({
+  flow: 2,
+  justify: 'space-between',
+  horizontal: true,
+  mb: 3,
+  pb: 4,
+})`
+  border-bottom: 1px solid ${p => p.theme.colors.lightGrey};
+`
+
+export const OptionRowDesc = styled(Box).attrs({
+  ff: 'Open Sans|Regular',
+  fontSize: 3,
+  textAlign: 'left',
+  lineHeight: 1.69,
+  color: 'grey',
+  shrink: 1,
+})``
+export const OptionRowTitle = styled(Box).attrs({
+  ff: 'Open Sans|SemiBold',
+  color: 'black',
+  fontSize: 4,
+  textAlign: 'left',
+  lineHeight: 1.69,
+})``
diff --git a/src/components/modals/SettingsAccount.js b/src/components/modals/SettingsAccount.js
index c6468abe..af1d2f3a 100644
--- a/src/components/modals/SettingsAccount.js
+++ b/src/components/modals/SettingsAccount.js
@@ -1,200 +1,18 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import styled from 'styled-components'
-import { connect } from 'react-redux'
-import { compose } from 'redux'
-import get from 'lodash/get'
-import { translate } from 'react-i18next'
-
-import type { Account, Unit, Currency } from '@ledgerhq/live-common/lib/types'
-import type { T } from 'types/common'
 import { MODAL_SETTINGS_ACCOUNT } from 'config/constants'
 
-import { updateAccount } from 'actions/accounts'
-import { setDataModal } from 'reducers/modals'
-
-import CryptoCurrencyIcon from 'components/CryptoCurrencyIcon'
-import Box from 'components/base/Box'
-import Button from 'components/base/Button'
-import Input, { ErrorMessageInput } from 'components/base/Input'
-import Select from 'components/base/Select/index'
-import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
-
-type State = {
-  accountName: string | null,
-  accountUnit: Unit | null,
-  accountNameError: boolean,
-}
-
-type Props = {
-  setDataModal: Function,
-  updateAccount: Function,
-  t: T,
-}
-
-const mapDispatchToProps = {
-  setDataModal,
-  updateAccount,
-}
-
-const defaultState = {
-  accountName: null,
-  accountUnit: null,
-  accountNameError: false,
-}
-
-class SettingsAccount extends PureComponent<Props, State> {
-  state = {
-    ...defaultState,
-  }
-
-  getAccount(data: Object) {
-    const { accountName } = this.state
-    const account = get(data, 'account', {})
-
-    return {
-      ...account,
-      ...(accountName !== null
-        ? {
-            name: accountName,
-          }
-        : {}),
-    }
-  }
-
-  handleChangeName = (value: string) =>
-    this.setState({
-      accountName: value,
-    })
-
-  handleSubmit = (account: Account, onClose: () => void) => (
-    e: SyntheticEvent<HTMLFormElement>,
-  ) => {
-    e.preventDefault()
-
-    const { updateAccount, setDataModal } = this.props
-    const { accountName, accountUnit } = this.state
-
-    if (accountName !== '') {
-      account = { ...account, unit: accountUnit || account.unit }
-      updateAccount(account)
-      setDataModal(MODAL_SETTINGS_ACCOUNT, { account })
-      onClose()
-    } else {
-      this.setState({ accountNameError: true })
-    }
-  }
-
-  handleFocus = (name: string) => {
-    switch (name) {
-      case 'accountName':
-        this.setState({ accountNameError: false })
-        break
-      default:
-        break
-    }
-  }
-
-  handleChangeUnit = (value: Unit) => {
-    this.setState({ accountUnit: value })
-  }
+import Modal from 'components/base/Modal'
+import AccountSettingRenderBody from './AccountSettingRenderBody'
 
+export default class SettingsAccount extends PureComponent<*, *> {
   render() {
-    const { accountUnit, accountNameError } = this.state
-    const { t } = this.props
-
     return (
       <Modal
         name={MODAL_SETTINGS_ACCOUNT}
-        render={({ data, onClose }) => {
-          const account = this.getAccount(data)
-          return (
-            <ModalBody onClose={onClose}>
-              <form onSubmit={this.handleSubmit(account, onClose)}>
-                <ModalTitle>{t('account:settings.title')}</ModalTitle>
-                <ModalContent mb={3}>
-                  <Container>
-                    <Box>
-                      <OptionRowTitle>{t('account:settings.accountName.title')}</OptionRowTitle>
-                      <OptionRowDesc>{t('account:settings.accountName.desc')}</OptionRowDesc>
-                    </Box>
-                    <Box>
-                      <Input
-                        value={account.name}
-                        onChange={this.handleChangeName}
-                        renderLeft={<InputLeft currency={account.currency} />}
-                        onFocus={() => this.handleFocus('accountName')}
-                      />
-                      {accountNameError && (
-                        <ErrorMessageInput>
-                          {t('account:settings.accountName.error')}
-                        </ErrorMessageInput>
-                      )}
-                    </Box>
-                  </Container>
-                  <Container>
-                    <Box>
-                      <OptionRowTitle>{t('account:settings.unit.title')}</OptionRowTitle>
-                      <OptionRowDesc>{t('account:settings.unit.desc')}</OptionRowDesc>
-                    </Box>
-                    <Box style={{ width: 180 }}>
-                      <Select
-                        keyProp="code"
-                        onChange={this.handleChangeUnit}
-                        renderSelected={item => item && item.code}
-                        value={accountUnit || account.unit}
-                        items={account.currency.units}
-                      />
-                    </Box>
-                  </Container>
-                </ModalContent>
-                <ModalFooter>
-                  <Button small ml="auto" type="submit" primary>
-                    {t('common:apply')}
-                  </Button>
-                </ModalFooter>
-              </form>
-            </ModalBody>
-          )
-        }}
+        render={({ data, onClose }) => <AccountSettingRenderBody data={data} onClose={onClose} />}
       />
     )
   }
 }
-
-export default compose(connect(null, mapDispatchToProps), translate())(SettingsAccount)
-
-export function InputLeft({ currency }: { currency: Currency }) {
-  return (
-    <Box ml={2} style={{ justifyContent: 'center' }} color={currency.color}>
-      <CryptoCurrencyIcon currency={currency} size={16} />
-    </Box>
-  )
-}
-
-export const Container = styled(Box).attrs({
-  flow: 2,
-  justify: 'space-between',
-  horizontal: true,
-  mb: 3,
-  pb: 4,
-})`
-  border-bottom: 1px solid ${p => p.theme.colors.lightGrey};
-`
-
-export const OptionRowDesc = styled(Box).attrs({
-  ff: 'Open Sans|Regular',
-  fontSize: 3,
-  textAlign: 'left',
-  lineHeight: 1.69,
-  color: 'grey',
-  shrink: 1,
-})``
-export const OptionRowTitle = styled(Box).attrs({
-  ff: 'Open Sans|SemiBold',
-  color: 'black',
-  fontSize: 4,
-  textAlign: 'left',
-  lineHeight: 1.69,
-})``