access-controller/main/control_page_js_modules/src/control.js

import React from "react";
import axios from "axios";

function FreeWorkplaces(props) {
  return (
    <div className="new-section">
      <p className="row page-description" id="licences_remaining">Свободных мест: {props.count}</p>
    </div>
  )

}

function WorkersCount(props) {
  return (
    <div className="row justify-content-center new-section d-flex align-items-center">
      <div className="col-5">
        <div className="info">
          <div className="info-row">
            <div className="info-target px-4">Инженеров:</div>
            <div className="info-quantity">
              <div className="status-circle-small light-green"></div>
              <span className="info-quantity-value" id="engineers">{props.engineers}</span>
            </div>
          </div>
          <div className="info-row">
            <div className="info-target px-4">Легких агентов:</div>
            <div className="info-quantity">
              <div className="status-circle-small light-yellow"></div>
              <span className="info-quantity-value" id="agents">{props.light_agents}</span>
            </div>
          </div>
        </div>
      </div>
      <div className="col-5">
        <button type="submit" name="engineer" className="btn default-button btn-warning btn-block btn-sm py-3">
          Назначить выбранных на роль инженера
        </button>
        <button type="submit" name="light_agent" className="btn default-button btn-warning btn-block btn-sm py-3">
          Назначить выбранных на роль легкого агента
        </button>
      </div>
    </div>
  )
}

class ModelUserTableRow extends React.Component {
  render() {
    return (
      <tr className={"table-dark"}>
        <td>
          <input
            type="checkbox"
            value={this.props.user.id}
            className="form-check-input"
            name="users"
          />
        </td>
        <td>
          <a href="#">{this.props.user.name}</a>
        </td>
        <td>{this.props.user.user.email}</td>
        <td>{this.props.user.zendesk_role}</td>
      </tr>
    );
  }
}

class ModelUserTableRows extends React.Component {
  render() {
    return (
      this.props.users.map((user, key) => (
        <ModelUserTableRow user={user} key={key} />
      ))
    );
  }
}

class ZendeskUserTableRow extends React.Component {
  render() {
    return (
      <tr className={"table-secondary text-secondary"}>
        <td></td>
        <td>
          <a href="#" style={{ color: "grey", fontStyle: "italic" }}>
            {this.props.user.name}
          </a>
        </td>
        <td style={{ color: "grey", fontStyle: "italic" }}>
          {this.props.user.email}
        </td>
        <td style={{ color: "grey", fontStyle: "italic" }}>
          {this.props.user.zendesk_role}
        </td>
      </tr>
    );
  }
}

class ZendeskUserTableRows extends React.Component {
  render() {
    return (
      this.props.users.map((user, key) => (
        <ZendeskUserTableRow user={user} key={key} />
      ))
    )
  }
}

export class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      engineers: null,
      light_agents: null,
      zendesk_users: [],
      max_agents: null,
      renderLoad: true
    };
  }

  async getUsers() {
    await axios.get("/api/users").then((response) => {
      this.setState({
        users: response.data.users,
        engineers: response.data.engineers,
        light_agents: response.data.light_agents,
        zendesk_users: response.data.zendesk_users,
        max_agents: response.data.max_agents,
        renderLoad: false
      });
      return response
    }).catch(reason => {
      console.log(reason)
    });
  }

  componentDidMount() {
    this.getUsers().then(() => {})
      .catch(reason => {
      console.log(reason)
    });
    this.interval = setInterval(() => {
      this.getUsers().catch(reason => {
        console.log(reason)
      })
    }, 60000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <FreeWorkplaces count={Math.max(this.state.max_agents - this.state.engineers, 0)}/>
        <table className="table table-dark">
          <thead>
            <tr>
              <th>
                <input
                  type="checkbox"
                  className="form-check-input"
                  id="head-checkbox"
                />
              </th>
              <th>Name</th>
              <th>Email</th>
              <th>Role</th>
            </tr>
          </thead>
          <tbody id="tbody">
            <ModelUserTableRows users={this.state.users}/>
            <ZendeskUserTableRows users={this.state.zendesk_users}/>
          </tbody>
        </table>
        {this.state.renderLoad === true ? <p id="loading">Данные загружаются...</p> : null}
        <WorkersCount engineers={this.state.engineers} light_agents={this.state.light_agents}/>
      </div>
    );
  }
}