Refactors TabPage and TabPages into redux

Resolves brave#9339

Auditors: @bsclifton @bridiver

Test Plan:
- try to open enaugh tabs to trigger tab page (default is 20)
- see if audio indicator is displayed if you have video playing in tab page
- check if you can close tab page

app/renderer/components/main/main.js

@@ -849,10 +849,7 @@ class Main extends ImmutableComponent {
           onContextMenu={this.onTabContextMenu}>
           {
             nonPinnedFrames.size > tabsPerPage
-            ? <TabPages frames={nonPinnedFrames}
-              tabsPerTabPage={tabsPerPage}
-              previewTabPage={getSetting(settings.SHOW_TAB_PREVIEWS)}
-              tabPageIndex={this.props.windowState.getIn(['ui', 'tabs', 'tabPageIndex'])} />
+            ? <TabPages />
             : null
           }
         </div>

app/renderer/components/tabs/tabPage.js

@@ -3,38 +3,44 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const Immutable = require('immutable')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
 const windowActions = require('../../../../js/actions/windowActions')
 
 // Constants
 const dragTypes = require('../../../../js/constants/dragTypes')
+const settings = require('../../../../js/constants/settings')
 
 // Utils
+const {getSetting} = require('../../../../js/settings')
 const cx = require('../../../../js/lib/classSet')
 const {onTabPageContextMenu} = require('../../../../js/contextMenus')
 const {getCurrentWindowId} = require('../../currentWindow')
 const dndData = require('../../../../js/dndData')
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+const dnd = require('../../../../js/dnd')
 
-class TabPage extends ImmutableComponent {
-  constructor () {
-    super()
+class TabPage extends React.Component {
+  constructor (props) {
+    super(props)
     this.onMouseEnter = this.onMouseEnter.bind(this)
     this.onMouseLeave = this.onMouseLeave.bind(this)
   }
+
   onMouseLeave () {
     window.clearTimeout(this.hoverTimeout)
     windowActions.setPreviewTabPageIndex()
   }
 
   onMouseEnter (e) {
-    // relatedTarget inside mouseenter checks which element before this event was the pointer on
+    // relatedTarget inside mouse enter checks which element before this event was the pointer on
     // if this element has a tab-like class, then it's likely that the user was previewing
-    // a sequency of tabs. Called here as previewMode.
+    // a sequence of tabs. Called here as previewMode.
     const previewMode = /tab(?!pages)/i.test(e.relatedTarget.classList)
 
     // If user isn't in previewMode, we add a bit of delay to avoid tab from flashing out
@@ -44,21 +50,20 @@ class TabPage extends ImmutableComponent {
   }
 
   onDrop (e) {
-    if (this.props.tabPageFrames.size === 0) {
+    if (this.props.isPageEmpty) {
       return
     }
 
     appActions.dataDropped(getCurrentWindowId())
 
-    const moveToFrame = this.props.tabPageFrames.get(0)
     const sourceDragData = dndData.getDragData(e.dataTransfer, dragTypes.TAB)
     const sourceDragFromPageIndex = this.props.sourceDragFromPageIndex
     // This must be executed async because the state change that this causes
     // will cause the onDragEnd to never run
     setTimeout(() => {
       // If we're moving to a right page, then we're already shifting everything to the left by one, so we want
       // to drop it on the right.
-      windowActions.moveTab(sourceDragData.get('key'), moveToFrame.get('key'),
+      windowActions.moveTab(sourceDragData.get('key'), this.props.moveToFrameKey,
         // Has -1 value for pinned tabs
         sourceDragFromPageIndex === -1 ||
         sourceDragFromPageIndex >= this.props.index)
@@ -73,22 +78,55 @@ class TabPage extends ImmutableComponent {
     e.preventDefault()
   }
 
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const frames = frameStateUtil.getNonPinnedFrames(currentWindow) || Immutable.List()
+    const tabsPerPage = Number(getSetting(settings.TABS_PER_PAGE))
+    const tabPageFrames = frames.slice(ownProps.index * tabsPerPage, (ownProps.index * tabsPerPage) + tabsPerPage)
+    const isAudioPlaybackActive = tabPageFrames.find((frame) =>
+    frame.get('audioPlaybackActive') && !frame.get('audioMuted'))
+
+    let sourceDragFromPageIndex
+    const sourceDragData = dnd.getInterBraveDragData()
+    if (sourceDragData) {
+      sourceDragFromPageIndex = frames.findIndex((frame) => frame.get('key') === sourceDragData.get('key'))
+
+      if (sourceDragFromPageIndex !== -1) {
+        sourceDragFromPageIndex /= tabsPerPage
+      }
+    }
+
+    const props = {}
+    // used in renderer
+    props.index = ownProps.index
+    props.tabPageFrames = tabPageFrames // TODO (nejc) only primitives
+    props.isAudioPlaybackActive = isAudioPlaybackActive
+    props.previewTabPage = getSetting(settings.SHOW_TAB_PREVIEWS)
+    props.active = currentWindow.getIn(['ui', 'tabs', 'tabPageIndex']) === props.index
+
+    // used in other functions
+    props.sourceDragFromPageIndex = sourceDragFromPageIndex
+    props.isPageEmpty = tabPageFrames.size === 0
+    props.moveToFrameKey = tabPageFrames.getIn([0, 'key'])
+
+    return props
+  }
+
   render () {
-    const audioPlaybackActive = this.props.tabPageFrames.find((frame) =>
-      frame.get('audioPlaybackActive') && !frame.get('audioMuted'))
-    return <span data-tab-page={this.props.index}
+    return <span
+      data-tab-page={this.props.index}
       onDragOver={this.onDragOver.bind(this)}
       onMouseEnter={this.props.previewTabPage ? this.onMouseEnter : null}
       onMouseLeave={this.props.previewTabPage ? this.onMouseLeave : null}
       onDrop={this.onDrop.bind(this)}
       className={cx({
         tabPage: true,
-        audioPlaybackActive,
+        audioPlaybackActive: this.props.isAudioPlaybackActive,
         active: this.props.active})}
       onContextMenu={onTabPageContextMenu.bind(this, this.props.tabPageFrames)}
       onClick={windowActions.setTabPageIndex.bind(this, this.props.index)
       } />
   }
 }
 
-module.exports = TabPage
+module.exports = ReduxComponent.connect(TabPage)

app/renderer/components/tabs/tabPages.js

@@ -3,39 +3,43 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const Immutable = require('immutable')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const TabPage = require('./tabPage')
 
+ // Constants
+const settings = require('../../../../js/constants/settings')
+
 // Utils
-const dnd = require('../../../../js/dnd')
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+const {getSetting} = require('../../../../js/settings')
+
+class TabPages extends React.Component {
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const frames = frameStateUtil.getNonPinnedFrames(currentWindow) || Immutable.List()
+    const tabsPerPage = Number(getSetting(settings.TABS_PER_PAGE))
+
+    const props = {}
+    props.tabPageCount = Math.ceil(frames.size / tabsPerPage)
+
+    return props
+  }
 
-class TabPages extends ImmutableComponent {
   render () {
-    const tabPageCount = Math.ceil(this.props.frames.size / this.props.tabsPerTabPage)
-    let sourceDragFromPageIndex
-    const sourceDragData = dnd.getInterBraveDragData()
-    if (sourceDragData) {
-      sourceDragFromPageIndex = this.props.frames.findIndex((frame) => frame.get('key') === sourceDragData.get('key'))
-      if (sourceDragFromPageIndex !== -1) {
-        sourceDragFromPageIndex /= this.props.tabsPerTabPage
-      }
-    }
     return <div className='tabPageWrap'>
       {
-        tabPageCount > 1 &&
-        Array.from(new Array(tabPageCount)).map((x, i) =>
+        this.props.tabPageCount > 1 &&
+        Array.from(new Array(this.props.tabPageCount)).map((x, i) =>
           <TabPage
             key={`tabPage-${i}`}
-            tabPageFrames={this.props.frames.slice(i * this.props.tabsPerTabPage, (i * this.props.tabsPerTabPage) + this.props.tabsPerTabPage)}
-            previewTabPage={this.props.previewTabPage}
-            index={i}
-            sourceDragFromPageIndex={sourceDragFromPageIndex}
-            active={this.props.tabPageIndex === i} />)
+            index={i} />
+        )
       }
     </div>
   }
 }
 
-module.exports = TabPages
+module.exports = ReduxComponent.connect(TabPages)