Extract utils

coder · presleyp · Oct 28, 2022 · Oct 21, 2022 · Oct 21, 2022 · Oct 21, 2022
commit a1303b0ef37fa19e9bfea775fe7f81b77004348d
diff --git a/site/src/components/PaginationWidget/PaginationWidget.tsx b/site/src/components/PaginationWidget/PaginationWidget.tsx
@@ -7,6 +7,7 @@ import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { Maybe } from "components/Conditionals/Maybe"
 import { CSSProperties } from "react"
 import { PageButton } from "./PageButton"
+import { buildPagedList, DEFAULT_RECORDS_PER_PAGE } from "./utils"
 
 export type PaginationWidgetProps = {
   prevLabel: string
@@ -20,64 +21,6 @@ export type PaginationWidgetProps = {
   containerStyle?: CSSProperties
 }
 
-/**
- * Generates a ranged array with an option to step over values.
- * Shamelessly stolen from:
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range
- */
-const range = (start: number, stop: number, step = 1) =>
-  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)
-
-export const DEFAULT_RECORDS_PER_PAGE = 25
-// Number of pages to the left or right of the current page selection.
-const PAGE_NEIGHBORS = 1
-// Number of pages displayed for cases where there are multiple ellipsis showing. This can be
-// thought of as the minimum number of page numbers to display when multiple ellipsis are showing.
-const PAGES_TO_DISPLAY = PAGE_NEIGHBORS * 2 + 3
-// Total page blocks(page numbers or ellipsis) displayed, including the maximum number of ellipsis (2).
-// This gives us maximum number of 7 page blocks to be displayed when the page neighbors value is 1.
-const NUM_PAGE_BLOCKS = PAGES_TO_DISPLAY + 2
-
-/**
- * Builds a list of pages based on how many pages exist and where the user is in their navigation of those pages.
- * List result is used to from the buttons that make up the Pagination Widget
- */
-export const buildPagedList = (
-  numPages: number,
-  activePage: number,
-): (string | number)[] => {
-  if (numPages > NUM_PAGE_BLOCKS) {
-    let pages = []
-    const leftBound = activePage - PAGE_NEIGHBORS
-    const rightBound = activePage + PAGE_NEIGHBORS
-    const beforeLastPage = numPages - 1
-    const startPage = leftBound > 2 ? leftBound : 2
-    const endPage = rightBound < beforeLastPage ? rightBound : beforeLastPage
-
-    pages = range(startPage, endPage)
-
-    const singleSpillOffset = PAGES_TO_DISPLAY - pages.length - 1
-    const hasLeftOverflow = startPage > 2
-    const hasRightOverflow = endPage < beforeLastPage
-    const leftOverflowPage = "left"
-    const rightOverflowPage = "right"
-
-    if (hasLeftOverflow && !hasRightOverflow) {
-      const extraPages = range(startPage - singleSpillOffset, startPage - 1)
-      pages = [leftOverflowPage, ...extraPages, ...pages]
-    } else if (!hasLeftOverflow && hasRightOverflow) {
-      const extraPages = range(endPage + 1, endPage + singleSpillOffset)
-      pages = [...pages, ...extraPages, rightOverflowPage]
-    } else if (hasLeftOverflow && hasRightOverflow) {
-      pages = [leftOverflowPage, ...pages, rightOverflowPage]
-    }
-
-    return [1, ...pages, numPages]
-  }
-
-  return range(1, numPages)
-}
-
 export const PaginationWidget = ({
   prevLabel,
   nextLabel,

diff --git a/...s/PaginationWidget/buildPagedList.test.ts → ...components/PaginationWidget/utils.test.ts b/...s/PaginationWidget/buildPagedList.test.ts → ...components/PaginationWidget/utils.test.ts
@@ -1,4 +1,4 @@
-import { buildPagedList } from "./PaginationWidget"
+import { buildPagedList } from "./utils"
 
 describe("unit/PaginationWidget", () => {
   describe("buildPagedList", () => {

diff --git a/site/src/components/PaginationWidget/utils.ts b/site/src/components/PaginationWidget/utils.ts
@@ -0,0 +1,58 @@
+
+/**
+ * Generates a ranged array with an option to step over values.
+ * Shamelessly stolen from:
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#sequence_generator_range
+ */
+const range = (start: number, stop: number, step = 1) =>
+  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step)
+
+export const DEFAULT_RECORDS_PER_PAGE = 25
+// Number of pages to the left or right of the current page selection.
+const PAGE_NEIGHBORS = 1
+// Number of pages displayed for cases where there are multiple ellipsis showing. This can be
+// thought of as the minimum number of page numbers to display when multiple ellipsis are showing.
+const PAGES_TO_DISPLAY = PAGE_NEIGHBORS * 2 + 3
+// Total page blocks(page numbers or ellipsis) displayed, including the maximum number of ellipsis (2).
+// This gives us maximum number of 7 page blocks to be displayed when the page neighbors value is 1.
+const NUM_PAGE_BLOCKS = PAGES_TO_DISPLAY + 2
+
+/**
+ * Builds a list of pages based on how many pages exist and where the user is in their navigation of those pages.
+ * List result is used to from the buttons that make up the Pagination Widget
+ */
+export const buildPagedList = (
+  numPages: number,
+  activePage: number,
+): (string | number)[] => {
+  if (numPages > NUM_PAGE_BLOCKS) {
+    let pages = []
+    const leftBound = activePage - PAGE_NEIGHBORS
+    const rightBound = activePage + PAGE_NEIGHBORS
+    const beforeLastPage = numPages - 1
+    const startPage = leftBound > 2 ? leftBound : 2
+    const endPage = rightBound < beforeLastPage ? rightBound : beforeLastPage
+
+    pages = range(startPage, endPage)
+
+    const singleSpillOffset = PAGES_TO_DISPLAY - pages.length - 1
+    const hasLeftOverflow = startPage > 2
+    const hasRightOverflow = endPage < beforeLastPage
+    const leftOverflowPage = "left"
+    const rightOverflowPage = "right"
+
+    if (hasLeftOverflow && !hasRightOverflow) {
+      const extraPages = range(startPage - singleSpillOffset, startPage - 1)
+      pages = [leftOverflowPage, ...extraPages, ...pages]
+    } else if (!hasLeftOverflow && hasRightOverflow) {
+      const extraPages = range(endPage + 1, endPage + singleSpillOffset)
+      pages = [...pages, ...extraPages, rightOverflowPage]
+    } else if (hasLeftOverflow && hasRightOverflow) {
+      pages = [leftOverflowPage, ...pages, rightOverflowPage]
+    }
+
+    return [1, ...pages, numPages]
+  }
+
+  return range(1, numPages)
+}