diligent-next/components/pagination/react-query/PaginationComponentRQ.jsx

import {
  Box,
  Button,
  Divider,
  FormControl,
  Grid,
  InputLabel,
  MenuItem,
  Paper,
  Select,
  TextField,
  Typography,
} from '@mui/material';
import { useTranslation } from 'next-i18next';
import { useState } from 'react';
import useDebounce from '../../../hooks/use-debounce';
import { usePagination } from '../../../hooks/use-pagination';
import { compare } from '../../../utils/helpers/sortHelpers';

const PaginationComponentRQ = () => {
  const [pageIndex, setPageIndex] = useState(1);
  const [filter, setFilter] = useState('');
  const [sort, setSort] = useState('');
  const { t } = useTranslation('pagination');
  const { data: paginationData } = usePagination(pageIndex);

  const debouncedFilter = useDebounce(filter, 500);

  const handleFilterTextChange = (event) => {
    const filterText = event.target.value;
    setFilter(filterText);
  };

  const handleSortChange = (event) => {
    const sort = event.target.value;
    setSort(sort);
  };

  const dataToDisplay = paginationData?.data
    .filter((item) =>
      item.name.toLowerCase().startsWith(debouncedFilter.toLowerCase())
    )
    .sort((a, b) => compare(a.name, b.name, sort))
    .map((item, index) => (
      // ! DON'T USE index for key, this is for example only
      <Grid item sx={{ p: 2 }} xs={12} sm={6} md={4} lg={3} key={index}>
        {/* TODO separate into component */}
        <Paper sx={{ p: 3, height: '100%' }} elevation={3}>
          <Typography sx={{ fontWeight: 600 }}>{t('Name')}</Typography>
          <Typography display="inline"> {item.name}</Typography>
          <Divider />
          <Typography sx={{ fontWeight: 600 }}>{t('Age')}</Typography>
          <Typography display="inline"> {item.age}</Typography>
          <Divider />
          <Typography sx={{ fontWeight: 600 }}>{t('Gender')}</Typography>
          <Typography display="inline"> {item.gender}</Typography>
          <Divider />
        </Paper>
      </Grid>
    ));

  return (
    <Paper
      sx={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'start',
        py: 2,
        minHeight: 400,
        marginTop: 5,
      }}
      elevation={5}
    >
      <Typography sx={{ my: 4 }} variant="h4" gutterBottom align="center">
        {t('Title')}
      </Typography>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          mx: 2,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            width: '100%',
          }}
        >
          <FormControl sx={{ flexGrow: 1 }}>
            <InputLabel id="sort-label">Sort</InputLabel>
            <Select
              label="Sort"
              labelId="sort-label"
              id="sort-select-helper"
              value={sort}
              onChange={handleSortChange}
            >
              <MenuItem value="asc">Name - A-Z</MenuItem>
              <MenuItem value="desc">Name - Z-A</MenuItem>
            </Select>
          </FormControl>
          <TextField
            sx={{ flexGrow: 1 }}
            variant="outlined"
            label="Filter"
            placeholder="Filter"
            value={filter}
            onChange={handleFilterTextChange}
          />
        </Box>
      </Box>
      <Grid container>{dataToDisplay}</Grid>
      <Box
        sx={{
          width: '100%',
          textAlign: 'center',
          marginTop: 3,
        }}
      >
        <Button
          disabled={pageIndex === 1}
          onClick={() => setPageIndex(pageIndex - 1)}
          sx={{
            marginRight: 5,
          }}
        >
          {t('Btns.PrevBtn')}
        </Button>
        <Button
          disabled={pageIndex * 4 > paginationData?.dataCount}
          onClick={() => setPageIndex(pageIndex + 1)}
          sx={{
            marginRight: 5,
          }}
        >
          {t('Btns.NextBtn')}
        </Button>
      </Box>
    </Paper>
  );
};

export default PaginationComponentRQ;