ben.carrasco/jambonz-webapp
1
0
Fork 0
mirror of https://github.com/jambonz/jambonz-webapp.git synced 2026-10-04 02:04:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pagination optimizations

Browse Source
This commit is contained in:
kitajchuk
2022-10-04 07:28:53 -07:00
parent 584386c3ca
commit 18f531c478
3 changed files with 90 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pagination/index.tsx
+80 -70
View File
@@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback, useMemo } from "react";
import { Icon } from "jambonz-ui";
import { Icons } from "../icons";
@@ -24,9 +24,84 @@ export const Pagination = ({
jumpNum = 3,
showMin = 4,
}: PaginationProps) => {
const handleSetPageNumber = (num: number) => {
setPageNumber(Math.max(1, Math.min(maxPageNumber, num)));
};
const memoizedPages = useMemo(() => {
return Array(maxPageNumber).fill(0);
}, [maxPageNumber]);
const handleSetPageNumber = useCallback(
(num: number) => {
setPageNumber(Math.max(1, Math.min(maxPageNumber, num)));
},
[maxPageNumber, setPageNumber]
);
const handleNumberMapping = useCallback(
(_: number, index: number) => {
const num = index + 1;
if (
pageNumber === num ||
num === 1 ||
num === maxPageNumber ||
(pageNumber > num && pageNumber <= num + nextTo) ||
(pageNumber < num && pageNumber >= num - nextTo) ||
(pageNumber <= showMin && num <= showMin) ||
(maxPageNumber - pageNumber + 1 <= showMin &&
maxPageNumber - num + 1 <= showMin)
) {
return (
<button
type="button"
onClick={() => handleSetPageNumber(num)}
key={num}
>
{num === pageNumber ? (
<Icon>{num}</Icon>
) : (
<Icon subStyle="grey">{num}</Icon>
)}
</button>
);
}
if (
pageNumber >= showMin
? num === pageNumber + nextTo + 1
: num === showMin + 1
) {
return (
<button
key="jump_right"
type="button"
onClick={() => handleSetPageNumber(pageNumber + jumpNum)}
>
<Icon subStyle="grey">
<Icons.MoreHorizontal />
</Icon>
</button>
);
}
if (
maxPageNumber - pageNumber + 1 >= showMin
? num === pageNumber - nextTo - 1
: maxPageNumber - num + 1 === showMin + 1
) {
return (
<button
key="jump_left"
type="button"
onClick={() => handleSetPageNumber(pageNumber - jumpNum)}
>
<Icon subStyle="grey">
<Icons.MoreHorizontal />
</Icon>
</button>
);
}
},
[maxPageNumber, pageNumber]
);
return (
<div className="pagination">
@@ -39,72 +114,7 @@ export const Pagination = ({
<Icons.ChevronLeft />
</Icon>
</button>
{Array(maxPageNumber)
.fill(0)
.map((_, index) => {
const num = index + 1;
if (
pageNumber === num ||
num === 1 ||
num === maxPageNumber ||
(pageNumber > num && pageNumber <= num + nextTo) ||
(pageNumber < num && pageNumber >= num - nextTo) ||
(pageNumber <= showMin && num <= showMin) ||
(maxPageNumber - pageNumber + 1 <= showMin &&
maxPageNumber - num + 1 <= showMin)
) {
return (
<button
type="button"
onClick={() => handleSetPageNumber(num)}
key={num}
>
{num === pageNumber ? (
<Icon>{num}</Icon>
) : (
<Icon subStyle="grey">{num}</Icon>
)}
</button>
);
}
if (
pageNumber >= showMin
? num === pageNumber + nextTo + 1
: num === showMin + 1
) {
return (
<button
key="jump_right"
type="button"
onClick={() => handleSetPageNumber(pageNumber + jumpNum)}
>
<Icon subStyle="grey">
<Icons.MoreHorizontal />
</Icon>
</button>
);
}
if (
maxPageNumber - pageNumber + 1 >= showMin
? num === pageNumber - nextTo - 1
: maxPageNumber - num + 1 === showMin + 1
) {
return (
<button
key="jump_left"
type="button"
onClick={() => handleSetPageNumber(pageNumber - jumpNum)}
>
<Icon subStyle="grey">
<Icons.MoreHorizontal />
</Icon>
</button>
);
}
})}
{memoizedPages.map(handleNumberMapping)}
<button
type="button"
disabled={pageNumber === maxPageNumber}
src/containers/internal/views/alerts/index.tsx
+5 -1
View File
@@ -56,6 +56,11 @@ export const Alerts = () => {
}
}, [accountSid, pageNumber, dateFilter]);
/** Reset page number when filters change */
useEffect(() => {
setPageNumber(1);
}, [accountSid, dateFilter]);
return (
<>
<section className="mast">
@@ -118,7 +123,6 @@ export const Alerts = () => {
id="page_filter"
filter={[perPageFilter, setPerPageFilter]}
options={PER_PAGE_SELECTION}
handleSelect={() => setPageNumber(1)}
/>
</ButtonGroup>
</footer>
src/containers/internal/views/recent-calls/index.tsx
+5 -1
View File
@@ -72,6 +72,11 @@ export const RecentCalls = () => {
}
}, [accountSid, pageNumber, dateFilter, directionFilter, statusFilter]);
/** Reset page number when filters change */
useEffect(() => {
setPageNumber(1);
}, [accountSid, dateFilter, directionFilter, statusFilter]);
return (
<>
<section className="mast">
@@ -129,7 +134,6 @@ export const RecentCalls = () => {
id="page_filter"
filter={[perPageFilter, setPerPageFilter]}
options={PER_PAGE_SELECTION}
handleSelect={() => setPageNumber(1)}
/>
</ButtonGroup>
</footer>