
let r = require('r-dom')
let ShallowComponent = require('./shallow-component')

let LoginPage = require('./login-page')
let LibraryPage = require('./library-page')

let AppStore = require('../stores/app-store')
let AppActions = require('../actions/app-actions')
let defer = require('../util/defer')

function get_state () {
  return {state: AppStore.get_state()}
}

/**
 * Top-level component in the app, decides which page to show
 * Also, subscribes to app store to synchronize its state
 */
class Layout extends ShallowComponent {
  constructor () {
    super()
    this.state = get_state()
  }

  componentDidMount () {
    super.componentDidMount()
    AppStore.add_change_listener('layout', () => {
      defer(() => { this.setState(get_state()) })
    })
  }

  componentWillUnmount () {
    super.componentWillUnmount()
    AppStore.remove_change_listener('layout')
    AppActions.implode_app()
  }

  render () {
    let state = this.state.state

    switch (state.page) {
      case 'login':
      case 'setup':
        return r(LoginPage, {state})
      case 'library':
        return r(LibraryPage, {state})
      default:
        return r.div()
    }
  }
}

Layout.propTypes = {}

module.exports = Layout

@@ -259,45 +259,8 @@
 ns')
-%0Alet defer = require('../util/defer')
 %0A%0Afu
@@ -655,16 +655,21 @@
 yout', (
+state
 ) =%3E %7B%0A 
@@ -676,22 +676,8 @@
     
- defer(() =%3E %7B
  thi
@@ -691,21 +691,14 @@
 ate(
-get_
+%7B
 state
-()) 
 %7D)%0A 

Simplify state changes in layout component