Make mobile friendly

presleyp · presleyp · commit eae13a272ace · 2022-10-18T15:36:50.000Z
diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -1,7 +1,10 @@
 import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import { makeStyles, useTheme } from "@material-ui/core/styles"
+import useMediaQuery from "@material-ui/core/useMediaQuery"
 import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft"
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"
+import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
+import { Maybe } from "components/Conditionals/Maybe"
 import { CSSProperties } from "react"
 
 export type PaginationWidgetProps = {
@@ -74,6 +77,39 @@ export const buildPagedList = (
   return range(1, numPages)
 }
 
+interface PageButtonProps {
+  activePage: number
+  page: number
+  numPages: number
+  onPageClick?: (page: number) => void
+}
+
+const PageButton = ({
+  activePage,
+  page,
+  numPages,
+  onPageClick,
+}: PageButtonProps): JSX.Element => {
+  const styles = useStyles()
+  return (
+    <Button
+      className={
+        activePage === page
+          ? `${styles.pageButton} ${styles.activePageButton}`
+          : styles.pageButton
+      }
+      aria-label={`${page === activePage ? "Current Page" : ""} ${
+        page === numPages ? "Last Page" : ""
+      } Page${page}`}
+      name="Page button"
+      key={`Page${page}`}
+      onClick={() => onPageClick && onPageClick(page)}
+    >
+      <div>{page}</div>
+    </Button>
+  )
+}
+
 export const PaginationWidget = ({
   prevLabel,
   nextLabel,
@@ -88,7 +124,8 @@ export const PaginationWidget = ({
   const numPages = numRecords ? Math.ceil(numRecords / numRecordsPerPage) : 0
   const firstPageActive = activePage === 1 && numPages !== 0
   const lastPageActive = activePage === numPages && numPages !== 0
-
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const styles = useStyles()
 
   // No need to display any pagination if we know the number of pages is 1
@@ -107,30 +144,39 @@ export const PaginationWidget = ({
         <KeyboardArrowLeft />
         <div>{prevLabel}</div>
       </Button>
-      {numPages > 0 &&
-        buildPagedList(numPages, activePage).map((page) =>
-          typeof page !== "number" ? (
-            <Button className={styles.pageButton} key={`Page${page}`} disabled>
-              <div>...</div>
-            </Button>
-          ) : (
-            <Button
-              className={
-                activePage === page
-                  ? `${styles.pageButton} ${styles.activePageButton}`
-                  : styles.pageButton
-              }
-              aria-label={`${page === activePage ? "Current Page" : ""} ${
-                page === numPages ? "Last Page" : ""
-              } Page${page}`}
-              name="Page button"
-              key={`Page${page}`}
-              onClick={() => onPageClick && onPageClick(page)}
-            >
-              <div>{page}</div>
-            </Button>
-          ),
-        )}
+      <Maybe condition={numPages > 0}>
+        <ChooseOne>
+          <Cond
+            condition={isMobile}
+          >
+            <PageButton
+              activePage={activePage}
+              page={activePage}
+              numPages={numPages}
+            />
+          </Cond>
+          <Cond>
+            {buildPagedList(numPages, activePage).map((page) =>
+              typeof page !== "number" ? (
+                <Button
+                  className={styles.pageButton}
+                  key={`Page${page}`}
+                  disabled
+                >
+                  <div>...</div>
+                </Button>
+              ) : (
+                <PageButton
+                  activePage={activePage}
+                  page={page}
+                  numPages={numPages}
+                  onPageClick={onPageClick}
+                />
+              ),
+            )}
+          </Cond>
+        </ChooseOne>
+      </Maybe>
       <Button
         aria-label="Next page"
         disabled={lastPageActive}
