All files / components PaginatedMessages.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState } from 'react'
import { MessageEntity } from '../entities/entities/message.entity'
import MessageList from './MessageList'
import ReactPaginate from 'react-paginate'
import EN from '../locales/en'
import FR from '../locales/fr'
import React from 'react'
 
interface PaginatedMessagesProps {
  messageEntities: MessageEntity[]
  locale: string
  messagesPerPage: number
  pageRangeDisplayed: number
}
 
const PaginatedMessages = ({
  messageEntities,
  locale,
  messagesPerPage,
  pageRangeDisplayed,
}: PaginatedMessagesProps) => {
  const language = locale === 'en' ? EN : FR
 
  const [itemOffset, setItemOffset] = useState(0)
  const endOffset = itemOffset + messagesPerPage
  const currentItems = messageEntities.slice(itemOffset, endOffset)
  const pageCount = Math.ceil(messageEntities.length / messagesPerPage)
 
  const handlePageClick = (selectedItem: { selected: number }) => {
    const pageSelected = selectedItem.selected
    const newOffset = pageSelected * messagesPerPage
    setItemOffset(newOffset)
  }
 
  return (
    <>
      <MessageList messageEntities={currentItems} locale={locale} />
      {pageCount > 1 ? (
        <ReactPaginate
          breakLabel="..."
          nextLabel={language.inbox.paginationText.nextLink}
          previousLabel={language.inbox.paginationText.previousLink}
          onPageChange={handlePageClick}
          pageRangeDisplayed={pageRangeDisplayed}
          pageCount={pageCount}
          renderOnZeroPageCount={null}
          containerClassName="flex space-x-1"
          ariaLabelBuilder={(page, selected) =>
            selected
              ? `${language.inbox.paginationText.page}${page}${language.inbox.paginationText.currentPageAriaLabel}`
              : `${language.inbox.paginationText.page}${page}`
          }
          pageLinkClassName="px-3 rounded-md py-1 cursor-pointer transition-all duration-200
                    underline underline-offset-4 decoration-gray-dark
                    hover:bg-brighter-blue-light hover:text-blue-hover
                    focus:outline-none focus:no-underline focus:bg-blue-hover focus:text-white focus:border 
                    focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-hover"
          previousAriaLabel={language.inbox.paginationText.previousAriaLabel}
          previousLinkClassName="px-3 underline underline-offset-4 decoration-gray-dark"
          nextAriaLabel={language.inbox.paginationText.nextAriaLabel}
          nextLinkClassName="px-3 underline underline-offset-4 decoration-gray-dark"
          activeLinkClassName="bg-deep-blue-dark no-underline no-hover text-white"
          disabledLinkClassName="text-gray-dark cursor-not-allowed"
        />
      ) : null}
    </>
  )
}
 
export default PaginatedMessages