Multiple Request React JS

MultiplRequestTimeCalculate.jsx

import React from 'react';

export default class RequestTest extends React.PureComponent {
  constructor(props, context) {
    super(props);

    this.state = {
      pageSize: 500,
      concurrent: true,
      concurrentNumber: 5,
      startTime: false,
      timeUsed: '-',
      loading: false,
      url: 'http://url.com',
      total: 7700,
      header: { credentials: 'include' },
    };
  }

  handleBigListRequest = () => {
    this.initTimer();
    const { pageSize, concurrentNumber } = this.state;
    this.startLoading();
    this.timerStart();
    const totalPages = Math.ceil(this.state.total / pageSize);
    // totally batch request number
    const requestNumber = Math.ceil(totalPages / concurrentNumber);
    this.requestProcess(1, requestNumber);
  };

  requestProcess = (start, requestNumber) => {
    console.log('In requestProcess');
    const { pageSize, concurrentNumber } = this.state;
    const nextStart = start + pageSize * concurrentNumber;
    const nextRequestNumber = requestNumber - 1;
    if (requestNumber > 0) {
      const urls = [];
      console.log(`start ${start}, concurrentNumber ${concurrentNumber}, pageSize ${pageSize}`);
      for (let i = start; (i < start + concurrentNumber * pageSize) && i < this.state.total; i += pageSize) {
        urls.push(
          fetch( `http://url=1&offset=${i}&limit=${pageSize}`, this.state.header)
        );
      }
      Promise.all(urls).then(data => {
        console.log(data);
        this.timerStop();
        this.stopLoading();
      }).then(response => {
        if (nextRequestNumber > 0) {
          console.log(`nextStart ${nextStart}`);
          this.requestProcess(nextStart, nextRequestNumber);
        }
      });
    }
  };

  initTimer = () => this.setState({ timeUsed: '-'});

  startLoading = () => this.setState({ loading: true });

  stopLoading = () => this.setState({ loading: false });

  timerStart = () => this.setState({startTime: new Date()});

  timerStop = () => {
    const endTime = new Date();
    let timeDiff = endTime - this.state.startTime;
    // strip the ms
    timeDiff /= 1000;
    this.setState({
      timeUsed: timeDiff,
    });
  };

  render() {
    return (
      <div>
        <div>
          Page size:
          <input type="number"
                 style={{border: '1px solid #333'}}
                 value={this.state.pageSize}
                 onChange={e => this.setState({pageSize: parseInt(e.target.value)})} />
        </div>
        <div>
          Concurrent number:
          <input type="number"
                 style={{border: '1px solid #333'}}
                 value={this.state.concurrentNumber}
                 onChange={e => this.setState({concurrentNumber: parseInt(e.target.value)})} />
        </div>
        <input type="button" className="btn btn-primary" value="Request" onClick={this.handleBigListRequest} />
        <div>
          <table>
            <tr>
              <td>{this.state.loading && 'Loading...'}</td>
            </tr>
            <tr>
              <td>Concurrent number: {this.state.concurrentNumber}</td>
            </tr>
            <tr>
              <td>Request time used: {this.state.timeUsed}s</td>
            </tr>
          </table>

        </div>
      </div>
    );
  }
}