From cab6675a582f9685b6f65d7bfb248dc9d13ac01a 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 | 70 ++++++++++++++-----
 app/renderer/components/main/main.js          | 10 +--
 2 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/app/renderer/components/main/importBrowserDataPanel.js b/app/renderer/components/main/importBrowserDataPanel.js
index 3d023588113..16949bc69ea 100644
--- a/app/renderer/components/main/importBrowserDataPanel.js
+++ b/app/renderer/components/main/importBrowserDataPanel.js
@@ -6,7 +6,7 @@ const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const Button = require('../common/button')
 const SwitchControl = require('../common/switchControl')
@@ -26,18 +26,20 @@ const appActions = require('../../../../js/actions/appActions')
 // 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) {
@@ -45,6 +47,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
     }
     return this.props.importBrowserDataDetail.get(index)
   }
+
   get supportHistory () {
     let browserData = this.browserData
     if (browserData === undefined) {
@@ -52,6 +55,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
     }
     return browserData.get('history')
   }
+
   get supportFavorites () {
     let browserData = this.browserData
     if (browserData === undefined) {
@@ -59,6 +63,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
     }
     return browserData.get('favorites')
   }
+
   get supportCookies () {
     let browserData = this.browserData
     if (browserData === undefined) {
@@ -66,6 +71,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
     }
     return browserData.get('cookies')
   }
+
   onImport () {
     let index = this.props.importBrowserDataSelected.get('index')
     if (index === undefined) {
@@ -77,9 +83,11 @@ class ImportBrowserDataPanel extends ImmutableComponent {
       this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('type', type)
     }
     appActions.importBrowserData(this.props.importBrowserDataSelected)
-    this.props.onHide()
+    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)
@@ -95,8 +103,15 @@ class ImportBrowserDataPanel extends ImmutableComponent {
       importBrowserDataSelected = importBrowserDataSelected.set('cookies', true)
     }
     windowActions.setImportBrowserDataSelected(importBrowserDataSelected)
+    */
+  }
+
+  onHide () {
+    windowActions.setImportBrowserDataDetail()
   }
+
   get selectedBrowser () {
+    /*
     let index = this.props.importBrowserDataSelected.get('index')
     if (index === undefined) {
       this.props.importBrowserDataSelected = this.props.importBrowserDataSelected.set('index', '0')
@@ -111,15 +126,34 @@ class ImportBrowserDataPanel extends ImmutableComponent {
       }
     }
     return index !== undefined ? index : '0'
+    */
+  }
+
+  componentWilMount () {
+    windowActions.setImportBrowserDataSelected('')
   }
+
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const importBrowserDataSelected = currentWindow.get('importBrowserDataSelected')
+    const importBrowserDataDetail = currentWindow.get('importBrowserDataDetail')
+
+    const props = {}
+    props.importBrowserDataDetail = importBrowserDataDetail // TODO remove
+    props.importBrowserDataSelected = importBrowserDataSelected // TODO remove
+
+    // used in renderer
+    props.browserNames = importBrowserDataDetail.map((browser) => browser.name)
+    props.browserIndexes = importBrowserDataDetail.map((browser) => browser.index)
+
+    // used in other functions
+    props.selectedIndex = importBrowserDataSelected.get('index', 0)
+
+    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'
@@ -130,7 +164,11 @@ class ImportBrowserDataPanel extends ImmutableComponent {
             <CommonFormDropdown
               value={this.selectedBrowser}
               onChange={this.onChange} >
-              {browsers}
+              {
+                this.props.browserNames.forEach((name, i) => {
+                  return <option value={this.props.browserIndexes[i]}>{name}</option>
+                })
+              }
             </CommonFormDropdown>
           </div>
           <SwitchControl
@@ -156,7 +194,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
           <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 +205,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..88b9c70d373 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)
@@ -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
         }
         {