text: import React, { Component } from "react";
  import UserDataService from "../services/user.service";
  import { Link } from "react-router-dom";
  import Pagination from "@material-ui/lab/Pagination";
  
  export default class UsersList extends Component {
    constructor(props) {
      super(props);
      this.onChangeSearchName = this.onChangeSearchName.bind(this);
      // this.onChangeSearchAge = this.onChangeSearchAge.bind(this);
      // this.onChangeSearchEmail = this.onChangeSearchEmail.bind(this);
      // this.onChangeSearchPassword = this.onChangeSearchPassword.bind(this);
      this.retrieveUsers = this.retrieveUsers.bind(this);
      this.refreshList = this.refreshList.bind(this);
      // this.removeAllDoctors = this.removeAllDoctors.bind(this);
      this.handlePageChange = this.handlePageChange.bind(this);
      this.handlePageSizeChange = this.handlePageSizeChange.bind(this);
  
      this.state = {
        users: [],
        currentUser: null,
        currentIndex: -1,
        searchName: "",
  
        page: 1,
        count: 0,
        pageSize: 3,
      };
  
      this.pageSizes = [3, 6, 9];
    }
  
    componentDidMount() {
      this.retrieveUsers();
    }
  
    onChangeSearchName(e) {
      const searchName = e.target.value;
  
      this.setState({
        searchName: searchName,
      });
    }
  
    getRequestParams(searchName, page, pageSize) {
      let params = {};
  
      if (searchName) {
        params["title"] = searchName;
      }
  
      if (page) {
        params["page"] = page - 1;
      }
  
      if (pageSize) {
        params["size"] = pageSize;
      }
  
      return params;
    }
  
    retrieveUsers() {
      const { searchName, page, pageSize } = this.state;
      const params = this.getRequestParams(searchName, page, pageSize);
  
      UserDataService.getAll(params)
        .then((response) => {
          const { users, totalPages } = response.data;
  
          this.setState({
            users: users,
            count: totalPages,
          });
          console.log(response.data);
        })
        .catch((e) => {
          console.log(e);
        });
    }
  
    refreshList() {
      this.retrieveUsers();
      this.setState({
        currentUser: null,
        currentIndex: -1,
      });
    }
  
    setActiveUser(user, index) {
      this.setState({
        currentUser: user,
        currentIndex: index,
      });
    }
  
    removeAllUser() {
     UserDataService.deleteAll()
        .then((response) => {
          console.log(response.data);
          this.refreshList();
        })
        .catch((e) => {
          console.log(e);
        });
    }
  
    handlePageChange(event, value) {
      this.setState(
        {
          page: value,
        },
        () => {
          this.retrieveUsers();
        }
      );
    }
  
    handlePageSizeChange(event) {
      this.setState(
        {
          pageSize: event.target.value,
          page: 1
        },
        () => {
          this.retrieveUsers();
        }
      );
    }
  
    render() {
      const {
        searchName,
        users,
        currentUser,
        currentIndex,
        page,
        count,
        pageSize,
      } = this.state;
  
      return (
        <div className="list row">
          <div className="col-md-8">
            <div className="input-group mb-3">
              <input
                type="text"
                className="form-control"
                placeholder="Search by name"
                value={searchName}
                onChange={this.onChangeSearchName}
              />
              <div className="input-group-append">
                <button
                  className="btn btn-outline-secondary"
                  type="button"
                  onClick={this.retrieveUsers}
                >
                  Search
                </button>
              </div>
            </div>
          </div>
          <div className="col-md-6">
            <h4>Users List</h4>
  
            <div className="mt-3">
              {"Items per Page: "}
              <select onChange={this.handlePageSizeChange} value={pageSize}>
                {this.pageSizes.map((size) => (
                  <option key={size} value={size}>
                    {size}
                  </option>
                ))}
              </select>
  
              <Pagination
                className="my-3"
                count={count}
                page={page}
                siblingCount={1}
                boundaryCount={1}
                variant="outlined"
                shape="rounded"
                onChange={this.handlePageChange}
              />
            </div>
  
            <ul className="list-group">
              {users &&
                users.map((user, index) => (
                  <li className={ "list-group-item active" }>
                    {user.name}
                  </li>
                ))}
            </ul>
  
            <button
              className="m-3 btn btn-sm btn-danger"
              onClick={this.removeAllUsers}
            >
              Remove All
            </button>
          </div>
          <div className="col-md-6">
            {currentUser ? (
              <div>
                <h4>User</h4>
                <div>
                  <label>
                    <strong>Name:</strong>
                  </label>{" "}
                  {currentUser.name}
                </div>
  
  
  
                <Link
                  to={"/user/" + currentUser.id}
                  className="badge badge-warning"
                >
                  Edit
                </Link>
              </div>
            ) : (
              <div>
                <br />
                <p>Please click on a User...</p>
              </div>
            )}
          </div>
        </div>
      );
    }
  }
  