From a863d3b6c8deea2fb98773cffc5b94030b1f565e Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Thu, 15 Jun 2017 13:38:17 +0200 Subject: [PATCH] Converts AutofillAddressPanel into redux component Resolves #9444 Auditors: @bsclifton @bridiver Test Plan: --- app/autofill.js | 20 +- .../autofill/autofillAddressPanel.js | 269 ++++++++++-------- app/renderer/components/frame/frame.js | 4 +- app/renderer/components/main/main.js | 10 +- docs/appActions.md | 4 +- docs/windowActions.md | 8 +- js/actions/appActions.js | 6 +- js/actions/windowActions.js | 12 +- js/stores/appStore.js | 3 +- js/stores/windowStore.js | 9 +- test/contents/autofillTest.js | 3 + 11 files changed, 183 insertions(+), 165 deletions(-) diff --git a/app/autofill.js b/app/autofill.js index 64420d91257..cb6d7dc5a9b 100644 --- a/app/autofill.js +++ b/app/autofill.js @@ -15,16 +15,16 @@ module.exports.init = () => { module.exports.addAutofillAddress = (detail, guid) => { session.defaultSession.autofill.addProfile({ - full_name: detail.name, - company_name: detail.organization, - street_address: detail.streetAddress, - city: detail.city, - state: detail.state, - postal_code: detail.postalCode, - country_code: detail.country, - phone: detail.phone, - email: detail.email, - guid: guid + full_name: detail.get('name'), + company_name: detail.get('organization'), + street_address: detail.get('streetAddress'), + city: detail.get('city'), + state: detail.get('state'), + postal_code: detail.get('postalCode'), + country_code: detail.get('country'), + phone: detail.get('phone'), + email: detail.get('email'), + guid: detail.get('guid') }) } diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js index bb20fa9d2e1..36f37f9253e 100644 --- a/app/renderer/components/autofill/autofillAddressPanel.js +++ b/app/renderer/components/autofill/autofillAddressPanel.js @@ -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, @@ -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, @@ -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) @@ -45,118 +51,100 @@ 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) + windowActions.setAutofillAddressDetail('name', e.target.value) } 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) + windowActions.setAutofillAddressDetail('organization', e.target.value) } 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) + windowActions.setAutofillAddressDetail('streetAddress', e.target.value) } 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 - } + windowActions.setAutofillAddressDetail('city', 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) + windowActions.setAutofillAddressDetail('state', e.target.value) } 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) + windowActions.setAutofillAddressDetail('postalCode', e.target.value) } 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) + windowActions.setAutofillAddressDetail('country', e.target.value) } 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) + windowActions.setAutofillAddressDetail('phone', e.target.value) } 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) + windowActions.setAutofillAddressDetail('email', e.target.value) } + 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(Immutable.fromJS({ + name: this.props.name, + organization: this.props.organization, + streetAddress: this.props.streetAddress, + city: this.props.city, + state: this.props.state, + postalCode: this.props.postalCode, + country: this.props.country, + phone: this.props.phone, + email: this.props.email, + guid: this.props.guid + })) + 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 detail = currentWindow.get('autofillAddressDetail', Immutable.Map()) + + const props = {} + // Used in renderer + props.name = detail.get('name', '') + props.organization = detail.get('organization', '') + props.streetAddress = detail.get('streetAddress', '') + props.city = detail.get('city', '') + props.state = detail.get('state', '') + props.postalCode = detail.get('postalCode', '') + props.country = detail.get('country', '') + props.phone = detail.get('phone', '') + props.email = detail.get('email', '') + props.guid = detail.get('guid', '-1') + props.disableSaveButton = !detail.get('name') && !detail.get('organization') && + !detail.get('streetAddress') && !detail.get('city') && + !detail.get('state') && !detail.get('country') && + !detail.get('phone') && !detail.get('email') + + return props + } + render () { - return + return @@ -173,62 +161,99 @@ class AutofillAddressPanel extends ImmutableComponent {