javascript 更多信息，请查看更多相关信息

Posted 2021-05-03

import React, { Component } from 'react';

import axios from 'axios';
import { Spinner } from "@blueprintjs/core";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheckCircle, faTimesCircle } from '@fortawesome/free-solid-svg-icons';


export class CheckBackendStatus extends Component {

  constructor(props) {
    super(props);

    this.state = {
      status: {},
      isReady: false
    };

    this.check = this.check.bind(this);
  }

  check() {
    axios.get('/api/1/ready/')
      .then(res => {
        this.setState({ status: res.data });
        if (res.data['ready'] === false) {
          setTimeout(this.check, 500);
        }
        else if (res.data['ready'] === true) {
          this.setState({isReady: true});
          this.props.readyCallback();
        }
      })
      .catch(error => {
        setTimeout(this.check, 500);
      })
  }

  componentDidMount() {
    this.check()
  }

  render() {
    return (
      <React.Fragment>
        {this.state.isReady ? (
          <React.Fragment>
            {this.props.children}
          </React.Fragment>
        ) : (
          <React.Fragment>
            <p>
              <Spinner size={20} /> Загрузка приложения
            </p>
            <ul>
              {Object.entries(this.state.status).map(([name, value]) =>
                <li key={name}>
                  {name}
                  {value ? <FontAwesomeIcon icon={faCheckCircle}/> : <FontAwesomeIcon icon={faTimesCircle}/>}
                </li>
              )}
            </ul>
          </React.Fragment>
        )}
      </React.Fragment>
    )
  }
}