Removes state from Window component

app/renderer/components/window.js

@@ -2,74 +2,23 @@
  * 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/. */
 
-// Controller view which manages the top level immutable state for the app
-
 const React = require('react')
-const PropTypes = require('prop-types')
-const Immutable = require('immutable')
 
 // Components
 const Main = require('./main/main')
-
-// Stores
-const windowStore = require('../../../js/stores/windowStore')
-const appStoreRenderer = require('../../../js/stores/appStoreRenderer')
+const ReduxComponent = require('./reduxComponent')
 
 // Actions
-const windowActions = require('../../../js/actions/windowActions')
 const appActions = require('../../../js/actions/appActions')
 
 // Utils
 const cx = require('../../../js/lib/classSet')
 const {getPlatformStyles} = require('../../common/lib/platformUtil')
-const {getCurrentWindowId} = require('../currentWindow')
 
 window.appActions = appActions
 
 class Window extends React.Component {
-  constructor (props) {
-    super(props)
-    // initialize appState from props
-    // and then listen for updates
-    this.appState = appStoreRenderer.state
-    this.windowState = Immutable.fromJS(this.props.initWindowState) || windowStore.getState()
-    this.state = {
-      immutableData: {
-        windowState: this.windowState,
-        appState: this.appState
-      }
-    }
-    if (this.props.initWindowState) {
-      windowActions.setState(this.windowState)
-    }
-
-    this.onChange = this.onChange.bind(this)
-    this.onAppStateChange = this.onAppStateChange.bind(this)
-    windowStore.addChangeListener(this.onChange)
-    appStoreRenderer.addChangeListener(this.onAppStateChange)
-  }
-
-  componentWillMount () {
-    const activeFrameKey = this.state.immutableData.windowState.get('activeFrameKey')
-    this.props.frames.forEach((frame, i) => {
-      if (frame.guestInstanceId) {
-        appActions.newWebContentsAdded(getCurrentWindowId(), frame)
-      } else {
-        appActions.createTabRequested({
-          url: frame.location || frame.src || frame.provisionalLocation,
-          partitionNumber: frame.partitionNumber,
-          isPrivate: frame.isPrivate,
-          active: activeFrameKey ? frame.key === activeFrameKey : true,
-          discarded: frame.unloaded,
-          title: frame.title,
-          faviconUrl: frame.icon,
-          index: i
-        }, false, true /* isRestore */)
-      }
-    })
-  }
-
-  render () {
+  get classes () {
     let classes = {}
     classes['windowContainer'] = true
 
@@ -82,52 +31,26 @@ class Window extends React.Component {
     // For Windows 10, this defaults to blue. When window
     // becomes inactive it needs to change to gray.
     if (classes['win10']) {
-      classes['inactive'] = !this.windowState.getIn(['ui', 'isFocused'])
+      classes['inactive'] = !this.props.isFocused
     }
 
-    return <div id='windowContainer' className={cx(classes)} >
-      <Main />
-    </div>
-  }
-
-  componentDidMount () {
-    appActions.windowReady(getCurrentWindowId())
+    return classes
   }
 
-  componentWillUnmount () {
-    windowStore.removeChangeListener(this.onChange)
-    appStoreRenderer.removeChangeListener(this.onAppStateChange)
-  }
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return nextState.immutableData !== this.state.immutableData
-  }
+    const props = {}
+    props.isFocused = currentWindow.getIn(['ui', 'isFocused'])
 
-  onChange () {
-    setImmediate(() => {
-      this.windowState = windowStore.getState()
-      this.setState({
-        immutableData: {
-          windowState: this.windowState,
-          appState: this.appState
-        }
-      })
-    })
+    return props
   }
 
-  onAppStateChange () {
-    setImmediate(() => {
-      this.appState = appStoreRenderer.state
-      this.setState({
-        immutableData: {
-          windowState: this.windowState,
-          appState: this.appState
-        }
-      })
-    })
+  render () {
+    return <div id='windowContainer' className={cx(this.classes)} >
+      <Main />
+    </div>
   }
 }
 
-Window.propTypes = { appState: PropTypes.object, frames: PropTypes.array, initWindowState: PropTypes.object }
-
-module.exports = Window
+module.exports = ReduxComponent.connect(Window)

js/entry.js

@@ -19,17 +19,27 @@ require('../node_modules/font-awesome/css/font-awesome.css')
 
 const React = require('react')
 const ReactDOM = require('react-dom')
-const Window = require('../app/renderer/components/window')
+const Immutable = require('immutable')
+const patch = require('immutablepatch')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const webFrame = electron.webFrame
+
+// Components
+const Window = require('../app/renderer/components/window')
+
+// Store
 const windowStore = require('./stores/windowStore')
 const appStoreRenderer = require('./stores/appStoreRenderer')
+
+// Actions
 const windowActions = require('./actions/windowActions')
 const appActions = require('./actions/appActions')
+
+// Constants
 const messages = require('./constants/messages')
-const Immutable = require('immutable')
-const patch = require('immutablepatch')
+
+// Utils
 const l10n = require('./l10n')
 const currentWindow = require('../app/renderer/currentWindow')
 
@@ -64,10 +74,34 @@ window.addEventListener('beforeunload', function (e) {
   ipc.send(messages.LAST_WINDOW_STATE, windowStore.getState().toJS())
 })
 
-ipc.on(messages.INITIALIZE_WINDOW, (e, windowValue, appState, frames, initWindowState) => {
+ipc.on(messages.INITIALIZE_WINDOW, (e, windowValue, appState, frames, windowState) => {
   currentWindow.setWindowId(windowValue.id)
+  const newState = Immutable.fromJS(windowState) || windowStore.getState()
+
   appStoreRenderer.state = Immutable.fromJS(appState)
-  ReactDOM.render(
-    <Window frames={frames} initWindowState={initWindowState} />,
-    document.getElementById('appContainer'))
+  windowStore.state = newState
+  generateTabs(newState, frames, windowValue.id)
+  appActions.windowReady(windowValue.id)
+  ReactDOM.render(<Window />, document.getElementById('appContainer'))
 })
+
+const generateTabs = (windowState, frames, windowId) => {
+  const activeFrameKey = windowState.get('activeFrameKey')
+
+  frames.forEach((frame, i) => {
+    if (frame.guestInstanceId) {
+      appActions.newWebContentsAdded(windowId, frame)
+    } else {
+      appActions.createTabRequested({
+        url: frame.location || frame.src || frame.provisionalLocation,
+        partitionNumber: frame.partitionNumber,
+        isPrivate: frame.isPrivate,
+        active: activeFrameKey ? frame.key === activeFrameKey : true,
+        discarded: frame.unloaded,
+        title: frame.title,
+        faviconUrl: frame.icon,
+        index: i
+      }, false, true /* isRestore */)
+    }
+  })
+}