Skip to content

Commit

Permalink
Converts AutofillAddressPanel into redux component
Browse files Browse the repository at this point in the history 
Resolves brave#9444

Auditors: @bsclifton @bridiver

Test Plan:
  • Loading branch information
@NejcZdovc
NejcZdovc committed Jun 15, 2017
1 parent 6478bcd commit 7827594
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 104 deletions.
233 changes: 138 additions & 95 deletions app/renderer/components/autofill/autofillAddressPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,13 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const ImmutableComponent = require('../immutableComponent')
const Dialog = require('../common/dialog')
const Button = require('../common/button')
const windowActions = require('../../../../js/actions/windowActions')
const appActions = require('../../../../js/actions/appActions')
const KeyCodes = require('../../../common/constants/keyCodes')

const Immutable = require('immutable')
const {css} = require('aphrodite/no-important')
const commonStyles = require('../styles/commonStyles')

// Components
const ReduxComponent = require('../reduxComponent')
const Dialog = require('../common/dialog')
const Button = require('../common/button')
const {
CommonFormLarge,
CommonFormSection,
Expand All @@ -21,6 +18,15 @@ const {
commonFormStyles
} = require('../common/commonForm')

// Actions
const windowActions = require('../../../../js/actions/windowActions')
const appActions = require('../../../../js/actions/appActions')

// Constants
const KeyCodes = require('../../../common/constants/keyCodes')

// Styles
const commonStyles = require('../styles/commonStyles')
const commonForm = css(
commonStyles.formControl,
commonStyles.textbox,
Expand All @@ -29,9 +35,9 @@ const commonForm = css(
commonFormStyles.input__box
)

class AutofillAddressPanel extends ImmutableComponent {
constructor () {
super()
class AutofillAddressPanel extends React.Component {
constructor (props) {
super(props)
this.onNameChange = this.onNameChange.bind(this)
this.onOrganizationChange = this.onOrganizationChange.bind(this)
this.onStreetAddressChange = this.onStreetAddressChange.bind(this)
Expand All @@ -45,118 +51,118 @@ class AutofillAddressPanel extends ImmutableComponent {
this.onSave = this.onSave.bind(this)
this.onClick = this.onClick.bind(this)
}

onNameChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('name', e.target.value)
if (this.nameOnAddress.value !== e.target.value) {
this.nameOnAddress.value = e.target.value
}
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
}
onOrganizationChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('organization', e.target.value)
if (this.organization.value !== e.target.value) {
this.organization.value = e.target.value
}
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
}
onStreetAddressChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('streetAddress', e.target.value)
if (this.streetAddress.value !== e.target.value) {
this.streetAddress.value = e.target.value
}
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
}
onCityChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('city', e.target.value)
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
if (this.city.value !== e.target.value) {
this.city.value = e.target.value
}
}
onStateChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('state', e.target.value)
if (this.state.value !== e.target.value) {
this.state.value = e.target.value
}
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
}
onPostalCodeChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('postalCode', e.target.value)
if (this.postalCode.value !== e.target.value) {
this.postalCode.value = e.target.value
}
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
}
onCountryChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('country', e.target.value)
if (this.country.value !== e.target.value) {
this.country.value = e.target.value
}
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
}
onPhoneChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('phone', e.target.value)
if (this.phone.value !== e.target.value) {
this.phone.value = e.target.value
}
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
}
onEmailChange (e) {
let currentDetail = this.props.currentDetail
currentDetail = currentDetail.set('email', e.target.value)
if (this.email.value !== e.target.value) {
this.email.value = e.target.value
}
windowActions.setAutofillAddressDetail(currentDetail, this.props.originalDetail)
}

onKeyDown (e) {
switch (e.keyCode) {
case KeyCodes.ENTER:
this.onSave()
break
case KeyCodes.ESC:
this.props.onHide()
this.onHide()
break
}
}

onSave () {
appActions.addAutofillAddress(this.props.currentDetail, this.props.originalDetail)
this.props.onHide()
appActions.addAutofillAddress({}, this.props.originalDetail)
this.onHide()
}

onClick (e) {
e.stopPropagation()
}
get disableSaveButton () {
let currentDetail = this.props.currentDetail
if (!currentDetail.size) return true
if (!currentDetail.get('name') && !currentDetail.get('organization') &&
!currentDetail.get('streetAddress') && !currentDetail.get('city') &&
!currentDetail.get('state') && !currentDetail.get('country') &&
!currentDetail.get('phone') && !currentDetail.get('email')) return true
return false
}

componentDidMount () {
this.nameOnAddress.focus()
this.nameOnAddress.value = this.props.currentDetail.get('name') || ''
this.organization.value = this.props.currentDetail.get('organization') || ''
this.streetAddress.value = this.props.currentDetail.get('streetAddress') || ''
this.city.value = this.props.currentDetail.get('city') || ''
this.state.value = this.props.currentDetail.get('state') || ''
this.postalCode.value = this.props.currentDetail.get('postalCode') || ''
this.country.value = this.props.currentDetail.get('country') || ''
this.phone.value = this.props.currentDetail.get('phone') || ''
this.email.value = this.props.currentDetail.get('email') || ''
}

onHide () {
windowActions.setAutofillAddressDetail()
}

