fazo96/ipfs-boards
1
0
Fork 0
mirror of https://github.com/fazo96/ipfs-boards synced 2025-01-24 14:44:19 +01:00
Code Issues Releases Wiki Activity

modularize loading, error and saving components

Browse Source
This commit is contained in:
Enrico Fasoli 2015-12-17 15:29:19 +01:00
parent 4f574dbdfc
commit a5f7d9fc14
3 changed files with 63 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
webapp/components/status-components.jsx Normal file
View File

@ -0,0 +1,41 @@
var React = require('react')
var Icon = require('icon.jsx')
var Error = React.createClass({
render () {
return <div>
<div className="text-center">
<Icon className="center-block fa-3x light" name="ban" />
<h4 className="top-half-em">Ooops</h4>
<p>{'' + this.props.error || 'Something went wrong'}</p>
{ this.props.children }
</div>
</div>
}
})
var Loading = React.createClass({
render () {
return <div>
<div className="text-center">
<Icon className="center-block fa-spin fa-3x light" name="refresh" />
<h4 className="top-half-em">{this.props.title}</h4>
{ this.props.children }
</div>
</div>
}
})
var Saving = React.createClass({
render () {
return <div>
<div className="text-center">
<Icon className="center-block fa-spin fa-3x light" name="refresh" />
<h4 className="top-half-em">Publishing...</h4>
{ this.props.children }
</div>
</div>
}
})
module.exports = { Error, Loading, Saving }

34
webapp/pages/board-editor.jsx
View File

@ -2,6 +2,7 @@ var React = require('react')
var GetIPFS = require('getipfs.jsx')
var Icon = require('icon.jsx')
var Link = require('react-router').Link
var { Error, Loading, Saving } = require('status-components.jsx')
module.exports = function (boardsAPI) {
return React.createClass({
@ -81,31 +82,18 @@ module.exports = function (boardsAPI) {
render () {
if (this.state.api) {
if (this.state.error) {
return <div>
<div className="text-center">
<Icon className="center-block fa-3x light" name="ban" />
<h4 className="top-half-em">Ooops</h4>
<p>{'' + this.state.error}</p>
<button className="button button-primary center-block" onClick={this.skip}>Continue</button>
</div>
</div>
return <Error error={this.state.error} >
<button className="button button-primary center-block" onClick={this.skip}>Continue</button>
</Error>
} else if (this.state.loading) {
return <div>
<div className="text-center">
<Icon className="center-block fa-spin fa-3x light" name="refresh" />
<h4 className="top-half-em">Fetching your current Board Settings...</h4>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
</div>
</div>
return <Loading title="Fetching your current Board Settings...">
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
</Loading>
} else if (this.state.updating) {
return <div>
<div className="text-center">
<Icon className="center-block fa-spin fa-3x light" name="refresh" />
<h4 className="top-half-em">Publishing...</h4>
<p>Pressing the Skip button will not abort the publish operation.</p>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
</div>
</div>
return <Saving>
<p>Pressing the Skip button will not abort the publish operation.</p>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
</Saving>
} else {
return (
<div className="editor">

34
webapp/pages/profile-editor.jsx
View File

@ -2,6 +2,7 @@ var React = require('react')
var GetIPFS = require('getipfs.jsx')
var Icon = require('icon.jsx')
var Link = require('react-router').Link
var { Error, Loading, Saving } = require('status-components.jsx')
module.exports = function (boardsAPI) {
return React.createClass({
@ -67,31 +68,18 @@ module.exports = function (boardsAPI) {
render () {
if (this.state.api) {
if (this.state.error) {
return <div>
<div className="text-center">
<Icon className="center-block fa-3x light" name="ban" />
<h4 className="top-half-em">Ooops</h4>
<p>{'' + this.state.error}</p>
<button className="button button-primary center-block" onClick={this.skip}>Continue</button>
</div>
</div>
return <Error error={this.state.error} >
<button className="button button-primary center-block" onClick={this.skip}>Continue</button>
</Error>
} else if (this.state.loading) {
return <div>
<div className="text-center">
<Icon className="center-block fa-spin fa-3x light" name="refresh" />
<h4 className="top-half-em">Fetching your current profile...</h4>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
</div>
</div>
return <Loading title="Fetching your current Profile...">
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
</Loading>
} else if (this.state.updating) {
return <div>
<div className="text-center">
<Icon className="center-block fa-spin fa-3x light" name="refresh" />
<h4 className="top-half-em">Publishing...</h4>
<p>Pressing the Skip button will not abort the publish operation.</p>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
</div>
</div>
return <Saving>
<p>Pressing the Skip button will not abort the publish operation.</p>
<button className="button button-primary center-block" onClick={this.skip}>Skip</button>
</Saving>
} else {
return (
<div className="editor">