A React Component which handles User Listing and Filtering based on User Inputs

react_component_for_user_listing_and_filtering.jsx

import React from "react";
import PropTypes from "prop-types";
import Users from "./Users";
import Pagination from "../Pagination"; // Common pagination component
import CreateUserCard from "./CreateUserCard";
import FilterUser from "./FilterUser";
import Loader from '../Loader'; // Common Loader component

class Index extends React.Component {
  constructor(props) {
    super();
    this.state = {
      users: [],
      current_page: 1,
      name: '',
      email: '',
      total_pages: 0,
      searching: false
    };
    this.handleChange = this.handleChange.bind(this);
  }

  // Set the state when the component is available
  componentDidMount() {
    this.setState({
      users: this.props.users,
      current_page: this.props.current_page,
      total_pages: this.props.total_pages,
      records_count: this.props.records_count
    });
  }

  // Common change event for all the inputs
  handleChange(event) {
    this.setState({ [event.target.id]: event.target.value });
  }

  // Capture pagination click and fire ajax for the pagination with the page number
  onPaginationClick = (number, e) => {
    e.preventDefault();
    let thisObj = this;
    thisObj.setState({ searching: true });
    jQuery.ajax({
      type: 'get',
      url: '/admin',
      dataType: 'json',
      data: {
        page: number,
        search: {
          name: thisObj.state.name,
          email: thisObj.state.email
        }
      },
      success: function (response) {
        thisObj.setState({
          users: response['users'],
          current_page: number,
          total_pages: response['total_pages'],
          records_count: response['records_count']
        });
      },
      complete: function () {
        thisObj.setState({ searching: false });
      }
    });
  }
  
  render() {
    return (
      <div>
        {this.props.total_users > 0 ? (
          <div>
            <FilterUser handleChange={this.handleChange} filterUser={this.onPaginationClick} />
            <div className="col-xs-12 list-u-card">
              <div className="card">
                <div className="header">
                  <h2>
                    <i className="material-icons">person</i>
                    List of users
                    ({this.state.records_count})
                    {this.state.searching && <Loader />}
                  </h2>
                  <a href="/admin/new" className="btn btn-primary waves-effect"><i className="material-icons">add_circle_outline</i>Create User</a>
                </div>
                <div className="body table-responsive">
                  {
                    this.state.users.length > 0 ? (
                      <Users users={this.state.users} currentPage={this.state.current_page} />
                    ) : (
                        <div>Users not found!</div>
                      )
                  }
                  {this.state.total_pages > 1 && (
                    <Pagination
                      current_page={this.state.current_page}
                      total_pages={this.state.total_pages}
                      total_count={this.props.total_count} onPaginationClick={this.onPaginationClick}
                    />)
                  }
                </div>
              </div>
            </div>
          </div>) : (
            <CreateUserCard />
          )}
      </div>
    );
  }
}

Index.propTypes = {
  users: PropTypes.array
};

export default Index;