Converts FindBar into redux component

Resolves brave#9338 Auditors: @bsclifton @bridiver Test Plan:
NejcZdovc · Jun 13, 2017 · f0d3331 · f0d3331
1 parent 7ce06ee
commit f0d3331
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 33 deletions.
diff --git a/app/renderer/components/main/findbar.js b/app/renderer/components/main/findbar.js
@@ -6,26 +6,31 @@ const React = require('react')
 const Immutable = require('immutable')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 
 // Constants
 const keyCodes = require('../../../common/constants/keyCodes')
+const settings = require('../../../../js/constants/settings')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
+const webviewActions = require('../../../../js/actions/webviewActions')
 
 // Stores
 const windowStore = require('../../../../js/stores/windowStore')
 
 // Utils
 const contextMenus = require('../../../../js/contextMenus')
 const {getTextColorForBackground} = require('../../../../js/lib/color')
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+const {getSetting} = require('../../../../js/settings')
 
+// Styles
 const globalStyles = require('../styles/global')
 
-class FindBar extends ImmutableComponent {
+class FindBar extends React.Component {
   constructor () {
     super()
     this.onBlur = this.onBlur.bind(this)
@@ -37,7 +42,6 @@ class FindBar extends ImmutableComponent {
     this.onFindPrev = this.onFindPrev.bind(this)
     this.onFindNext = this.onFindNext.bind(this)
     this.onCaseSensitivityChange = this.onCaseSensitivityChange.bind(this)
-    this.didFrameChange = true
   }
 
   get frame () {
@@ -59,15 +63,15 @@ class FindBar extends ImmutableComponent {
   }
 
   onFindFirst () {
-    this.props.onFind(this.searchString, this.isCaseSensitive, true, false)
+    this.onFind(this.searchString, this.isCaseSensitive, true, false)
   }
 
   onFindNext () {
-    this.props.onFind(this.searchString, this.isCaseSensitive, true, this.props.findDetail.get('internalFindStatePresent'))
+    this.onFind(this.searchString, this.isCaseSensitive, true, this.props.findDetail.get('internalFindStatePresent'))
   }
 
   onFindPrev () {
-    this.props.onFind(this.searchString, this.isCaseSensitive, false, this.props.findDetail.get('internalFindStatePresent'))
+    this.onFind(this.searchString, this.isCaseSensitive, false, this.props.findDetail.get('internalFindStatePresent'))
   }
 
   onContextMenu (e) {
@@ -123,7 +127,7 @@ class FindBar extends ImmutableComponent {
     switch (e.keyCode) {
       case keyCodes.ESC:
         e.preventDefault()
-        this.props.onFindHide()
+        this.onFindHide()
         break
       case keyCodes.ENTER:
         e.preventDefault()
@@ -153,6 +157,21 @@ class FindBar extends ImmutableComponent {
     this.focus()
   }
 
+  onFindHide () {
+    const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
+    frameStateUtil.onFindBarHide(activeFrame.get('key'))
+  }
+
+  onFind (searchString, caseSensitivity, forward, findNext) {
+    const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
+    webviewActions.findInPage(searchString, caseSensitivity, forward, findNext)
+    if (!findNext) {
+      windowActions.setFindDetail(activeFrame.get('key'), Immutable.fromJS({
+        internalFindStatePresent: true
+      }))
+    }
+  }
+
   get numberOfMatches () {
     if (!this.props.findDetail || this.props.findDetail.get('numberOfMatches') === undefined) {
       return -1
@@ -189,6 +208,23 @@ class FindBar extends ImmutableComponent {
     return getTextColorForBackground(this.backgroundColor)
   }
 
+  mergeProps (state, ownProps) {
+    const props = {}
+    // used in renderer
+    props.paintTabs = getSetting(settings.PAINT_TABS)
+
+    /*
+
+    themeColor={activeFrame.get('themeColor')}
+    computedThemeColor={activeFrame.get('computedThemeColor')}
+    frameKey={activeFrame.get('key')}
+    selected={activeFrame.get('findbarSelected')}
+    findDetail={activeFrame.get('findDetail')}
+    */
+
+    return props
+  }
+
   render () {
     let findMatchText
     if (this.numberOfMatches !== -1 && this.activeMatchOrdinal !== -1 && this.searchString) {
@@ -260,9 +296,9 @@ class FindBar extends ImmutableComponent {
       </div>
       <span className='closeButton'
         style={findBarTextStyle}
-        onClick={this.props.onFindHide}>+</span>
+        onClick={this.onFindHide}>+</span>
     </div>
   }
 }
 
-module.exports = FindBar
+module.exports = ReduxComponent.connect(FindBar)
diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
@@ -625,21 +625,6 @@ class Main extends ImmutableComponent {
     windowActions.setUrlBarActive(false)
   }
 
-  onFindHide () {
-    const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
-    frameStateUtil.onFindBarHide(activeFrame.get('key'))
-  }
-
-  onFind (searchString, caseSensitivity, forward, findNext) {
-    const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
-    webviewActions.findInPage(searchString, caseSensitivity, forward, findNext)
-    if (!findNext) {
-      windowActions.setFindDetail(activeFrame.get('key'), Immutable.fromJS({
-        internalFindStatePresent: true
-      }))
-    }
-  }
-
   onTabContextMenu (e) {
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
     contextMenus.onTabsToolbarContextMenu(activeFrame.get('title'), activeFrame.get('location'), undefined, undefined, e)
@@ -865,15 +850,7 @@ class Main extends ImmutableComponent {
 
         {
           activeFrame && activeFrame.get('findbarShown') && !activeFrame.get('isFullScreen')
-          ? <FindBar
-            paintTabs={getSetting(settings.PAINT_TABS)}
-            themeColor={activeFrame.get('themeColor')}
-            computedThemeColor={activeFrame.get('computedThemeColor')}
-            frameKey={activeFrame.get('key')}
-            selected={activeFrame.get('findbarSelected')}
-            findDetail={activeFrame.get('findDetail')}
-            onFind={this.onFind}
-            onFindHide={this.onFindHide} />
+          ? <FindBar />
           : null
         }
       </div>