From 60eeddda15405ec2b8af502416d87f4fb5748ec6 Mon Sep 17 00:00:00 2001
From: Frontendland <ferenc@frontendland.com>
Date: Fri, 20 Sep 2024 11:58:31 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Allow=20dot=20paginations=20to=20be?=
 =?UTF-8?q?=20created=20without=20pages=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/Pagination.astro  |  9 ++++++++-
 src/components/Pagination/Pagination.svelte | 13 ++++++++++---
 src/components/Pagination/Pagination.tsx    | 17 +++++++++++++++--
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/Pagination/Pagination.astro b/src/components/Pagination/Pagination.astro
index c303b71..e76dafb 100644
--- a/src/components/Pagination/Pagination.astro
+++ b/src/components/Pagination/Pagination.astro
@@ -41,6 +41,13 @@ const calculatedCurrentPage = currentPage
 const calculatedTotalPages = totalPages
     || pages?.length
     || 0
+
+const generatedPages = pages?.length
+    ? pages
+    : Array(totalPages || 0).fill(0).map((_, index) => ({
+        ...(index === 0 && { active: true }),
+        label: index + 1
+    }))
 ---
 
 <ul
@@ -51,7 +58,7 @@ const calculatedTotalPages = totalPages
 >
     {type === 'dots' ? (
         <Fragment>
-            {pages?.map(page => (
+            {generatedPages?.map(page => (
                 <li>
                     <button
                         data-active={page.active ? 'true' : undefined}
diff --git a/src/components/Pagination/Pagination.svelte b/src/components/Pagination/Pagination.svelte
index 1a14f76..313c04a 100644
--- a/src/components/Pagination/Pagination.svelte
+++ b/src/components/Pagination/Pagination.svelte
@@ -37,6 +37,13 @@
         || pages?.length
         || 0
 
+    const generatedPages = pages?.length
+        ? pages
+        : Array(totalPages || 0).fill(0).map((_, index) => ({
+            ...(index === 0 && { active: true }),
+            label: index + 1
+        }))
+
     const paginate = (to: string | number) => {
         if (to === 'prev') {
             calculatedCurrentPage = calculatedCurrentPage - 1
@@ -54,14 +61,14 @@
         })
     }
 
-    let calculatedCurrentPage = currentPage
+    $: calculatedCurrentPage = currentPage
         || (pages?.findIndex(page => page.active) || -1) + 1
         || 1
 </script>
 
 <ul class={classes}>
-    {#if type === 'dots' && pages?.length}
-        {#each pages as _, index}
+    {#if type === 'dots' && generatedPages?.length}
+        {#each generatedPages as _, index}
             <li>
                 <button
                     data-active={calculatedCurrentPage === index + 1 ? 'true' : null}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index dd6123c..596b3a6 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import type { ReactPaginationProps } from './pagination'
 
 import Button from '../Button/Button.tsx'
@@ -45,6 +45,13 @@ const Pagination = ({
         || pages?.length
         || 0
 
+    const generatedPages = pages?.length
+        ? pages
+        : Array(totalPages || 0).fill(0).map((_, index) => ({
+            ...(index === 0 && { active: true }),
+            label: index + 1
+        }))
+
     const paginate = (to: string | number) => {
         let currentPage = calculatedCurrentPage
 
@@ -66,11 +73,17 @@ const Pagination = ({
         })
     }
 
+    useEffect(() => {
+        if (currentPage) {
+            setCalculatedCurrentPage(currentPage)
+        }
+    }, [currentPage])
+
     return (
         <ul className={classes}>
             {type === 'dots' ? (
                 <React.Fragment>
-                    {pages?.map((_, index) => (
+                    {generatedPages?.map((_, index) => (
                         <li key={index}>
                             <button
                                 data-active={calculatedCurrentPage === index + 1 ? 'true' : null}