ensuring modal unmounting for the account settings when changing the account

7 years ago · 04a787d845
2 changed files with 201 additions and 186 deletions
--- a/src/components/modals/AccountSettingRenderBody.js
+++ 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,
 })``
--- 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 Modal from 'components/base/Modal'
-import { setDataModal } from 'reducers/modals'
+import AccountSettingRenderBody from './AccountSettingRenderBody'
 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 })
  }
 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 }) => {
+        render={({ data, onClose }) => <AccountSettingRenderBody data={data} onClose={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>
          )
        }}
      />
    )
  }
 }
 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,
 })``