Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | import React from 'react'
import Crowi from 'client/util/Crowi'
interface Props {
crowi: Crowi
}
interface State {
isCompleted: boolean
total: number
current: number
skip: number
}
export default class AdminRebuildSearch extends React.Component<Props, State> {
constructor(props) {
super(props)
this.state = {
isCompleted: false,
total: 0,
current: 0,
skip: 0,
}
}
componentDidMount() {
const socket = this.props.crowi.getWebSocket()
socket.on('admin:addPageProgress', data => {
this.setState({
...data,
isCompleted: false,
})
})
socket.on('admin:finishAddPage', data => {
this.setState({
...data,
isCompleted: true,
})
})
}
render() {
const { total, current, skip, isCompleted } = this.state
if (total === 0) {
return null
}
if (isCompleted) {
return (
<div className="progress">
<div className="progress-bar progress-bar-striped" style={{ width: `100%` }} />
</div>
)
}
return (
<div className="progress">
<div
className="progress-bar progress-bar-striped progress-bar-animated active"
role="progressbar"
aria-valuemin={0}
aria-valuenow={current}
aria-valuemax={total}
style={{ width: `${(current / total) * 100}%` }}
>
{current}/{total} ({skip} skips)
</div>
</div>
)
}
}
|