Merge pull request #79 from brave/split_app_and_window

create appStore for global state

docs/state.md

@@ -5,6 +5,27 @@ Child components should not modify top level state directly, instead they should
 
 # Hierarchy
 
+AppStore
+
+```javascript
+{
+  sites: [{
+    location: string,
+    title: string,
+    tags: [string], // empty, 'bookmark', 'pinned', or 'reader'
+    lastAccessed: datetime,
+  }],
+  visits: [{
+    location: string,
+    startTime: datetime
+    endTime: datetime
+  }],
+  updateAvailable: false,
+}
+```
+
+WindowStore
+
 ```javascript
 {
   activeFrameKey: number,
@@ -52,17 +73,6 @@ Child components should not modify top level state directly, instead they should
       autocompleteURL: string, // ditto re: {searchTerms}
     }
   }],
-  sites: [{
-    location: string,
-    title: string,
-    tags: [string], // empty, 'bookmark', 'pinned', or 'reader'
-    lastAccessed: datetime,
-  }],
-  visits: [{
-    location: string,
-    startTime: datetime
-    endTime: datetime
-  }],
   closedFrames: [], // holds the same type of frame objects as above
   ui: {
     tabs: {

js/components/main.js

@@ -105,7 +105,7 @@ class Main extends ImmutableComponent {
         <NavigationBar
           navbar={activeFrame && activeFrame.get('navbar')}
           frames={this.props.browser.get('frames')}
-          sites={this.props.browser.get('sites')}
+          sites={this.props.app.get('sites')}
           activeFrame={activeFrame}
           searchSuggestions={activeFrame && activeFrame.getIn(['navbar', 'searchSuggestions'])}
           searchDetail={activeFrame && activeFrame.get('searchDetail')}
@@ -119,7 +119,7 @@ class Main extends ImmutableComponent {
           key='tab-bar'
           activeFrame={activeFrame}
         />
-      {this.props.browser.get('updateAvailable') ? <UpdateBar/> : null}
+      {this.props.app.get('updateAvailable') ? <UpdateBar/> : null}
       </div>
       <div className='mainContainer'
         onFocus={this.onMainFocus.bind(this)}>

js/components/window.js

@@ -7,20 +7,25 @@
 const React = require('react')
 const Immutable = require('immutable')
 const WindowStore = require('../stores/windowStore')
+const AppStore = require('../stores/AppStore')
 const Main = require('./main')
 
 class Window extends React.Component {
   constructor () {
     super()
     this.state = {
-      immutableData: WindowStore.getState()
+      immutableData: {
+        windowState: WindowStore.getState(),
+        appState: AppStore.getState()
+      }
     }
     WindowStore.addChangeListener(this.onChange.bind(this))
+    AppStore.addChangeListener(this.onChange.bind(this))
   }
 
   render () {
     return <div id='windowContainer'>
-      <Main browser={this.state.immutableData}/>
+      <Main browser={this.state.immutableData.windowState} app={this.state.immutableData.appState} />
     </div>
   }
 
@@ -34,9 +39,13 @@ class Window extends React.Component {
 
   onChange () {
     this.setState({
-      immutableData: WindowStore.getState()
+      immutableData: {
+        windowState: WindowStore.getState(),
+        appState: AppStore.getState()
+      }
     })
   }
+
 }
 
 module.exports = Window

js/constants/appConstants.js

@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 mapValuesByKeys = require('../lib/functional').mapValuesByKeys
+
+const _ = null
+const AppConstants = {
+  APP_ADD_SITE: _,
+  APP_REMOVE_SITE: _
+}
+
+module.exports = mapValuesByKeys(AppConstants)

js/constants/windowConstants.js

@@ -34,8 +34,6 @@ const windowConstants = {
   APP_SET_ACTIVE_FRAME_SHORTCUT: _,
   APP_SET_URL_BAR_AUTOSELECTED: _,
   APP_SET_SEARCH_DETAIL: _,
-  APP_ADD_SITE: _,
-  APP_REMOVE_SITE: _,
   APP_SET_AUDIO_MUTED: _,
   APP_SET_AUDIO_PLAYBACK_ACTIVE: _
 }

js/dispatcher/appDispatcher.js

@@ -0,0 +1,8 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+var Dispatcher = require('./dispatcher')
+
+const appDispatcher = new Dispatcher()
+module.exports = appDispatcher

js/stores/appStore.js

@@ -0,0 +1,67 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 AppDispatcher = require('../dispatcher/appDispatcher')
+const EventEmitter = require('events').EventEmitter
+const AppConstants = require('../constants/appConstants')
+const Immutable = require('immutable')
+const SiteUtil = require('../state/siteUtil')
+const ipc = global.require('electron').ipcRenderer
+const messages = require('../constants/messages')
+
+// For this simple example, store immutable data object for a simple counter.
+// This is of course very silly, but this is just for an app template with top
+// level immutable data.
+let appState = Immutable.fromJS({
+  sites: [],
+  visits: [],
+  updateAvailable: false
+})
+
+var CHANGE_EVENT = 'change'
+
+class AppStore extends EventEmitter {
+  getState () {
+    return appState
+  }
+
+  emitChange () {
+    this.emit(CHANGE_EVENT)
+  }
+
+  addChangeListener (callback) {
+    this.on(CHANGE_EVENT, callback)
+  }
+
+  removeChangeListener (callback) {
+    this.removeListener(CHANGE_EVENT, callback)
+  }
+}
+
+const appStore = new AppStore()
+
+// Register callback to handle all updates
+AppDispatcher.register((action) => {
+  switch (action.actionType) {
+    case AppConstants.APP_ADD_SITE:
+      appState = appState.set('sites', SiteUtil.addSite(appState.get('sites'), action.frameProps, action.tag))
+      appStore.emitChange()
+      break
+    case AppConstants.APP_REMOVE_SITE:
+      appState = appState.set('sites', SiteUtil.removeSite(appState.get('sites'), action.frameProps, action.tag))
+      appStore.emitChange()
+      break
+    default:
+  }
+})
+
+ipc.on(messages.UPDATE_AVAILABLE, () => {
+  console.log('appStore update-available')
+  appState = appState.merge({
+    updateAvailable: true
+  })
+  appStore.emitChange()
+})
+
+module.exports = appStore

js/stores/windowStore.js

@@ -7,7 +7,6 @@ const EventEmitter = require('events').EventEmitter
 const WindowConstants = require('../constants/windowConstants')
 const Immutable = require('immutable')
 const FrameStateUtil = require('../state/frameStateUtil')
-const SiteUtil = require('../state/siteUtil')
 const ipc = global.require('electron').ipcRenderer
 const messages = require('../constants/messages')
 
@@ -18,14 +17,12 @@ let windowState = Immutable.fromJS({
   activeFrameKey: null,
   frames: [],
   closedFrames: [],
-  sites: [],
-  searchDetail: null,
-  updateAvailable: false,
   ui: {
     tabs: {
       activeDraggedTab: null
     }
-  }
+  },
+  searchDetail: null
 })
 
 var CHANGE_EVENT = 'change'
@@ -275,14 +272,6 @@ WindowDispatcher.register((action) => {
         searchDetail: action.searchDetail
       })
       break
-    case WindowConstants.APP_ADD_SITE:
-      windowState = windowState.set('sites', SiteUtil.addSite(windowState.get('sites'), action.frameProps, action.tag))
-      windowStore.emitChange()
-      break
-    case WindowConstants.APP_REMOVE_SITE:
-      windowState = windowState.set('sites', SiteUtil.removeSite(windowState.get('sites'), action.frameProps, action.tag))
-      windowStore.emitChange()
-      break
     case WindowConstants.APP_SET_AUDIO_MUTED:
       windowState = windowState.setIn(['frames', FrameStateUtil.getFramePropsIndex(windowState.get('frames'), action.frameProps), 'audioMuted'], action.muted)
       windowStore.emitChange()
@@ -295,14 +284,6 @@ WindowDispatcher.register((action) => {
   }
 })
 
-ipc.on(messages.UPDATE_AVAILABLE, () => {
-  console.log('windowStore update-available')
-  windowState = windowState.merge({
-    updateAvailable: true
-  })
-  windowStore.emitChange()
-})
-
 ipc.on(messages.SHORTCUT_NEXT_TAB, () => {
   windowState = FrameStateUtil.makeNextFrameActive(windowState)
   updateTabPageIndex(FrameStateUtil.getActiveFrame(windowState))