From f2aa2d2d8cdfb96f5c34f1bc5002dabcf365bc36 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 21 Nov 2022 10:26:34 +0800
Subject: [PATCH] refactor(console): hide pagination if the page count is less
 than two (#2474)

---
 .../src/components/AuditLogTable/index.tsx    | 21 ++++++++-----------
 .../src/components/Pagination/index.tsx       | 11 +++++++---
 .../console/src/pages/ApiResources/index.tsx  | 21 ++++++++-----------
 .../console/src/pages/Applications/index.tsx  | 21 ++++++++-----------
 packages/console/src/pages/Users/index.tsx    | 21 ++++++++-----------
 5 files changed, 44 insertions(+), 51 deletions(-)

diff --git a/packages/console/src/components/AuditLogTable/index.tsx b/packages/console/src/components/AuditLogTable/index.tsx
index 5425c0fa3..b5bbe946d 100644
--- a/packages/console/src/components/AuditLogTable/index.tsx
+++ b/packages/console/src/components/AuditLogTable/index.tsx
@@ -139,18 +139,15 @@ const AuditLogTable = ({ userId }: Props) => {
           </tbody>
         </table>
       </div>
-      <div className={styles.pagination}>
-        {!!totalCount && (
-          <Pagination
-            pageIndex={pageIndex}
-            totalCount={totalCount}
-            pageSize={pageSize}
-            onChange={(page) => {
-              updateQuery('page', String(page));
-            }}
-          />
-        )}
-      </div>
+      <Pagination
+        pageIndex={pageIndex}
+        totalCount={totalCount ?? 0}
+        pageSize={pageSize}
+        className={styles.pagination}
+        onChange={(page) => {
+          updateQuery('page', String(page));
+        }}
+      />
     </>
   );
 };
diff --git a/packages/console/src/components/Pagination/index.tsx b/packages/console/src/components/Pagination/index.tsx
index 455fa3be9..07894c8fc 100644
--- a/packages/console/src/components/Pagination/index.tsx
+++ b/packages/console/src/components/Pagination/index.tsx
@@ -12,18 +12,23 @@ type Props = {
   pageIndex: number;
   totalCount: number;
   pageSize: number;
+  className?: string;
   onChange?: (pageIndex: number) => void;
 };
 
-const Pagination = ({ pageIndex, totalCount, pageSize, onChange }: Props) => {
+const Pagination = ({ pageIndex, totalCount, pageSize, className, onChange }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const pageCount = Math.ceil(totalCount / pageSize);
 
+  if (pageCount <= 1) {
+    return null;
+  }
+
   const min = (pageIndex - 1) * pageSize + 1;
-  const max = pageIndex * pageSize;
+  const max = Math.min(pageIndex * pageSize, totalCount);
 
   return (
-    <div className={styles.container}>
+    <div className={classNames(styles.container, className)}>
       <div className={styles.positionInfo}>
         {t('general.page_info', { min, max, total: totalCount })}
       </div>
diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx
index 71c8a9944..5c42277cd 100644
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@@ -137,18 +137,15 @@ const ApiResources = () => {
           </tbody>
         </table>
       </div>
-      <div className={styles.pagination}>
-        {!!totalCount && (
-          <Pagination
-            pageIndex={pageIndex}
-            totalCount={totalCount}
-            pageSize={pageSize}
-            onChange={(page) => {
-              setQuery({ page: String(page) });
-            }}
-          />
-        )}
-      </div>
+      <Pagination
+        pageIndex={pageIndex}
+        totalCount={totalCount ?? 0}
+        pageSize={pageSize}
+        className={styles.pagination}
+        onChange={(page) => {
+          setQuery({ page: String(page) });
+        }}
+      />
     </div>
   );
 };
diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx
index 9b80d83fc..a3129e7ce 100644
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@@ -128,18 +128,15 @@ const Applications = () => {
           </tbody>
         </table>
       </div>
-      <div className={styles.pagination}>
-        {!!totalCount && (
-          <Pagination
-            pageIndex={pageIndex}
-            totalCount={totalCount}
-            pageSize={pageSize}
-            onChange={(page) => {
-              setQuery({ page: String(page) });
-            }}
-          />
-        )}
-      </div>
+      <Pagination
+        pageIndex={pageIndex}
+        totalCount={totalCount ?? 0}
+        pageSize={pageSize}
+        className={styles.pagination}
+        onChange={(page) => {
+          setQuery({ page: String(page) });
+        }}
+      />
     </div>
   );
 };
diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx
index 4301a047c..7869c1a05 100644
--- a/packages/console/src/pages/Users/index.tsx
+++ b/packages/console/src/pages/Users/index.tsx
@@ -153,18 +153,15 @@ const Users = () => {
           </tbody>
         </table>
       </div>
-      <div className={styles.pagination}>
-        {!!totalCount && (
-          <Pagination
-            pageIndex={pageIndex}
-            totalCount={totalCount}
-            pageSize={pageSize}
-            onChange={(page) => {
-              setQuery({ page: String(page), ...conditional(keyword && { search: keyword }) });
-            }}
-          />
-        )}
-      </div>
+      <Pagination
+        pageIndex={pageIndex}
+        totalCount={totalCount ?? 0}
+        pageSize={pageSize}
+        className={styles.pagination}
+        onChange={(page) => {
+          setQuery({ page: String(page), ...conditional(keyword && { search: keyword }) });
+        }}
+      />
     </div>
   );
 };