Untitled

import React from 'react';
import Menu from './Menu'
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import FormControl from 'react-bootstrap/FormControl'
import ModalAddUser from './ModalAddUser'
import ModalRemoveUser from './ModalRemoveUser'
import './ManageUsers.css';
import { RiAddCircleLine, RiDeleteBin2Line } from "react-icons/ri";
import { HiOutlinePencilAlt } from "react-icons/hi";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import ky from 'ky';

export default class ManageUsers extends React.Component {
  constructor(props) {
    super(props);
    const products = [ ];
    const selected = [ ];
    this.showAddUserDialog = this.showAddUserDialog.bind(this);
    this.showRemoveUserDialog = this.showRemoveUserDialog.bind(this);
    this.getUsers = this.getUsers.bind(this);
    this.generatePush = this.generatePush.bind(this);
    this.hideDialog = this.hideDialog.bind(this);
    this.handleTableChange = this.handleTableChange.bind(this);
    this.resetSelection = this.resetSelection.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = { showDialog: false, 
                   dialogType: '' ,
                   validated: false,
                   loginErrorState: false,
                   redirect: false,
                   toastMessage: '',
                   selectedItems: selected,
                   data: products,
                   page: 1,
                   sizePerPage: 10,
                   totalSize: 10,
                   endpoint_mode: 'usersList',
                   findString: ''
                 };
  }
  
  handleTableChange = async (type, { page, sizePerPage }) => {
    await  this.setState({
        page: page,
        sizePerPage: sizePerPage
      });
    await this.getUsers();
  }

  generatePush(type, message) {
    if(type === "error") {
      toast.error(message, { position: toast.POSITION.TOP_CENTER });
    }
    if(type === "bigerror") {
      toast.error(message, { position: toast.POSITION.TOP_CENTER, className: "bigtoast" });
    }
    if(type === "success") {
      toast.success(message, { position: toast.POSITION.TOP_CENTER });
    }
  }
  
  async getUsers() {
    var url;
    let p = this.state.page - 1;
    var endpoint;
    if (this.state.endpoint_mode === 'usersList') {
      endpoint = '/api/adminapi/usersList/' + this.state.sizePerPage + '/' + p;
    }
    if (this.state.endpoint_mode === 'usersFind') {
      endpoint = '/api/adminapi/usersFind/' + this.state.findString + '/' + this.state.sizePerPage + '/' + p;
    }
    try {
      const response = await ky.get(endpoint).json();
      if (typeof response.usersList !== 'undefined') {
        response.usersList.forEach(
          function (element, index, array) {
            url = '/manage/users/' + element.username;
            element.action = (<a href={url} ><HiOutlinePencilAlt /></a>);
          }
        )
        this.setState({ data: response.usersList,
                        totalSize: response.total
                      });
      }
    } catch (error) {
            this.generatePush("error", "Unexpected error. " 
            + error.response.status +
            " Try to refresh");
    }
  }

  componentDidMount() { 
    this.getUsers()
  }

  resetSelection() {
    this.setState(() => ({
        selectedItems: []
    }));
  }

  handleOnSelect = (row, isSelect) => {
    if (isSelect) {
      this.setState(() => ({
        selectedItems: [...this.state.selectedItems, row.username]
      }));
    } else {
      this.setState(() => ({
        selectedItems: this.state.selectedItems.filter(x => x !== row.username)
      }));
    }
  }


  handleOnSelectAll = (isSelect, rows) => {
    const ids = rows.map(r => r.username);
    if (isSelect) {
      this.setState(() => ({
        selectedItems: ids
      }));
    } else {
      this.setState(() => ({
        selectedItems: []
      }));
    }
  }
  async handleSearch(event) {
    event.preventDefault();
    if (this.state.findString !== '') {
      await this.setState({ endpoint_mode: 'usersFind', page: 1 });
    }
    else {
      await this.setState({ endpoint_mode: 'usersList', page: 1 });
    }
    await this.getUsers()
  }

  handleChange(event) {    
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({
      [name]: value    
    });
  }

  showAddUserDialog() {
    this.setState({ showDialog: true, dialogType: 'addUser' });
  }

  showRemoveUserDialog() {
    this.setState({ showDialog: true, dialogType: 'removeUser' });
  }

  hideDialog() {
    this.setState({ showDialog: false, dialogType: '' });
    this.getUsers()
  }

  render() {
    let dialog;
    let btnRemoveInteractive;
    const columns = [{
      dataField: 'id',
      text: 'Id'
    }, {
      dataField: 'username',
      text: 'Username'
    }, {
      dataField: 'creationDate',
      text: 'Creation date'
    },
    {
      dataField: 'action',
      text: '',
      headerClasses: 'actions-column'
    }
    ];
    
    const selectRow = {
      mode: 'checkbox',
      classes: 'selection-row',
      onSelect: this.handleOnSelect,
      onSelectAll: this.handleOnSelectAll,
      page: this.state.page,
      sizePerPage: this.state.sizePerPage,
      totalSize: this.state.totalSize
    }
    
    const { data, sizePerPage, page, totalSize } = this.state;
    if(this.state.showDialog && this.state.dialogType === 'addUser') {
      dialog = (
         <ModalAddUser onHide={this.hideDialog} onPush={this.generatePush}/>
     );
    }
    if(this.state.showDialog && this.state.dialogType === 'removeUser') {
      dialog = (
         <ModalRemoveUser 
         onHide={this.hideDialog} 
         onPush={this.generatePush} 
         usersList={this.state.selectedItems}
         onRemove={this.resetSelection}/>
     );
    }
    if(this.state.selectedItems.length < 1) {
      btnRemoveInteractive = (
        <Button variant="danger" size="sm" className="me-1" disabled onClick={this.showRemoveUserDialog}>
          <RiDeleteBin2Line className="btn-icons-pos"/>
          Remove
        </Button>
      );
    }
    else {
      btnRemoveInteractive = (
        <Button variant="danger" size="sm" className="me-1" onClick={this.showRemoveUserDialog}>
          <RiDeleteBin2Line className="btn-icons-pos"/>
          Remove
        </Button>
      );
    }

    return (
      <>
      <Menu />
      <ToastContainer autoClose={2000} />
      {dialog}
      <h5 className="p-3"> Users Administration </h5>
      <Container fluid>
       <Row>
         <Col xs={10} className="mb-1">
            <Button variant="success" size="sm" className="me-1" onClick={this.showAddUserDialog}> 
               <RiAddCircleLine  className="btn-icons-pos" />
               Add
            </Button>
            {btnRemoveInteractive}
         </Col>
         <Col>
      <Form className="d-flex" onSubmit={this.handleSearch}>
        <FormControl
          type="search"
          name = "findString"
          placeholder="Username"
          onChange={this.handleChange} 
          value={this.state.findString}
          className="me-1"
          aria-label="Search"
          size="sm" 
        />
        <Button variant="outline-success" size="sm" type="submit">Search</Button>
        </Form>
         </Col>
       </Row>
       <Row>
             <BootstrapTable keyField='id' 
             remote
             data={ data } 
             columns={ columns } 
             striped
             hover
             condensed
             pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
             onTableChange={ this.handleTableChange }
             selectRow={ selectRow } 

      />
       </Row>
     </Container>
      </>
    );
  }
}