MessageBox -> redux

app/common/state/tabMessageBoxState.js

@@ -2,11 +2,26 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+const assert = require('assert')
 const tabState = require('./tabState')
-const {makeImmutable} = require('./immutableUtil')
+const {makeImmutable, isList, isMap} = require('./immutableUtil')
 
 const messageBoxDetail = 'messageBoxDetail'
 
+const validateState = function (state) {
+  state = makeImmutable(state)
+  assert.ok(isMap(state), 'state must be an Immutable.Map')
+  assert.ok(isList(state.get('tabs')), 'state must contain an Immutable.List of tabs')
+  return state
+}
+
+const validateId = function (propName, id) {
+  assert.ok(id, `${propName} cannot be null`)
+  id = parseInt(id)
+  assert.ok(id === -1 || id > 0, `${propName} must be positive`)
+  return id
+}
+
 const tabMessageBoxState = {
   show: (state, action) => {
     state = makeImmutable(state)
@@ -56,6 +71,34 @@ const tabMessageBoxState = {
 
     tabValue = tabValue.delete(messageBoxDetail)
     return tabState.updateTab(state, {tabValue, replace: true})
+  },
+
+  getPropertyByTabId: (state, tabId, property) => {
+    state = validateState(state)
+    tabId = validateId('tabId', tabId)
+    const tab = tabState.getByTabId(state, tabId)
+
+    if (tab) {
+      return tab.getIn([messageBoxDetail, property])
+    }
+
+    return undefined
+  },
+
+  getSuppress: (state, tabId) => {
+    return tabMessageBoxState.getPropertyByTabId(state, tabId, 'suppress') || false
+  },
+
+  getShowSuppress: (state, tabId) => {
+    return tabMessageBoxState.getPropertyByTabId(state, tabId, 'showSuppress') || false
+  },
+
+  getTitle: (state, tabId) => {
+    return tabMessageBoxState.getPropertyByTabId(state, tabId, 'title') || ''
+  },
+
+  getButtons: (state, tabId) => {
+    return tabMessageBoxState.getPropertyByTabId(state, tabId, 'buttons') || makeImmutable(['ok'])
   }
 }
 

app/renderer/components/messageBox.js

@@ -4,13 +4,16 @@
 
 const React = require('react')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
+const ReduxComponent = require('./reduxComponent')
 const Dialog = require('../../../js/components/dialog')
 const Button = require('../../../js/components/button')
 const SwitchControl = require('../../../js/components/switchControl')
 const appActions = require('../../../js/actions/appActions')
 const KeyCodes = require('../../common/constants/keyCodes')
 const config = require('../../../js/constants/config')
 const {makeImmutable} = require('../../common/state/immutableUtil')
+const tabState = require('../../common/state/tabState')
+const tabMessageBoxState = require('../../common/state/tabMessageBoxState')
 
 const {StyleSheet, css} = require('aphrodite')
 const commonStyles = require('./styles/commonStyles')
@@ -26,105 +29,100 @@ class MessageBox extends ImmutableComponent {
   componentWillMount () {
     document.addEventListener('keydown', this.onKeyDown)
   }
+
   componentWillUnmount () {
     document.removeEventListener('keydown', this.onKeyDown)
   }
 
-  get tabId () {
-    return this.props.tabId || ''
-  }
-
-  get title () {
-    const msgBoxTitle = (this.props.detail && this.props.detail.get('title')) || ''
-    return msgBoxTitle.replace(config.braveExtensionId, 'Brave')
-  }
-
-  get message () {
-    return (this.props.detail && this.props.detail.get('message')) || ''
-  }
-
-  get buttons () {
-    return (this.props.detail && this.props.detail.get('buttons')) || makeImmutable(['ok'])
-  }
-
-  get cancelId () {
-    return this.props.detail && this.props.detail.get('cancelId')
-  }
-
-  get suppress () {
-    return (this.props.detail && this.props.detail.get('suppress')) || false
-  }
-
-  get showSuppress () {
-    return (this.props.detail && this.props.detail.get('showSuppress')) || false
-  }
-
   onKeyDown (e) {
     if (this.props.isActive) {
       switch (e.keyCode) {
         case KeyCodes.ENTER:
-          this.onDismiss(this.tabId)
+          this.onDismiss(this.props.tabId)
           break
         case KeyCodes.ESC:
-          this.onDismiss(this.tabId, this.cancelId)
+          this.onDismiss(this.props.tabId, this.props.cancelId)
           break
       }
     }
   }
 
-  onSuppressChanged (e) {
-    const detail = this.props.detail.toJS()
-    detail.suppress = !detail.suppress
-    appActions.tabMessageBoxUpdated(this.tabId, detail)
+  onSuppressChanged () {
+    const detail = {
+      buttons: this.props.buttons,
+      cancelId: this.props.cancelId,
+      message: this.props.message,
+      showSuppress: this.props.showSuppress,
+      suppress: !this.props.suppress,
+      title: this.props.title
+    }
+
+    appActions.tabMessageBoxUpdated(this.props.tabId, detail)
   }
 
   onDismiss (tabId, buttonId) {
     const response = {
-      suppress: this.suppress,
+      suppress: this.props.suppress,
       result: true
     }
 
-    if (typeof this.cancelId === 'number') {
-      response.result = buttonId !== this.cancelId
+    if (typeof this.props.cancelId === 'number') {
+      response.result = buttonId !== this.props.cancelId
     }
 
-    appActions.tabMessageBoxDismissed(this.tabId, response)
+    appActions.tabMessageBoxDismissed(tabId, response)
   }
 
   get messageBoxButtons () {
-    const buttons = []
+    const buttons = this.props.buttons || makeImmutable(['ok'])
+    const newButtons = []
 
-    for (let index = (this.buttons.size - 1); index > -1; index--) {
-      buttons.push(<Button l10nId={this.buttons.get(index)}
+    for (let index = (buttons.size - 1); index > -1; index--) {
+      newButtons.push(<Button l10nId={buttons.get(index)}
         className={index === 0 ? 'primaryButton' : 'whiteButton'}
-        onClick={this.onDismiss.bind(this, this.tabId, index)} />)
+        onClick={this.onDismiss.bind(this, this.props.tabId, index)} />)
     }
 
-    return buttons
+    return newButtons
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const tab = tabState.getByTabId(state, ownProps.tabId)
+    const messageBoxDetail = tab.get('messageBoxDetail')
+
+    const props = {}
+    props.tabId = ownProps.tabId
+    props.message = messageBoxDetail.get('message')
+    props.cancelId = messageBoxDetail.get('cancelId')
+    props.suppress = tabMessageBoxState.getSuppress(state, ownProps.tabId)
+    props.showSuppress = tabMessageBoxState.getShowSuppress(state, ownProps.tabId)
+    props.title = tabMessageBoxState.getTitle(state, ownProps.tabId)
+    props.buttons = tabMessageBoxState.getButtons(state, ownProps.tabId)
+
+    return Object.assign({}, ownProps, props)
   }
 
   render () {
     return <Dialog className={css(styles.dialog)}>
-      <div data-test-id={'msgBoxTab_' + this.tabId}
-        onClick={this.onClick}
+      <div data-test-id={'msgBoxTab_' + this.props.tabId}
         onKeyDown={this.onKeyDown}
         className={css(
           commonStyles.flyoutDialog,
           styles.container
         )}>
         <div className={css(styles.title)} data-test-id='msgBoxTitle'>
-          {this.title}
+          {this.props.title.replace(config.braveExtensionId, 'Brave')}
         </div>
         <div className={css(styles.body)} data-test-id='msgBoxMessage'>
-          {this.message}
+          {this.props.message}
         </div>
         {
-          this.showSuppress
+          this.props.showSuppress
             ? <SwitchControl
               // TODO: refactor SwitchControl
               className={css(commonStyles.noPaddingLeft)}
               rightl10nId='preventMoreAlerts'
-              checkedOn={this.suppress}
+              checkedOn={this.props.suppress}
               onClick={this.onSuppressChanged} />
             : null
         }
@@ -163,4 +161,4 @@ const styles = StyleSheet.create({
   }
 })
 
-module.exports = MessageBox
+module.exports = ReduxComponent.connect(MessageBox)

js/components/frame.js

@@ -23,6 +23,7 @@ const windowStore = require('../stores/windowStore')
 const appStoreRenderer = require('../stores/appStoreRenderer')
 const siteSettings = require('../state/siteSettings')
 const siteSettingsState = require('../../app/common/state/siteSettingsState')
+const tabState = require('../../app/common/state/tabState')
 
 // Utils
 const frameStateUtil = require('../state/frameStateUtil')
@@ -1042,6 +1043,7 @@ class Frame extends ImmutableComponent {
       ? siteSettings.getSiteSettingsForURL(allSiteSettings, frame.get('location'))
       : undefined
     const contextMenu = currentWindow.get('contextMenuDetail')
+    const tab = tabState.getTabIndexByTabId(state, frame.tabId)
 
     const props = {}
     // used in renderer
@@ -1054,6 +1056,7 @@ class Frame extends ImmutableComponent {
     props.hrefPreview = frame.get('hrefPreview')
     props.showOnRight = frame.get('showOnRight')
     props.tabId = frame.get('tabId')
+    props.showMessageBox = tab && tab.get('messageBoxDetail')
 
     // used in other functions
     props.tabIndex = frameStateUtil.getFrameIndex(currentWindow, frame.get('key'))
@@ -1090,7 +1093,6 @@ class Frame extends ImmutableComponent {
   }
 
   render () {
-    const messageBoxDetail = this.tab && this.tab.get('messageBoxDetail') // TODO remove when adding redux to MessageBox
     return <div
       data-partition={this.props.partition}
       className={cx({
@@ -1119,11 +1121,10 @@ class Frame extends ImmutableComponent {
         : null
       }
       {
-        messageBoxDetail
+        this.props.showMessageBox
         ? <MessageBox
           isActive={this.props.isActive}
-          tabId={this.props.tabId}
-          detail={messageBoxDetail} />
+          tabId={this.props.tabId} />
         : null
       }
     </div>

test/unit/app/common/state/tabMessageBoxStateTest.js

@@ -1,6 +1,7 @@
 /* global describe, it, before, after */
 const tabMessageBoxState = require('../../../../../app/common/state/tabMessageBoxState')
 const tabState = require('../../../../../app/common/state/tabState')
+const {makeImmutable} = require('../../../../../app/common/state/immutableUtil')
 const sinon = require('sinon')
 const Immutable = require('immutable')
 const assert = require('assert')
@@ -17,8 +18,8 @@ const exampleMessageBox = Immutable.fromJS({
   message: 'example message',
   title: 'example title',
   buttons: ['OK'],
-  suppress: false,
-  showSuppress: false
+  suppress: true,
+  showSuppress: true
 })
 
 const defaultTabId = 1
@@ -179,4 +180,66 @@ describe('tabMessageBoxState unit tests', function () {
       })
     })
   })
+
+  describe('getSuppress', function () {
+    it('when data exists', function () {
+      const appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const suppress = tabMessageBoxState.getSuppress(appState, defaultTabId)
+      assert.equal(suppress, defaultTab.getIn(['messageBoxDetail', 'suppress']))
+    })
+
+    it('when tab is missing', function () {
+      const suppress = tabMessageBoxState.getSuppress(defaultAppState, defaultTabId)
+      assert.equal(suppress, false)
+    })
+
+    it('when data is missing', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      appState = appState.deleteIn(['tabs', 0, 'messageBoxDetail', 'suppress'])
+      const suppress = tabMessageBoxState.getSuppress(appState, defaultTabId)
+      assert.equal(suppress, false)
+    })
+  })
+
+  describe('getTitle', function () {
+    it('when data exists', function () {
+      const appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const title = tabMessageBoxState.getTitle(appState, defaultTabId)
+      assert.equal(title, defaultTab.getIn(['messageBoxDetail', 'title']))
+    })
+
+    it('when tab is missing', function () {
+      const title = tabMessageBoxState.getTitle(defaultAppState, defaultTabId)
+      assert.equal(title, '')
+    })
+
+    it('when data is missing', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      appState = appState.deleteIn(['tabs', 0, 'messageBoxDetail', 'title'])
+      const title = tabMessageBoxState.getTitle(appState, defaultTabId)
+      assert.equal(title, '')
+    })
+  })
+
+  describe('getButtons', function () {
+    let defaultValue = makeImmutable(['ok'])
+
+    it('when data exists', function () {
+      const appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const buttons = tabMessageBoxState.getButtons(appState, defaultTabId)
+      assert.equal(buttons, defaultTab.getIn(['messageBoxDetail', 'buttons']))
+    })
+
+    it('when tab is missing', function () {
+      const buttons = tabMessageBoxState.getButtons(defaultAppState, defaultTabId)
+      assert.deepEqual(buttons, defaultValue)
+    })
+
+    it('when data is missing', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      appState = appState.deleteIn(['tabs', 0, 'messageBoxDetail', 'buttons'])
+      const buttons = tabMessageBoxState.getButtons(appState, defaultTabId)
+      assert.deepEqual(buttons, defaultValue)
+    })
+  })
 })