Skip to content

Commit

Permalink
Fixed pagination limit Nan and unique key prop error (#1203)
Browse files Browse the repository at this point in the history 
fixed pagination limit Nan and unique key prop error

Co-authored-by: Maija Y <[email protected]>
  • Loading branch information
@Maijjay
Maijjay and Maija Y authored Nov 21, 2023
1 parent 87d3f09 commit a0f1386
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 8 deletions.
31 changes: 24 additions & 7 deletions shared-module/src/components/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<LeftButton
tabIndex={0}
role="button"
key={t("go-to-previous-page")}
aria-label={t("go-to-previous-page")}
onClick={handleChangeEvent(Math.max(1, page - 1))}
>
Expand All @@ -133,14 +134,15 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
// In case there is nothing
if (totalPages === 0) {
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: 1 })}>
<SelectedCircle key={t("current-page-x")} aria-label={t("current-page-x", { number: 1 })}>
<CircleText>1</CircleText>
</SelectedCircle>,
)
components.push(
<RightButton
tabIndex={0}
role="button"
key={t("go-to-next-page")}
aria-label={t("go-to-next-page")}
onClick={handleChangeEvent(Math.min(page + 1, totalPages))}
>
Expand All @@ -154,7 +156,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
for (let idx = 1; idx <= totalPages; idx++) {
if (idx == page) {
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: idx })}>
<SelectedCircle key={idx} aria-label={t("current-page-x", { number: idx })}>
<CircleText>{idx}</CircleText>
</SelectedCircle>,
)
Expand All @@ -163,6 +165,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: idx })}
onClick={handleChangeEvent(idx)}
>
Expand All @@ -176,6 +179,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<RightButton
tabIndex={0}
role="button"
key={t("go-to-next-page")}
aria-label={t("go-to-next-page")}
onClick={handleChangeEvent(Math.min(page + 1, totalPages))}
>
Expand All @@ -189,14 +193,15 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
for (let idx = 1; idx <= CAPACITY; idx++) {
if (idx == page) {
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: idx })}>
<SelectedCircle key={idx} aria-label={t("current-page-x", { number: idx })}>
<CircleText>{idx}</CircleText>
</SelectedCircle>,
)
} else {
components.push(
<Circle
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: idx })}
onClick={handleChangeEvent(idx)}
>
Expand All @@ -212,7 +217,11 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
</HorizontalDots>,
)
}
components.push(<Circle onClick={handleChangeEvent(totalPages)}> {totalPages}</Circle>)
components.push(
<Circle key={totalPages} onClick={handleChangeEvent(totalPages)}>
{totalPages}
</Circle>,
)
} else if (CAPACITY <= page && page <= totalPages - CAPACITY + 1) {
components.push(<Circle onClick={handleChangeEvent(1)}> 1 </Circle>)
components.push(
Expand All @@ -224,21 +233,26 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: page - 1 })}
onClick={handleChangeEvent(page - 1)}
>
<CircleText>{page - 1}</CircleText>
</Circle>,
)
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: page })}>
<SelectedCircle
key={t("current-page-x")}
aria-label={t("current-page-x", { number: page })}
>
<CircleText>{page}</CircleText>
</SelectedCircle>,
)
components.push(
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: page + 1 })}
onClick={handleChangeEvent(page + 1)}
>
Expand All @@ -254,6 +268,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: totalPages })}
onClick={handleChangeEvent(totalPages)}
>
Expand All @@ -265,21 +280,22 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: 1 })}
onClick={handleChangeEvent(1)}
>
<CircleText>1</CircleText>
</Circle>,
)
components.push(
<HorizontalDots>
<HorizontalDots key={"dots icon"}>
<MoreHorizIcon />
</HorizontalDots>,
)
for (let idx = totalPages - CAPACITY + 1; idx <= totalPages; idx++) {
if (idx == page) {
components.push(
<SelectedCircle aria-label={t("current-page-x", { number: idx })}>
<SelectedCircle key={idx} aria-label={t("current-page-x", { number: idx })}>
<CircleText>{idx}</CircleText>
</SelectedCircle>,
)
Expand All @@ -288,6 +304,7 @@ const Pagination: React.FC<React.PropsWithChildren<React.PropsWithChildren<Pagin
<Circle
tabIndex={0}
role="button"
key={t("go-to-page-x")}
aria-label={t("go-to-page-x", { number: idx })}
onClick={handleChangeEvent(idx)}
>
Expand Down
2 changes: 1 addition & 1 deletion shared-module/src/components/PaginationItemsPerPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const PaginationItemsPerPage: React.FC<PaginationItemsPerPageProps> = ({ paginat
label={t("label-items-per-page")}
id={"set-pagination-limit"}
value={paginationInfo.limit.toString()}
onChange={(o) => {
onChangeByValue={(o) => {
paginationInfo.setLimit(Number(o))
}}
options={options}
Expand Down

0 comments on commit a0f1386

Please sign in to comment.