From fe19bdb38e67b0ded5e71af0ec2b87fe8a306fed Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Wed, 14 Jun 2017 19:33:19 +0200
Subject: [PATCH] Converts ImportBrowserDataPanel into redux component

Resolves #9442

Auditors: @bsclifton @bridiver

Test Plan:
---
 .../components/main/importBrowserDataPanel.js | 166 ++++++++----------
 app/renderer/components/main/main.js          |  12 +-
 js/stores/windowStore.js                      |  12 +-
 3 files changed, 87 insertions(+), 103 deletions(-)

diff --git a/app/renderer/components/main/importBrowserDataPanel.js b/app/renderer/components/main/importBrowserDataPanel.js
index 3d023588113..e35458daa4a 100644
--- a/app/renderer/components/main/importBrowserDataPanel.js
+++ b/app/renderer/components/main/importBrowserDataPanel.js
@@ -4,9 +4,10 @@
 
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
+const Immutable = require('immutable')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const Button = require('../common/button')
 const SwitchControl = require('../common/switchControl')
@@ -20,106 +21,85 @@ const {
 } = require('../common/commonForm')
 
 // Actions
-const windowActions = require('../../../../js/actions/windowActions')
 const appActions = require('../../../../js/actions/appActions')
+const windowActions = require('../../../../js/actions/windowActions')
 
 // Styles
 const globalStyles = require('../styles/global')
 
