From 18f531c478e35ebb1c50b56248311956028f66b9 Mon Sep 17 00:00:00 2001
From: kitajchuk <bk@kitajchuk.com>
Date: Tue, 4 Oct 2022 07:28:53 -0700
Subject: [PATCH] Pagination optimizations

---
 src/components/pagination/index.tsx           | 150 ++++++++++--------
 .../internal/views/alerts/index.tsx           |   6 +-
 .../internal/views/recent-calls/index.tsx     |   6 +-
 3 files changed, 90 insertions(+), 72 deletions(-)

diff --git a/src/components/pagination/index.tsx b/src/components/pagination/index.tsx
index 81d883b..6361769 100644
--- a/src/components/pagination/index.tsx
+++ b/src/components/pagination/index.tsx
@@ -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}
diff --git a/src/containers/internal/views/alerts/index.tsx b/src/containers/internal/views/alerts/index.tsx
index 54a1443..66af58d 100644
--- a/src/containers/internal/views/alerts/index.tsx
+++ b/src/containers/internal/views/alerts/index.tsx
@@ -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>
diff --git a/src/containers/internal/views/recent-calls/index.tsx b/src/containers/internal/views/recent-calls/index.tsx
index deed8fb..fa4feba 100644
--- a/src/containers/internal/views/recent-calls/index.tsx
+++ b/src/containers/internal/views/recent-calls/index.tsx
@@ -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>