From 1222033df73fdfaa041c27d5e66b75dc4edfebf8 Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
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                               |  18 +-
 .../autofill/autofillAddressPanel.js          | 267 ++++++++++--------
 app/renderer/components/frame/frame.js        |   4 +-
 app/renderer/components/main/main.js          |  10 +-
 js/actions/appActions.js                      |   6 +-
 js/actions/windowActions.js                   |  12 +-
 js/stores/appStore.js                         |   8 +-
 js/stores/windowStore.js                      |   9 +-
 8 files changed, 176 insertions(+), 158 deletions(-)

diff --git a/app/autofill.js b/app/autofill.js
index 64420d91257..1216cf65727 100644
--- a/app/autofill.js
+++ b/app/autofill.js
@@ -15,15 +15,15 @@ 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,
+    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: guid
   })
 }
diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
index bb20fa9d2e1..8c9dbaf8dfb 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,98 @@ 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
+    }))
+    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.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 <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>
@@ -173,62 +159,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>
@@ -237,10 +260,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}
@@ -251,4 +274,4 @@ class AutofillAddressPanel extends ImmutableComponent {
   }
 }
 
-module.exports = AutofillAddressPanel
+module.exports = ReduxComponent.connect(AutofillAddressPanel)
diff --git a/app/renderer/components/frame/frame.js b/app/renderer/components/frame/frame.js
index c9933ed3b40..4dbc227b7d6 100644
--- a/app/renderer/components/frame/frame.js
+++ b/app/renderer/components/frame/frame.js
@@ -602,8 +602,8 @@ class Frame extends React.Component {
             windowActions.setClearBrowsingDataPanelVisible(true)
           break
         case messages.AUTOFILL_SET_ADDRESS:
-          method = (currentDetail, originalDetail) =>
-            windowActions.setAutofillAddressDetail(currentDetail, originalDetail)
+          method = (currentDetail) =>
+            windowActions.setAutofillAddressDetail(null, null, currentDetail)
           break
         case messages.AUTOFILL_SET_CREDIT_CARD:
           method = (currentDetail, originalDetail) =>
diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
index fe99991f648..b2e4e032dd7 100644
--- a/app/renderer/components/main/main.js
+++ b/app/renderer/components/main/main.js
@@ -80,7 +80,6 @@ class Main extends ImmutableComponent {
     this.onHideClearBrowsingDataPanel = this.onHideClearBrowsingDataPanel.bind(this)
     this.onHideImportBrowserDataPanel = this.onHideImportBrowserDataPanel.bind(this)
     this.onHideWidevinePanel = this.onHideWidevinePanel.bind(this)
-    this.onHideAutofillAddressPanel = this.onHideAutofillAddressPanel.bind(this)
     this.onHideAutofillCreditCardPanel = this.onHideAutofillCreditCardPanel.bind(this)
     this.onHideNoScript = this.onHideNoScript.bind(this)
     this.onHideReleaseNotes = this.onHideReleaseNotes.bind(this)
@@ -552,10 +551,6 @@ class Main extends ImmutableComponent {
     })
   }
 
-  onHideAutofillAddressPanel () {
-    windowActions.setAutofillAddressDetail()
-  }
-
   onHideAutofillCreditCardPanel () {
     windowActions.setAutofillCreditCardDetail()
   }
@@ -759,10 +754,7 @@ class Main extends ImmutableComponent {
         }
         {
          autofillAddressPanelIsVisible
-          ? <AutofillAddressPanel
-            currentDetail={this.props.windowState.getIn(['autofillAddressDetail', 'currentDetail'])}
-            originalDetail={this.props.windowState.getIn(['autofillAddressDetail', 'originalDetail'])}
-            onHide={this.onHideAutofillAddressPanel} />
+          ? <AutofillAddressPanel />
           : null
         }
         {
diff --git a/js/actions/appActions.js b/js/actions/appActions.js
index 4cfd9693e74..3f80c6e35be 100644
--- a/js/actions/appActions.js
+++ b/js/actions/appActions.js
@@ -610,13 +610,11 @@ const appActions = {
   /**
    * Add address data
    * @param {object} detail - the address to add as per doc/state.md's autofillAddressDetail
-   * @param {object} originalDetail - the original address before editing
    */
-  addAutofillAddress: function (detail, originalDetail) {
+  addAutofillAddress: function (detail) {
     dispatch({
       actionType: appConstants.APP_ADD_AUTOFILL_ADDRESS,
-      detail,
-      originalDetail
+      detail
     })
   },
 
diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js
index a6806fda057..3c02ef21ba2 100644
--- a/js/actions/windowActions.js
+++ b/js/actions/windowActions.js
@@ -784,14 +784,16 @@ const windowActions = {
 
   /**
    * Sets the manage autofill address popup detail
-   * @param {Object} currentDetail - Properties of the address to change to
-   * @param {Object} originalDetail - Properties of the address to edit
+   * @param {string} property - Property that we want change
+   * @param {string} newValue - New value for this property
+   * @param {Object} wholeObject - Whole object of address detail
    */
-  setAutofillAddressDetail: function (currentDetail, originalDetail) {
+  setAutofillAddressDetail: function (property, newValue, wholeObject) {
     dispatch({
       actionType: windowConstants.WINDOW_SET_AUTOFILL_ADDRESS_DETAIL,
-      currentDetail,
-      originalDetail
+      property,
+      newValue,
+      wholeObject
     })
   },
 
diff --git a/js/stores/appStore.js b/js/stores/appStore.js
index b04dba5fc7e..0a128c800dc 100644
--- a/js/stores/appStore.js
+++ b/js/stores/appStore.js
@@ -708,8 +708,12 @@ const handleAppAction = (action) => {
         break
       }
     case appConstants.APP_ADD_AUTOFILL_ADDRESS:
-      autofill.addAutofillAddress(action.detail.toJS(),
-        action.originalDetail.get('guid') === undefined ? '-1' : action.originalDetail.get('guid'))
+      const detail = action.detail
+      const guid = detail.get('guid') == null
+        ? '-1'
+        : detail.get('guid')
+
+      autofill.addAutofillAddress(detail, guid)
       break
     case appConstants.APP_REMOVE_AUTOFILL_ADDRESS:
       autofill.removeAutofillAddress(action.detail.get('guid'))
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index d4a24f5fcf8..c7f108027d6 100644
--- a/js/stores/windowStore.js
+++ b/js/stores/windowStore.js
@@ -559,13 +559,12 @@ const doAction = (action) => {
       }))
       break
     case windowConstants.WINDOW_SET_AUTOFILL_ADDRESS_DETAIL:
-      if (!action.currentDetail && !action.originalDetail) {
+      if (!action.property && !action.wholeObject) {
         windowState = windowState.delete('autofillAddressDetail')
+      } else if (action.wholeObject) {
+        windowState = windowState.set('autofillAddressDetail', Immutable.fromJS(action.wholeObject))
       } else {
-        windowState = windowState.mergeIn(['autofillAddressDetail'], {
-          currentDetail: action.currentDetail,
-          originalDetail: action.originalDetail
-        })
+        windowState = windowState.setIn(['autofillAddressDetail', action.property], action.newValue)
       }
       break
     case windowConstants.WINDOW_SET_AUTOFILL_CREDIT_CARD_DETAIL: