React: clean up App component
This commit is contained in:
@@ -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} />)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user