React.js index for variables view

index.js

import React, { Component, Fragment } from "react";
import { Row } from "reactstrap";

import axios from "axios";

import List from "./List";
import Pagination from "../../../../helpers/Pagination";
import Header from "./Header";
import VariableModal from "./VariableModal";
import { modalModes } from "../../../../constants/defaultValues";
import { trimObjectFields } from '../../../../helpers/Utils';

class Variables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedPageSize: 10,
      pageSizes: [10, 20, 30, 50, 100],
      modalOpen: false,
      modalMode: modalModes.create,
      currentPage: 1,
      totalItemCount: 0,
      totalPage: 1,
      search: "",
      isLoading: false,
      variable: {},
      items: [],
    };
  }
  componentDidMount = async () => {
    this.dataListRender();
  }
  openEditModal = (variable) => {
    this.setState({
      modalOpen: true,
      modalMode: modalModes.update,
      variable,
    });
  };
  openCreateModal = () => {
    this.setState({
      modalOpen: true,
      modalMode: modalModes.create,
      variable: {},
    });
  };
  closeModal = () => {
    this.setState(
      {
        modalOpen: false
      },
      () => this.dataListRender()
    );
  };
  deleteVariable = async (id) => {
    await axios.delete(`${process.env.REACT_APP_BASE_API}/v1/refvar/${id}`);
    this.closeModal();
  };
  addNewVariable = async () => {
    const { variable } = this.state;
    await axios.post(`${process.env.REACT_APP_BASE_API}/v1/refvar`, trimObjectFields(variable));
    this.closeModal();
  };
  updateVariable = async () => {
    const { variable } = this.state;;
    await axios.patch(`${process.env.REACT_APP_BASE_API}/v1/refvar`, trimObjectFields(variable));
    this.closeModal();
  };
  handleInputChange = ({ target }) => {
    const { variable } = this.state;
    variable[target.name] = target.value;
    this.setState({ variable });
  };
  changePageSize = size => {
    this.setState(
      {
        selectedPageSize: size,
        currentPage: 1
      },
      () => this.dataListRender()
    );
  };
  onChangePage = page => {
    this.setState(
      {
        currentPage: page
      },
      () => this.dataListRender()
    );
  };
  onSearchKey = ({ target, key }) => {
    if (key === 'Enter') {
      this.setState(
        {
          search: target.value.toLowerCase().trim(),
          currentPage: 1,
        },
        () => this.dataListRender(),
      );
    }
  };
  handleSwitch = (e) => {
    const { variable } = this.state;
    variable.is_text = e;
    this.setState({ variable });
  };
  dataListRender() {
    const {
      selectedPageSize,
      currentPage,
      search
    } = this.state;
    axios
      .get(
        `${process.env.REACT_APP_BASE_API}/v1/refvars?search=${search}&page=${currentPage - 1}&pageSize=${selectedPageSize}`
      )
      .then(res => {
        return res.data;
      })
      .then(data => {
        this.setState({
          items: data.rows,
          totalItemCount: data.count,
          totalPage: Math.ceil(data.count / selectedPageSize),
          isLoading: true
        });
      });
  }

  render() {
    const {
      currentPage,
      items,
      selectedPageSize,
      totalItemCount,
      pageSizes,
      modalOpen,
      modalMode,
      variable,
    } = this.state;
    const { match } = this.props;
    const startIndex = (currentPage - 1) * selectedPageSize;
    const endIndex = currentPage * selectedPageSize;

    return !this.state.isLoading ? (
      <div className="loading" />
    ) : (
        <Fragment>
          <div className="disable-text-selection">
            <Header
              heading="menu.variables"
              changePageSize={this.changePageSize}
              selectedPageSize={selectedPageSize}
              totalItemCount={totalItemCount}
              match={match}
              startIndex={startIndex}
              endIndex={endIndex}
              itemsLength={items ? items.length : 0}
              onSearchKey={this.onSearchKey}
              pageSizes={pageSizes}
              openCreateModal={this.openCreateModal}
            />
            <VariableModal
              modalMode={modalMode}
              modalOpen={modalOpen}
              closeModal={this.closeModal}
              handleInputChange={this.handleInputChange}
              addNewVariable={this.addNewVariable}
              updateVariable={this.updateVariable}
              variable={variable}
              handleSwitch={this.handleSwitch}
              deleteVariable={this.deleteVariable}
            />
            <Row>
              {items && items.map(variable => {
                return (
                  <List
                    key={variable.id}
                    variable={variable}
                    openEditModal={this.openEditModal}
                  />
                );

              })}
              <Pagination
                currentPage={this.state.currentPage}
                totalPage={this.state.totalPage}
                onChangePage={i => this.onChangePage(i)}
              />
            </Row>
          </div>
        </Fragment>
      );
  }
}

export default Variables;