refactor(pagination): move logic into custom hook

Author: fabiobiondi

packages/kit-headless/src/components/pagination/pagination.tsx

@@ -1,3 +1,4 @@
+import { usePagination } from '@/packages/kit-headless/src/components/pagination/use-pagination';
 import type { PropFunction } from '@builder.io/qwik';
 import { component$, Slot, useSignal, useTask$ } from '@builder.io/qwik';
 
@@ -14,50 +15,6 @@ import { component$, Slot, useSignal, useTask$ } from '@builder.io/qwik';
  * square
  */
 
-// example generatePaginationArray(20, 6, 1, 1);
-function generatePaginationArray(
-  count: number,
-  defaultPage: number,
-  siblingCount = 1,
-  boundaryCount = 1,
-) {
-  const pageCount = Math.min(count, Math.max(1, count));
-  const page = Math.min(Math.max(1, defaultPage), pageCount);
-
-  const range = (start: number, end: number) =>
-    Array.from({ length: end - start + 1 }, (_, i) => start + i);
-
-  const leftBoundary = range(1, Math.min(boundaryCount, pageCount));
-  const rightBoundary = range(pageCount - boundaryCount + 1, pageCount);
-  const innerRange = range(
-    Math.max(page - siblingCount, boundaryCount + 1),
-    Math.min(page + siblingCount, pageCount - boundaryCount),
-  );
-
-  const buttons = [...leftBoundary, ...innerRange, ...rightBoundary];
-
-  // Add "..." for gaps between buttons
-  const paginationArray = buttons.reduce(
-    (result: (number | string)[], button: number, index, array) => {
-      if (index === 0) {
-        result.push(button);
-      } else {
-        const prevButton = array[index - 1];
-        if (button - prevButton === 2) {
-          result.push(prevButton + 1);
-        } else if (button - prevButton > 2) {
-          result.push('...');
-        }
-        result.push(button);
-      }
-      return result;
-    },
-    [],
-  );
-
-  return paginationArray;
-}
-
 export interface PaginationProps {
   class?: string;
   selectedPage: number;
@@ -89,15 +46,12 @@ export const Pagination = component$<PaginationProps>(
   }) => {
     const visibleItems = useSignal<(string | number)[]>([]);
 
-    useTask$(({ track }) => {
-      track(() => [selectedPage, totalPages, siblingCount, boundaryCount]);
-      visibleItems.value = generatePaginationArray(
-        totalPages,
-        selectedPage,
-        siblingCount,
-        boundaryCount,
-      );
-    });
+    visibleItems.value = usePagination(
+      totalPages,
+      selectedPage,
+      siblingCount,
+      boundaryCount,
+    );
 
     return (
       <nav

packages/kit-headless/src/components/pagination/use-pagination.ts

@@ -0,0 +1,57 @@
+// example: usePagination(20, 6, 1, 1);
+
+export function usePagination(
+  count: number,
+  defaultPage: number,
+  siblingCount = 1,
+  boundaryCount = 1,
+) {
+  const pageCount = Math.min(count, Math.max(1, count));
+  const page = Math.min(Math.max(1, defaultPage), pageCount);
+
+  const range = (start: number, end: number) =>
+    Array.from({ length: end - start + 1 }, (_, i) => start + i);
+
+  const leftBoundary = range(1, Math.min(boundaryCount, pageCount));
+  const rightBoundary = range(pageCount - boundaryCount + 1, pageCount);
+  const innerRange = range(
+    Math.max(page - siblingCount, boundaryCount + 1),
+    Math.min(page + siblingCount, pageCount - boundaryCount),
+  );
+
+  const buttons = [...leftBoundary, ...innerRange, ...rightBoundary];
+
+  // Add "..." for gaps between buttons
+  const paginationArray = buttons.reduce(
+    (result: (number | string)[], button: number, index, array) => {
+      if (index === 0) {
+        result.push(button);
+      } else {
+        const prevButton = array[index - 1];
+        if (button - prevButton === 2) {
+          result.push(prevButton + 1);
+        } else if (button - prevButton > 2) {
+          result.push('...');
+        }
+        result.push(button);
+      }
+      return result;
+    },
+    [],
+  );
+
+  return paginationArray;
+}
+
+/*
+useTask$(({ track }) => {
+  track(() => [selectedPage, totalPages, siblingCount, boundaryCount]);
+
+  visibleItems.value = generatePaginationArray(
+    totalPages,
+    selectedPage,
+    siblingCount,
+    boundaryCount,
+  );
+});
+*/