All files / client/components/Admin AdminRebuildSearch.tsx

0% Statements 0/13
0% Branches 0/4
0% Functions 0/5
0% Lines 0/13

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 76 77 78 79 80 81                                                                                                                                                                 
import React from 'react'
import Crowi from 'client/util/Crowi'
 
interface Props {
  crowi: Crowi
}
 
interface State {
  isCompleted: boolean
  total: number
  current: number
  skip: number
}
 
interface Progress {
  total: number
  current: number
  skip: number
}
 
export default class AdminRebuildSearch extends React.Component<Props, State> {
  constructor(props: 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: Progress) => {
      this.setState({
        ...data,
        isCompleted: false,
      })
    })
 
    socket.on('admin:finishAddPage', (data: Progress) => {
      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>
    )
  }
}