From 7827594c4603f0931e80287d545d8b61525baedf 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:
---
 .../autofill/autofillAddressPanel.js          | 233 +++++++++++-------
 app/renderer/components/main/main.js          |  10 +-
 2 files changed, 139 insertions(+), 104 deletions(-)

diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
index bb20fa9d2e1..79bf48724d6 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,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>
@@ -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>
@@ -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}
@@ -251,4 +294,4 @@ class AutofillAddressPanel extends ImmutableComponent {
   }
 }
 
-module.exports = AutofillAddressPanel
+module.exports = ReduxComponent.connect(AutofillAddressPanel)
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
         }
         {