123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- import React from 'react';
- import {useEffect, useState} from "react";
- import Box from "@mui/material/Box";
- import Typography from "@mui/material/Typography";
- import {CircularProgress, Divider, Pagination} from "@mui/material";
- import {connect} from "react-redux";
- import {actionUserCount, actionUserFind} from "../../../actions/ActionUserFind";
- import {ClientsCart} from "./ClientsCart";
- const Clients = ({usersArr, usersCount, getAllClients, getCountUser}) => {
- const itemsPerPage = 100
- const [page, setPage] = useState(1)
- const [count, setCount] = useState(1)
- useEffect(() => {
- if (!usersArr && page === 1) getAllClients()
- if (!usersCount) getCountUser()
- else {
- setCount(Math.ceil(+usersCount?.payload / itemsPerPage))
- }
- }, [usersArr, usersCount])
- const handleChange = (event, value) => {
- setPage(value);
- getAllClients((itemsPerPage * value)-itemsPerPage, itemsPerPage);
- }
- return (
- <>
- <Box
- marginBottom='20px'
- width='100%'
- display='flex'
- justifyContent='space-between'
- alignItems='center'
- >
- {usersCount?.payload &&
- <Typography
- variant='h6'
- letterSpacing='2px'
- >
- Total clients: {usersCount.payload}
- </Typography>
- }
- </Box>
- {!usersArr || !usersArr?.payload ?
- <Box
- sx={{
- height: '100%',
- width: '100%',
- display: 'flex',
- justifyContent:'center',
- alignItems:'center'
- }}
- >
- <CircularProgress color="inherit"/>
- </Box>
- :
- Array.isArray(usersArr.payload) && usersArr.payload.map(item => {
- return(
- <ClientsCart
- key={item?._id}
- _id={item?._id || ''}
- login={item?.login || 'not found'}
- nick={item?.nick || ''}
- createdAt={item?.createdAt || ''}
- avatar={item?.avatar}
- acl={item?.acl}
- />
- )
- })
- }
- <Box
- width='100%'
- flexGrow='0'
- >
- <Divider sx={{margin: '20px'}}/>
- <Box
- display='flex'
- justifyContent='center'
- width='100%'
- >
- <Pagination
- count={count || 1}
- page={page}
- onChange={handleChange}
- defaultPage={1}
- color="primary"
- size="large"
- showFirstButton
- showLastButton
- />
- </Box>
- </Box>
- </>
- )
- }
- export const CClients = connect(state => ({
- usersArr: state.promise['allUsers'],
- usersCount: state.promise['usersCount']}),
- {
- getAllClients: actionUserFind,
- getCountUser: actionUserCount})
- (Clients)
|