mirror of https://github.com/kern/filepizza
checkpoint
Alex Kern
1 year ago
parent
def5707932
commit
9f1317496c
@ -1,37 +0,0 @@
|
||||
import React from 'react'
|
||||
import ErrorStore from '../stores/ErrorStore'
|
||||
import Spinner from './Spinner'
|
||||
|
||||
export default class ErrorPage extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.state = ErrorStore.getState()
|
||||
|
||||
this._onChange = () => {
|
||||
this.setState(ErrorStore.getState())
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
ErrorStore.listen(this._onChange)
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
ErrorStore.unlisten(this._onChange)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="page">
|
||||
<Spinner dir="up" />
|
||||
|
||||
<h1 className="with-subtitle">FilePizza</h1>
|
||||
<p className="subtitle">
|
||||
<strong>{this.state.status}:</strong> {this.state.message}
|
||||
</p>
|
||||
|
||||
{this.state.stack ? <pre>{this.state.stack}</pre> : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
|
||||
function formatProgress(dec) {
|
||||
return `${(dec * 100).toPrecision(3)}%`
|
||||
}
|
||||
|
||||
export default class ProgressBar extends React.Component {
|
||||
render() {
|
||||
const failed = this.props.value < 0
|
||||
const inProgress = this.props.value < 1 && this.props.value >= 0
|
||||
const classes = classnames('progress-bar', {
|
||||
'progress-bar-failed': failed,
|
||||
'progress-bar-in-progress': inProgress,
|
||||
'progress-bar-small': this.props.small,
|
||||
})
|
||||
|
||||
const formatted = formatProgress(this.props.value)
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
{failed ? (
|
||||
<div className="progress-bar-text">Failed</div>
|
||||
) : inProgress ? (
|
||||
<div className="progress-bar-inner" style={{ width: formatted }}>
|
||||
<div className="progress-bar-text">{formatted}</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="progress-bar-text">Delivered</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
ProgressBar.propTypes = {
|
||||
value: React.PropTypes.number.isRequired,
|
||||
small: React.PropTypes.bool,
|
||||
}
|
||||
|
||||
ProgressBar.defaultProps = {
|
||||
small: false,
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import { formatSize } from '../util'
|
||||
|
||||
export default class Spinner extends React.Component {
|
||||
render() {
|
||||
const classes = classnames('spinner', {
|
||||
'spinner-animated': this.props.animated,
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<img
|
||||
alt={this.props.name || this.props.dir}
|
||||
src={`/images/${this.props.dir}.png`}
|
||||
className="spinner-image"
|
||||
/>
|
||||
|
||||
{this.props.name === null ? null : (
|
||||
<div className="spinner-name">{this.props.name}</div>
|
||||
)}
|
||||
{this.props.size === null ? null : (
|
||||
<div className="spinner-size">{formatSize(this.props.size)}</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Spinner.propTypes = {
|
||||
dir: React.PropTypes.oneOf(['up', 'down']).isRequired,
|
||||
name: React.PropTypes.string,
|
||||
size: React.PropTypes.number,
|
||||
animated: React.PropTypes.bool,
|
||||
}
|
||||
|
||||
Spinner.defaultProps = {
|
||||
name: null,
|
||||
size: null,
|
||||
animated: false,
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
import React from 'react'
|
||||
import QRCode from 'react-qr'
|
||||
|
||||
export default class Tempalink extends React.Component {
|
||||
constructor() {
|
||||
super()
|
||||
this.onClick = this.onClick.bind(this)
|
||||
}
|
||||
|
||||
onClick(e) {
|
||||
e.target.setSelectionRange(0, 9999)
|
||||
}
|
||||
|
||||
render() {
|
||||
const url = `${window.location.origin}/${this.props.token}`
|
||||
const shortUrl = `${window.location.origin}/download/${this.props.shortToken}`
|
||||
|
||||
return (
|
||||
<div className="tempalink">
|
||||
<div className="qr">
|
||||
<QRCode text={url} />
|
||||
</div>
|
||||
<div className="urls">
|
||||
<div className="long-url">
|
||||
<input onClick={this.onClick} readOnly type="text" value={url} />
|
||||
</div>
|
||||
|
||||
<div className="short-url">
|
||||
or, for short: <span>{shortUrl}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue