React: clean up App component

This commit is contained in:
DC
2016-07-22 21:55:27 -07:00
parent 734b0731a1
commit 9df51aec49

View File

@@ -49,47 +49,49 @@ module.exports = class App extends React.Component {
var vdom = ( var vdom = (
<div className={'app ' + cls.join(' ')}> <div className={'app ' + cls.join(' ')}>
<Header state={state} /> <Header state={state} />
{getErrorPopover(state)} {this.getErrorPopover()}
<div key='content' className='content'>{getView(state)}</div> <div key='content' className='content'>{this.getView()}</div>
{getModal(state)} {this.getModal()}
</div> </div>
) )
return vdom return vdom
} }
}
function getErrorPopover (state) { getErrorPopover () {
var now = new Date().getTime() var now = new Date().getTime()
var recentErrors = state.errors.filter((x) => now - x.time < 5000) var recentErrors = this.state.errors.filter((x) => now - x.time < 5000)
var hasErrors = recentErrors.length > 0 var hasErrors = recentErrors.length > 0
var errorElems = recentErrors.map(function (error, i) { var errorElems = recentErrors.map(function (error, i) {
return (<div key={i} className='error'>{error.message}</div>) return (<div key={i} className='error'>{error.message}</div>)
}) })
return ( return (
<div key='errors' <div key='errors'
className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}> className={'error-popover ' + (hasErrors ? 'visible' : 'hidden')}>
<div key='title' className='title'>Error</div> <div key='title' className='title'>Error</div>
{errorElems} {errorElems}
</div>
)
}
function getModal (state) {
if (!state.modal) return
var ModalContents = Modals[state.modal.id]
return (
<div key='modal' className='modal'>
<div key='modal-background' className='modal-background'></div>
<div key='modal-content' className='modal-content'>
<ModalContents state={state} />
</div> </div>
</div> )
) }
}
function getView (state) { getModal () {
var View = Views[state.location.url()] var state = this.state
return (<View state={state} />) if (!state.modal) return
var ModalContents = Modals[state.modal.id]
return (
<div key='modal' className='modal'>
<div key='modal-background' className='modal-background'></div>
<div key='modal-content' className='modal-content'>
<ModalContents state={state} />
</div>
</div>
)
}
getView () {
var state = this.state
var View = Views[state.location.url()]
return (<View state={state} />)
}
} }