-class ImportBrowserDataPanel extends ImmutableComponent {
-  constructor () {
-    super()
+class ImportBrowserDataPanel extends React.Component {
+  constructor (props) {
+    super(props)
     this.onToggleHistory = this.onToggleSetting.bind(this, 'history')
     this.onToggleFavorites = this.onToggleSetting.bind(this, 'favorites')
     this.onToggleCookies = this.onToggleSetting.bind(this, 'cookies')
     this.onImport = this.onImport.bind(this)
     this.onChange = this.onChange.bind(this)
   }
+
   onToggleSetting (setting, e) {
-    windowActions.setImportBrowserDataSelected(this.props.importBrowserDataSelected.set(setting, e.target.value))
-  }
-  get browserData () {
-    let index = this.props.importBrowserDataSelected.get('index')
-    if (index === undefined) {
-      index = '0'
-    }
-    return this.props.importBrowserDataDetail.get(index)
-  }
-  get supportHistory () {
-    let browserData = this.browserData
-    if (browserData === undefined) {
-      return false
-    }
-    return browserData.get('history')
-  }
-  get supportFavorites () {
-    let browserData = this.browserData
-    if (browserData === undefined) {
-      return false
-    }
-    return browserData.get('favorites')
-  }
-  get supportCookies () {
-    let browserData = this.browserData
-    if (browserData === undefined) {
-      return false
-    }
-    return browserData.get('cookies')
+    windowActions.setImportBrowserDataSelected({
+      [setting]: e.target.value
+    })
   }
+
   onImport () {
-    let index = this.props.importBrowserDataSelected.get('index')
-    if (index === undefined) {
-      this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('index', '0')
-    }
-    let browserData = this.browserData
-    if (browserData !== undefined) {
-      let type = browserData.get('type')
-      this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('type', type)
+    let data = {}
+    data.index = this.props.selectedIndex.toString()
+    data.cookies = this.props.cookies
+    data.favorites = this.props.favorites
+    data.history = this.props.history
+
+    if (this.props.type != null) {
+      data.type = this.props.type
     }
-    appActions.importBrowserData(this.props.importBrowserDataSelected)
-    this.props.onHide()
+
+    appActions.importBrowserData(Immutable.fromJS(data))
+    this.onHide()
   }
+
   onChange (e) {
-    this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('index', e.target.value)
-    this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('history', false)
-    this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('favorites', false)
-    this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('cookies', false)
-    let importBrowserDataSelected = this.props.importBrowserDataSelected
-    if (this.supportHistory) {
-      importBrowserDataSelected = importBrowserDataSelected.set('history', true)
-    }
-    if (this.supportFavorites) {
-      importBrowserDataSelected = importBrowserDataSelected.set('favorites', true)
-    }
-    if (this.supportCookies) {
-      importBrowserDataSelected = importBrowserDataSelected.set('cookies', true)
-    }
-    windowActions.setImportBrowserDataSelected(importBrowserDataSelected)
+    windowActions.setImportBrowserDataSelected(~~e.target.value)
+  }
+
+  onHide () {
+    windowActions.setImportBrowserDataDetail()
   }
-  get selectedBrowser () {
-    let index = this.props.importBrowserDataSelected.get('index')
-    if (index === undefined) {
-      this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('index', '0')
-      if (this.supportHistory) {
-        this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('history', true)
-      }
-      if (this.supportFavorites) {
-        this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('favorites', true)
-      }
-      if (this.supportCookies) {
-        this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('cookies', true)
-      }
+
+  componentWillMount () {
+    if (this.props.selectedIndex == null) {
+      windowActions.setImportBrowserDataSelected(0)
     }
-    return index !== undefined ? index : '0'
   }
+
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const importBrowserDataSelected = currentWindow.get('importBrowserDataSelected', Immutable.Map())
+    const importBrowserDataDetail = currentWindow.get('importBrowserDataDetail', Immutable.Map())
+    const index = importBrowserDataSelected.get('index', '0')
+    const currentBrowser = importBrowserDataDetail.get(index, Immutable.Map())
+
+    const props = {}
+    // used in renderer
+    props.browserNames = importBrowserDataDetail.map((browser) => browser.get('name'))
+    props.browserIndexes = importBrowserDataDetail.map((browser) => browser.get('index'))
+    props.isSupportingHistory = currentBrowser.get('history', false)
+    props.isSupportingFavourites = currentBrowser.get('favorites', false)
+    props.isSupportingCookies = currentBrowser.get('cookies', false)
+    props.currentIndex = index
+    props.cookies = importBrowserDataSelected.get('cookies')
+    props.favorites = importBrowserDataSelected.get('favorites')
+    props.history = importBrowserDataSelected.get('history')
+    props.type = importBrowserDataSelected.get('type')
+
+    // used in other functions
+    props.selectedIndex = importBrowserDataSelected.get('index')
+
+    return props
+  }
+
   render () {
-    var browsers = []
-    if (this.props.importBrowserDataDetail !== undefined) {
-      this.props.importBrowserDataDetail.toJS().forEach((browser) => {
-        browsers.push(<option value={browser.index}>{browser.name}</option>)
-      })
-    }
-    return <Dialog onHide={this.props.onHide} testId='importBrowserDataPanel' isClickDismiss>
+    return <Dialog onHide={this.onHide} testId='importBrowserDataPanel' isClickDismiss>
       <CommonForm data-test-id='importBrowserData' onClick={(e) => e.stopPropagation()}>
         <CommonFormTitle
           data-test-id='importBrowserDataTitle'
@@ -128,35 +108,39 @@ class ImportBrowserDataPanel extends ImmutableComponent {
         <CommonFormSection data-test-id='importBrowserDataOptions'>
           <div className={css(styles.dropdownWrapper)}>
             <CommonFormDropdown
-              value={this.selectedBrowser}
+              value={this.props.currentIndex}
               onChange={this.onChange} >
-              {browsers}
+              {
+                this.props.browserNames.map((name, i) => {
+                  return <option value={this.props.browserIndexes.get(i)}>{name}</option>
+                })
+              }
             </CommonFormDropdown>
           </div>
           <SwitchControl
             rightl10nId='browserHistory'
-            checkedOn={this.props.importBrowserDataSelected.get('history')}
+            checkedOn={this.props.history}
             onClick={this.onToggleHistory}
-            disabled={!this.supportHistory}
+            disabled={!this.props.isSupportingHistory}
           />
           <SwitchControl
             rightl10nId='favoritesOrBookmarks'
-            checkedOn={this.props.importBrowserDataSelected.get('favorites')}
+            checkedOn={this.props.favorites}
             onClick={this.onToggleFavorites}
-            disabled={!this.supportFavorites}
+            disabled={!this.props.isSupportingFavourites}
           />
           <SwitchControl
             rightl10nId='cookies'
-            checkedOn={this.props.importBrowserDataSelected.get('cookies')}
+            checkedOn={this.props.cookies}
             onClick={this.onToggleCookies}
-            disabled={!this.supportCookies}
+            disabled={!this.props.isSupportingCookies}
           />
         </CommonFormSection>
         <CommonFormSection>
           <div data-l10n-id='importDataCloseBrowserWarning' />
         </CommonFormSection>
         <CommonFormButtonWrapper data-test-id='importBrowserDataButtons'>
-          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
+          <Button l10nId='cancel' className='whiteButton' onClick={this.onHide} />
           <Button l10nId='import' className='primaryButton' onClick={this.onImport} />
         </CommonFormButtonWrapper>
         <CommonFormBottomWrapper data-test-id='importBrowserDataWarning'>
@@ -167,10 +151,10 @@ class ImportBrowserDataPanel extends ImmutableComponent {
   }
 }
 
+module.exports = ReduxComponent.connect(ImportBrowserDataPanel)
+
 const styles = StyleSheet.create({
   dropdownWrapper: {
     marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
   }
 })
-
-module.exports = ImportBrowserDataPanel
diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
index cdbe739aaa1..147213928ac 100644
--- a/app/renderer/components/main/main.js
+++ b/app/renderer/components/main/main.js
@@ -77,7 +77,6 @@ class Main extends ImmutableComponent {
     this.onHideSiteInfo = this.onHideSiteInfo.bind(this)
     this.onHideBraveryPanel = this.onHideBraveryPanel.bind(this)
     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)
@@ -453,7 +452,7 @@ class Main extends ImmutableComponent {
 
     ipc.on(messages.IMPORTER_LIST, (e, detail) => {
       windowActions.setImportBrowserDataDetail(detail)
-      windowActions.setImportBrowserDataSelected({})
+      windowActions.setImportBrowserDataSelected()
     })
     // DO NOT ADD TO THIS LIST - see above
 
@@ -541,10 +540,6 @@ class Main extends ImmutableComponent {
     windowActions.setClearBrowsingDataPanelVisible(false)
   }
 
-  onHideImportBrowserDataPanel () {
-    windowActions.setImportBrowserDataDetail()
-  }
-
   onHideWidevinePanel () {
     windowActions.widevinePanelDetailChanged({
       shown: false
@@ -743,10 +738,7 @@ class Main extends ImmutableComponent {
         }
         {
           importBrowserDataPanelIsVisible
-          ? <ImportBrowserDataPanel
-            importBrowserDataDetail={this.props.windowState.get('importBrowserDataDetail')}
-            importBrowserDataSelected={this.props.windowState.get('importBrowserDataSelected')}
-            onHide={this.onHideImportBrowserDataPanel} />
+          ? <ImportBrowserDataPanel />
           : null
         }
         {
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index d4a24f5fcf8..c22231302b4 100644
--- a/js/stores/windowStore.js
+++ b/js/stores/windowStore.js
@@ -529,6 +529,7 @@ const doAction = (action) => {
     case windowConstants.WINDOW_SET_CLEAR_BROWSING_DATA_VISIBLE:
       windowState = windowState.setIn(['ui', 'isClearBrowsingDataPanelVisible'], action.isVisible)
       break
+
     case windowConstants.WINDOW_SET_IMPORT_BROWSER_DATA_DETAIL:
       if (!action.importBrowserDataDetail) {
         windowState = windowState.delete('importBrowserDataDetail')
@@ -537,10 +538,17 @@ const doAction = (action) => {
       }
       break
     case windowConstants.WINDOW_SET_IMPORT_BROWSER_DATA_SELECTED:
-      if (!action.selected) {
+      if (action.selected == null) {
         windowState = windowState.delete('importBrowserDataSelected')
       } else {
-        windowState = windowState.set('importBrowserDataSelected', Immutable.fromJS(action.selected))
+        if (typeof action.selected === 'number') {
+          const detail = windowState.getIn(['importBrowserDataDetail', action.selected])
+          windowState = windowState.set('importBrowserDataSelected', detail)
+        } else {
+          action.selected.forEach((value, key) => {
+            windowState = windowState.setIn(['importBrowserDataSelected', key], value)
+          })
+        }
       }
       break
     case windowConstants.WINDOW_WIDEVINE_PANEL_DETAIL_CHANGED: