maisonm

import React from 'react';

//Styles
import { UsersPageContainer } from './styles';

//Components
import UserTable from '../UserTable/UserTable';

const UsersPage = () => {
  return (

maisonm

import React, { useState, useEffect } from 'react';

//Styles
import {
  UserTableContainer,
  UserCardContainer,
  UserTableHeader,
  Age,
  Name,
  Email,

maisonm

  pageNumberRender = () => {
    const { totalPages, currentClickedNumber } = this.state;
    let pages = [];
    for (let i = 1; i < totalPages + 1; i++) {
      pages.push(
        <PageNumber
          onClick={(e) => {
            this.setCurrentClickedNumber(e);
          }}
          isClicked={currentClickedNumber === i ? true : false}

maisonm

  componentDidMount() {
    this.determineNumberOfPages();
  }

  componentDidUpdate(prevProps, prevState) {
    const { data, setData } = this.props;
    const { currentClickedNumber, pageData } = this.state;

    if (data !== prevProps.data) {
      this.determineNumberOfPages();

maisonm

  moveOnePageForward = () => {
    const { dataStartingIndex, totalPages, currentClickedNumber } = this.state;

    if (dataStartingIndex) {
      this.setState({
        dataStartingIndex: null,
        currentClickedNumber: 2
      });
    } else {
      this.setState({

maisonm

setCurrentClickedNumber = e => {
    const { target } = e;
    this.setState({
      currentClickedNumber: parseInt(target.innerText)
    });
  };

  moveToLastPage = () => {
    this.setState({
      currentClickedNumber: this.state.totalPages,

maisonm

    this.setState({
      totalPages: chunkArray.length,
      dataStartingIndex: itemsPerPage,
      pageData: paginatedDataObject,
      clickedOnNumber: 1
    });

maisonm

  determineNumberOfPages = () => {
    const { data, itemsPerPage } = this.props;
    let paginatedDataObject = {};

    let index = 0;
    let dataLength = data.length;
    let chunkArray = [];

    for (index = 0; index < dataLength; index += itemsPerPage) {
      let newChunk = data.slice(index, index + itemsPerPage);

maisonm

<Paginate
  data={data}
  setData={setDataFunction}
  itemsPerPage={usersPerPage}
/>

maisonm

  constructor(props) {
    super(props);

    this.state = {
      totalPages: null,
      dataStartingIndex: null,
      dataLastIndex: 0,
      currentClickedNumber: 1,
      pageData: null
    };