Skip to content

Commit

Permalink
Converts ImportBrowserDataPanel into redux component
Browse files Browse the repository at this point in the history 
Resolves brave#9442

Auditors: @bsclifton @bridiver

Test Plan:
  • Loading branch information
@NejcZdovc
NejcZdovc committed Jun 15, 2017
1 parent 915e13e commit fe19bdb
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 103 deletions.
166 changes: 75 additions & 91 deletions app/renderer/components/main/importBrowserDataPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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'
Expand All @@ -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'>
Expand All @@ -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
12 changes: 2 additions & 10 deletions app/renderer/components/main/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -541,10 +540,6 @@ class Main extends ImmutableComponent {
windowActions.setClearBrowsingDataPanelVisible(false)
}

onHideImportBrowserDataPanel () {
windowActions.setImportBrowserDataDetail()
}

onHideWidevinePanel () {
windowActions.widevinePanelDetailChanged({
shown: false
Expand Down Expand Up @@ -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
}
{
Expand Down
12 changes: 10 additions & 2 deletions js/stores/windowStore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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:
Expand Down

0 comments on commit fe19bdb

Please sign in to comment.