[feature]: Add a Pagination.jsx component

[gbowne1]

Is your feature request related to a problem? Please describe.

Yes and no.

Some of the items in /pages may need some form of pagination for displaying more than a few items, like Events, Groups and Friends.. which are part of our core, so make this semi-reusable between layouts, pages and components.

Describe the solution you would like

This should be elaborated upon, but it ideally should be something like this:

import { Box, Button } from '@mui/material';

const Pagination = ({
  currentPage,
  setCurrentPage,
  recordsPerPage,
  totalRecords,
}) => {
  const nPages = Math.ceil(totalRecords / recordsPerPage);

  const pageNumbers = [...Array(nPages + 1).keys()].slice(1);

  const nextPage = () => {
    if (currentPage !== nPages) setCurrentPage(currentPage + 1);
  };

  const prevPage = () => {
    if (currentPage !== 1) setCurrentPage(currentPage - 1);
  };

  return (
    <Box>
      <Button onClick={prevPage}>Prev</Button>
      {pageNumbers.map((number) => {
        return (
          <Button
            key={number}
            onClick={() => setCurrentPage(number)}
            variant={number === currentPage ? 'contained' : 'outlined'}
          >
            {number}
          </Button>
        );
      })}
      <Button onClick={nextPage}>Next</Button>
    </Box>
  );
};

export default Pagination;

Describe the alternatives you have tried

Some social media apps and sites are using some minor forms of pagination in various forms already, so it seems useful to help display many items.

Additional context

No response

[gbowne1]

I feel like this in particular will be useful in the current Events feature and perhaps in other core features we have like Friends and Groups.

[LaPulgaaa]

@gbowne1 I find this issue/addition interesting and would love to work on it .May you please assign it to me .further what are your suggestions on using pagination component built in from material ui.something like:

<Pagination count={number of pages} page={page} onChange={handleChange} />

[gbowne1]

@LaPulgaaa We have not decided where this component would be useful just yet or even where it will appear in the UI. I would think it would be best used in something that would need several pages.

That being said, we need to have more features in place for this to be useful yet.

@balajik @gbowne1 @manuel12 @pawel975

[LaPulgaaa]

thanks for the response .can you mention some of the features that can be worked on . I am looking for opportunities to contribute to issue under hacktoberfest labels @gbowne1

[gbowne1]

@LaPulgaaa

Anything in this link is available:

https://github.com/gbowne1/reactsocialnetwork/issues

There's 33 issues, two whole pages of issues. Have a look through them. I did not mark them all hacktoberfest.