mergeProps (state, ownProps) {
const currentWindow = state.get('currentWindow')
const currentDetail = currentWindow.getIn(['autofillAddressDetail', 'currentDetail'], Immutable.Map())
const originalDetail = currentWindow.getIn(['autofillAddressDetail', 'originalDetail'], Immutable.Map())

const props = {}
// Used in renderer
props.name = currentDetail.get('name', '')
props.organization = currentDetail.get('organization', '')
props.streetAddress = currentDetail.get('streetAddress', '')
props.city = currentDetail.get('city', '')
props.state = currentDetail.get('state', '')
props.postalCode = currentDetail.get('postalCode', '')
props.country = currentDetail.get('country', '')
props.phone = currentDetail.get('phone', '')
props.email = currentDetail.get('email', '')
props.disableSaveButton = !currentDetail.get('name') && !currentDetail.get('organization') &&
!currentDetail.get('streetAddress') && !currentDetail.get('city') &&
!currentDetail.get('state') && !currentDetail.get('country') &&
!currentDetail.get('phone') && !currentDetail.get('email')

// Used in other function
props.originalName = originalDetail.get('name')
props.originalOrganization = originalDetail.get('organization')
props.originalStreetAddress = originalDetail.get('streetAddress')
props.originalCity = originalDetail.get('city')
props.originalState = originalDetail.get('state')
props.originalPostalCode = originalDetail.get('postalCode')
props.originalCountry = originalDetail.get('country')
props.originalPhone = originalDetail.get('phone')
props.originalEmail = originalDetail.get('email')

return props
}

render () {
return <Dialog onHide={this.props.onHide} testId='autofillAddressPanel' isClickDismiss>
return <Dialog onHide={this.onHide} testId='autofillAddressPanel' isClickDismiss>
<CommonFormLarge onClick={this.onClick}>
<CommonFormTitle data-l10n-id='editAddress' />
<CommonFormSection>
Expand All @@ -173,62 +179,99 @@ class AutofillAddressPanel extends ImmutableComponent {
<label className={css(commonFormStyles.input__marginRow)} data-l10n-id='email' htmlFor='email' />
</div>
<div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__input)}>
<input className={css(
commonStyles.formControl,
commonStyles.textbox,
commonStyles.textbox__outlineable,
commonFormStyles.input__box
)}
<input
className={css(
commonStyles.formControl,
commonStyles.textbox,
commonStyles.textbox__outlineable,
commonFormStyles.input__box
)}
data-test-id='nameOnAddress'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange}
ref={(nameOnAddress) => { this.nameOnAddress = nameOnAddress }} />
spellCheck='false'
ref={(ref) => { this.nameOnAddress = ref }}
value={this.props.name}
onKeyDown={this.onKeyDown}
onChange={this.onNameChange}
/>
<div className={css(commonFormStyles.input__marginRow)}>
<input className={commonForm}
<input
className={commonForm}
data-test-id='organization'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onOrganizationChange}
ref={(organization) => { this.organization = organization }} />
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onOrganizationChange}
value={this.props.organization}
/>
</div>
<div className={css(commonFormStyles.input__marginRow)}>
<input className={commonForm}
<input
className={commonForm}
data-test-id='streetAddress'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStreetAddressChange}
ref={(streetAddress) => { this.streetAddress = streetAddress }} />
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onStreetAddressChange}
value={this.props.streetAddress}
/>
</div>
<div className={css(commonFormStyles.input__marginRow)}>
<input className={commonForm}
<input
className={commonForm}
data-test-id='city'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCityChange}
ref={(city) => { this.city = city }} />
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onCityChange}
value={this.props.city}
/>
</div>
<div className={css(commonFormStyles.input__marginRow)}>
<input className={commonForm}
<input
className={commonForm}
data-test-id='state'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStateChange}
ref={(state) => { this.state = state }} />
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onStateChange}
value={this.props.state}
/>
</div>
<div className={css(commonFormStyles.input__marginRow)}>
<input className={commonForm}
<input
className={commonForm}
data-test-id='postalCode'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPostalCodeChange}
ref={(postalCode) => { this.postalCode = postalCode }} />
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onPostalCodeChange}
value={this.props.postalCode}
/>
</div>
<div className={css(commonFormStyles.input__marginRow)}>
<input className={commonForm}
<input
className={commonForm}
data-test-id='country'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCountryChange}
ref={(country) => { this.country = country }} />
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onCountryChange}
value={this.props.country}
/>
</div>
<div className={css(commonFormStyles.input__marginRow)}>
<input className={commonForm}
<input
className={commonForm}
data-test-id='phone'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPhoneChange}
ref={(phone) => { this.phone = phone }} />
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onPhoneChange}
value={this.props.phone}
/>
</div>
<div className={css(commonFormStyles.input__marginRow)}>
<input className={commonForm}
<input
className={commonForm}
data-test-id='email'
spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onEmailChange}
ref={(email) => { this.email = email }} />
spellCheck='false'
onKeyDown={this.onKeyDown}
onChange={this.onEmailChange}
value={this.props.email}
/>
</div>
</div>
</div>
Expand All @@ -237,10 +280,10 @@ class AutofillAddressPanel extends ImmutableComponent {
<Button className='whiteButton'
l10nId='cancel'
testId='cancelAddressButton'
onClick={this.props.onHide}
onClick={this.onHide}
/>
<Button className='primaryButton'
disabled={this.disableSaveButton}
disabled={this.props.disableSaveButton}
l10nId='save'
testId='saveAddressButton'
onClick={this.onSave}
Expand All @@ -251,4 +294,4 @@ class AutofillAddressPanel extends ImmutableComponent {
}
}

module.exports = AutofillAddressPanel
module.exports = ReduxComponent.connect(AutofillAddressPanel)
Loading

0 comments on commit 7827594

Please sign in to comment.