Feat: hide pagination widget when not needed (#4957)

* Hide pagination widget when not needed. Don't merge until count is in. * Format * Refactor * Remove story * Fix bug * Format
coder · Nov 8, 2022 · fa844d0 · fa844d0
1 parent e906d0d
commit fa844d0
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 48 deletions.
diff --git a/site/src/components/PaginationWidget/PaginationWidget.stories.tsx b/site/src/components/PaginationWidget/PaginationWidget.stories.tsx
@@ -25,11 +25,6 @@ const Template: Story<PaginationWidgetProps> = (
   args: PaginationWidgetProps,
 ) => <PaginationWidget {...args} />
 
-export const UnknownPageNumbers = Template.bind({})
-UnknownPageNumbers.args = {
-  numRecords: undefined,
-}
-
 export const LessThan8Pages = Template.bind({})
 LessThan8Pages.args = {
   numRecords: 84,

diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -34,24 +34,24 @@ export const PaginationWidget = ({
   const currentPage = paginationState.context.page
   const numRecordsPerPage = paginationState.context.limit
 
-  const numPages = numRecords
-    ? Math.ceil(numRecords / numRecordsPerPage)
-    : undefined
+  const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
   const firstPageActive = currentPage === 1 && numPages !== 0
   const lastPageActive = currentPage === numPages && numPages !== 0
+  // if beyond page 1, show pagination widget even if there's only one true page, so user can navigate back
+  const showWidget = numPages > 1 || currentPage > 1
 
   return (
-    <div style={containerStyle} className={styles.defaultContainerStyles}>
-      <Button
-        className={styles.prevLabelStyles}
-        aria-label="Previous page"
-        disabled={firstPageActive}
-        onClick={() => send({ type: "PREVIOUS_PAGE" })}
-      >
-        <KeyboardArrowLeft />
-        <div>{prevLabel}</div>
-      </Button>
-      <Maybe condition={numPages !== undefined}>
+    <Maybe condition={showWidget}>
+      <div style={containerStyle} className={styles.defaultContainerStyles}>
+        <Button
+          className={styles.prevLabelStyles}
+          aria-label="Previous page"
+          disabled={firstPageActive}
+          onClick={() => send({ type: "PREVIOUS_PAGE" })}
+        >
+          <KeyboardArrowLeft />
+          <div>{prevLabel}</div>
+        </Button>
         <ChooseOne>
           <Cond condition={isMobile}>
             <PageButton
@@ -61,37 +61,36 @@ export const PaginationWidget = ({
             />
           </Cond>
           <Cond>
-            {numPages &&
-              buildPagedList(numPages, currentPage).map((page) =>
-                typeof page !== "number" ? (
-                  <PageButton
-                    key={`Page${page}`}
-                    activePage={currentPage}
-                    placeholder="..."
-                    disabled
-                  />
-                ) : (
-                  <PageButton
-                    key={`Page${page}`}
-                    activePage={currentPage}
-                    page={page}
-                    numPages={numPages}
-                    onPageClick={() => send({ type: "GO_TO_PAGE", page })}
-                  />
-                ),
-              )}
+            {buildPagedList(numPages, currentPage).map((page) =>
+              typeof page !== "number" ? (
+                <PageButton
+                  key={`Page${page}`}
+                  activePage={currentPage}
+                  placeholder="..."
+                  disabled
+                />
+              ) : (
+                <PageButton
+                  key={`Page${page}`}
+                  activePage={currentPage}
+                  page={page}
+                  numPages={numPages}
+                  onPageClick={() => send({ type: "GO_TO_PAGE", page })}
+                />
+              ),
+            )}
           </Cond>
         </ChooseOne>
-      </Maybe>
-      <Button
-        aria-label="Next page"
-        disabled={lastPageActive}
-        onClick={() => send({ type: "NEXT_PAGE" })}
-      >
-        <div>{nextLabel}</div>
-        <KeyboardArrowRight />
-      </Button>
-    </div>
+        <Button
+          aria-label="Next page"
+          disabled={lastPageActive}
+          onClick={() => send({ type: "NEXT_PAGE" })}
+        >
+          <div>{nextLabel}</div>
+          <KeyboardArrowRight />
+        </Button>
+      </div>
+    </Maybe>
   )
 }