From 478bb7e23a6087a40fbfc596442535b86ababc6c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 11:04:42 +0200
Subject: [PATCH 1/9] feat: initialized new pagination component (WIP)

---
 src/lib/components/pagination.svelte          | 130 ++++++++++++------
 .../console/[project]/users/index.svelte      |   4 +-
 2 files changed, 89 insertions(+), 45 deletions(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 921d6f2418..f5ba08911d 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -1,54 +1,98 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-
-    export let limit: number;
+    const dispatch = createEventDispatcher();
+    export let totalItems: number;
+    export let pageSize: number;
     export let offset: number;
-    export let sum: number;
 
-    const dispatch = createEventDispatcher();
+    const totalPages = Math.ceil(totalItems / pageSize);
+    let currentPage = offset / pageSize + 1;
 
-    const next = () => {
-        if (offset + limit > sum) {
-            offset = sum;
-        } else {
-            offset += limit;
+    function handleOptionClick(page) {
+        if (currentPage !== page) {
+            offset = pageSize * page - 1;
+            currentPage = page;
+            dispatch('change');
         }
-        dispatch('change');
-    };
-
-    const prev = () => {
-        if (offset - limit < 0) {
-            offset = 0;
-        } else {
-            offset -= limit;
+    }
+    function handleButtonPage(direction) {
+        if (direction === 'next' && currentPage < totalPages) {
+            currentPage += 1;
+            offset = pageSize * currentPage - 1;
+            dispatch('change');
+        } else if (direction === 'prev' && currentPage > 1) {
+            currentPage -= 1;
+            offset = pageSize * currentPage - 1;
+            dispatch('change');
+        }
+    }
+
+    let pages = pagination(currentPage, totalPages);
+
+    function pagination(current, total) {
+        let delta = 2,
+            left = current - delta,
+            right = current + delta + 1,
+            range = [],
+            rangeWithDots = [],
+            l;
+
+        for (let i = 1; i <= total; i++) {
+            if (i == 1 || i == total || (i >= left && i < right)) {
+                range.push(i);
+            }
+        }
+
+        for (let i of range) {
+            if (l) {
+                if (i - l === 2) {
+                    rangeWithDots.push(l + 1);
+                } else if (i - l !== 1) {
+                    rangeWithDots.push('...');
+                }
+            }
+            rangeWithDots.push(i);
+            l = i;
         }
-        dispatch('change');
-    };
 
-    $: noPrev = offset === 0;
-    $: noNext = sum - limit < offset;
-    $: currentPage = offset / limit + 1;
-    $: totalPages = Math.ceil(sum / limit);
+        return rangeWithDots;
+    }
 </script>
 
-{#if sum >= limit}
-    <nav class="pagination is-center">
-        <button
-            on:click={prev}
-            disabled={noPrev}
-            class:is-disabled={noPrev}
-            class="button is-only-icon"
-            aria-label="previous page">
-            <span class="icon-left-open" aria-hidden="true" />
-        </button>
-        <span class="pagination-info">{currentPage} / {totalPages}</span>
-        <button
-            on:click={next}
-            disabled={noNext}
-            class:is-disabled={noNext}
-            class="button is-only-icon"
+<nav class="pagination">
+    <ol class="pagination-list is-only-desktop">
+        <span
+            on:click={() => handleButtonPage('prev')}
+            class:is-disabled={currentPage <= 1}
+            class="button is-text "
+            aria-label="prev page">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+            <span class="text">Prev</span>
+        </span>
+        {#each pages as page}
+            {#if typeof page === 'number'}
+                <li class="pagination-item">
+                    <button
+                        class="button is-text"
+                        on:click={() => handleOptionClick(page)}
+                        class:is-disabled={currentPage === page}
+                        aria-label="page">
+                        <span class="text">{page}</span>
+                    </button>
+                </li>
+            {:else}
+                <li class="li is-text /*u-hide*/" aria-label="show prev 5 pages">
+                    <span class="icon">...</span>
+                </li>
+            {/if}
+        {/each}
+        <span
+            on:click={() => handleButtonPage('next')}
+            class:is-disabled={currentPage === totalPages}
+            class="button is-text"
             aria-label="next page">
-            <span class="icon-right-open" aria-hidden="true" />
-        </button>
-    </nav>
-{/if}
+            <span class="text">Next</span>
+            <span class="icon-cheveron-right" aria-hidden="true" />
+        </span>
+    </ol>
+</nav>
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index f1d113d382..c5fd4b87a4 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -24,7 +24,7 @@
     let search = '';
     let showCreate = false;
     let offset = 0;
-    const limit = 25;
+    const limit = 1;
 
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 30, 30).toString();
@@ -81,7 +81,7 @@
                     {/each}
                 </TableBody>
             </Table>
-            <Pagination {limit} bind:offset sum={response.total} />
+            <Pagination bind:offset pageSize={limit} totalItems={response.total} />
         {:else if search}
             <Empty>
                 <svelte:fragment slot="header"

From 670de0285f2a5f2bf4cc47b786737dd09fefc6a1 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 12:41:26 +0200
Subject: [PATCH 2/9] fix: fixed pagination problem

---
 src/lib/components/pagination.svelte            | 10 ++++++----
 src/routes/console/[project]/users/index.svelte |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index f5ba08911d..da3cd06df6 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -6,11 +6,13 @@
     export let offset: number;
 
     const totalPages = Math.ceil(totalItems / pageSize);
-    let currentPage = offset / pageSize + 1;
+    let currentPage = Math.floor(offset / pageSize + 1);
+    console.log(currentPage);
 
     function handleOptionClick(page) {
         if (currentPage !== page) {
-            offset = pageSize * page - 1;
+            offset = pageSize * (page - 1);
+            console.log(offset);
             currentPage = page;
             dispatch('change');
         }
@@ -18,11 +20,11 @@
     function handleButtonPage(direction) {
         if (direction === 'next' && currentPage < totalPages) {
             currentPage += 1;
-            offset = pageSize * currentPage - 1;
+            offset = pageSize * (currentPage - 1);
             dispatch('change');
         } else if (direction === 'prev' && currentPage > 1) {
             currentPage -= 1;
-            offset = pageSize * currentPage - 1;
+            offset = pageSize * (currentPage - 1);
             dispatch('change');
         }
     }
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index c5fd4b87a4..0ffce9c58a 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -24,7 +24,7 @@
     let search = '';
     let showCreate = false;
     let offset = 0;
-    const limit = 1;
+    const limit = 5;
 
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 30, 30).toString();

From 4c2be3ca4a2cd428a70cb6dd0e25a0f187601437 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 13:30:26 +0200
Subject: [PATCH 3/9] fix: pagination small css, html & type fixes

---
 src/lib/components/pagination.svelte | 44 +++++++++++++---------------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index da3cd06df6..5c42fe9e32 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -7,17 +7,15 @@
 
     const totalPages = Math.ceil(totalItems / pageSize);
     let currentPage = Math.floor(offset / pageSize + 1);
-    console.log(currentPage);
 
-    function handleOptionClick(page) {
+    function handleOptionClick(page: number) {
         if (currentPage !== page) {
             offset = pageSize * (page - 1);
-            console.log(offset);
             currentPage = page;
             dispatch('change');
         }
     }
-    function handleButtonPage(direction) {
+    function handleButtonPage(direction: string) {
         if (direction === 'next' && currentPage < totalPages) {
             currentPage += 1;
             offset = pageSize * (currentPage - 1);
@@ -31,7 +29,7 @@
 
     let pages = pagination(currentPage, totalPages);
 
-    function pagination(current, total) {
+    function pagination(current: number, total: number) {
         let delta = 2,
             left = current - delta,
             right = current + delta + 1,
@@ -56,28 +54,28 @@
             rangeWithDots.push(i);
             l = i;
         }
-
         return rangeWithDots;
     }
 </script>
 
 <nav class="pagination">
+    <span
+        on:click={() => handleButtonPage('prev')}
+        class:is-disabled={currentPage <= 1}
+        class="button is-text "
+        aria-label="prev page">
+        <span class="icon-cheveron-left" aria-hidden="true" />
+        <span class="text">Prev</span>
+    </span>
     <ol class="pagination-list is-only-desktop">
-        <span
-            on:click={() => handleButtonPage('prev')}
-            class:is-disabled={currentPage <= 1}
-            class="button is-text "
-            aria-label="prev page">
-            <span class="icon-cheveron-left" aria-hidden="true" />
-            <span class="text">Prev</span>
-        </span>
         {#each pages as page}
             {#if typeof page === 'number'}
                 <li class="pagination-item">
                     <button
-                        class="button is-text"
+                        class="button"
                         on:click={() => handleOptionClick(page)}
                         class:is-disabled={currentPage === page}
+                        class:is-text={currentPage !== page}
                         aria-label="page">
                         <span class="text">{page}</span>
                     </button>
@@ -88,13 +86,13 @@
                 </li>
             {/if}
         {/each}
-        <span
-            on:click={() => handleButtonPage('next')}
-            class:is-disabled={currentPage === totalPages}
-            class="button is-text"
-            aria-label="next page">
-            <span class="text">Next</span>
-            <span class="icon-cheveron-right" aria-hidden="true" />
-        </span>
     </ol>
+    <span
+        on:click={() => handleButtonPage('next')}
+        class:is-disabled={currentPage === totalPages}
+        class="button is-text"
+        aria-label="next page">
+        <span class="text">Next</span>
+        <span class="icon-cheveron-right" aria-hidden="true" />
+    </span>
 </nav>

From 3edfa31fe14ab8c6333da3d40b6be4815c6f9b4c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 14:57:06 +0200
Subject: [PATCH 4/9] Update src/lib/components/pagination.svelte

Co-authored-by: Torsten Dittmann <torsten.dittmann@googlemail.com>
---
 src/lib/components/pagination.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 5c42fe9e32..1432830aab 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -81,7 +81,7 @@
                     </button>
                 </li>
             {:else}
-                <li class="li is-text /*u-hide*/" aria-label="show prev 5 pages">
+                <li class="li is-text">
                     <span class="icon">...</span>
                 </li>
             {/if}

From 6fe4a1623d00c46613fb114db610ad6a22e8e736 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 15:02:13 +0200
Subject: [PATCH 5/9] fix: restored old variables names to avoid errors

---
 src/lib/components/pagination.svelte          | 95 ++++++++++---------
 .../console/[project]/users/index.svelte      |  2 +-
 2 files changed, 50 insertions(+), 47 deletions(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 1432830aab..f1b1d319be 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -1,28 +1,29 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
-    const dispatch = createEventDispatcher();
-    export let totalItems: number;
-    export let pageSize: number;
+    export let sum: number;
+    export let limit: number;
     export let offset: number;
 
-    const totalPages = Math.ceil(totalItems / pageSize);
-    let currentPage = Math.floor(offset / pageSize + 1);
+    const dispatch = createEventDispatcher();
+    const totalPages = Math.ceil(sum / limit);
+    let currentPage = Math.floor(offset / limit + 1);
 
     function handleOptionClick(page: number) {
         if (currentPage !== page) {
-            offset = pageSize * (page - 1);
+            offset = limit * (page - 1);
             currentPage = page;
             dispatch('change');
         }
     }
+
     function handleButtonPage(direction: string) {
         if (direction === 'next' && currentPage < totalPages) {
             currentPage += 1;
-            offset = pageSize * (currentPage - 1);
+            offset = limit * (currentPage - 1);
             dispatch('change');
         } else if (direction === 'prev' && currentPage > 1) {
             currentPage -= 1;
-            offset = pageSize * (currentPage - 1);
+            offset = limit * (currentPage - 1);
             dispatch('change');
         }
     }
@@ -58,41 +59,43 @@
     }
 </script>
 
-<nav class="pagination">
-    <span
-        on:click={() => handleButtonPage('prev')}
-        class:is-disabled={currentPage <= 1}
-        class="button is-text "
-        aria-label="prev page">
-        <span class="icon-cheveron-left" aria-hidden="true" />
-        <span class="text">Prev</span>
-    </span>
-    <ol class="pagination-list is-only-desktop">
-        {#each pages as page}
-            {#if typeof page === 'number'}
-                <li class="pagination-item">
-                    <button
-                        class="button"
-                        on:click={() => handleOptionClick(page)}
-                        class:is-disabled={currentPage === page}
-                        class:is-text={currentPage !== page}
-                        aria-label="page">
-                        <span class="text">{page}</span>
-                    </button>
-                </li>
-            {:else}
-                <li class="li is-text">
-                    <span class="icon">...</span>
-                </li>
-            {/if}
-        {/each}
-    </ol>
-    <span
-        on:click={() => handleButtonPage('next')}
-        class:is-disabled={currentPage === totalPages}
-        class="button is-text"
-        aria-label="next page">
-        <span class="text">Next</span>
-        <span class="icon-cheveron-right" aria-hidden="true" />
-    </span>
-</nav>
+{#if totalPages > 1}
+    <nav class="pagination">
+        <span
+            on:click={() => handleButtonPage('prev')}
+            class:is-disabled={currentPage <= 1}
+            class="button is-text "
+            aria-label="prev page">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+            <span class="text">Prev</span>
+        </span>
+        <ol class="pagination-list is-only-desktop">
+            {#each pages as page}
+                {#if typeof page === 'number'}
+                    <li class="pagination-item">
+                        <button
+                            class="button"
+                            on:click={() => handleOptionClick(page)}
+                            class:is-disabled={currentPage === page}
+                            class:is-text={currentPage !== page}
+                            aria-label="page">
+                            <span class="text">{page}</span>
+                        </button>
+                    </li>
+                {:else}
+                    <li class="li is-text">
+                        <span class="icon">...</span>
+                    </li>
+                {/if}
+            {/each}
+        </ol>
+        <span
+            on:click={() => handleButtonPage('next')}
+            class:is-disabled={currentPage === totalPages}
+            class="button is-text"
+            aria-label="next page">
+            <span class="text">Next</span>
+            <span class="icon-cheveron-right" aria-hidden="true" />
+        </span>
+    </nav>
+{/if}
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index 0ee3cd2048..1c23e43a3f 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -90,7 +90,7 @@
             </Table>
             <div class="u-flex common-section u-main-space-between">
                 <p class="text">Total results: {response.total}</p>
-                <Pagination bind:offset pageSize={limit} totalItems={response.total} />
+                <Pagination bind:offset {limit} sum={response.total} />
             </div>
         {:else if search}
             <Empty>

From 9c68e72cbf7084372307791ba78c45ce1150c356 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 15:28:19 +0200
Subject: [PATCH 6/9] fix: refactored pagination function

---
 src/lib/components/pagination.svelte | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index f1b1d319be..8079e22cb0 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -35,8 +35,7 @@
             left = current - delta,
             right = current + delta + 1,
             range = [],
-            rangeWithDots = [],
-            l;
+            rangeWithDots = [];
 
         for (let i = 1; i <= total; i++) {
             if (i == 1 || i == total || (i >= left && i < right)) {
@@ -44,17 +43,13 @@
             }
         }
 
-        for (let i of range) {
-            if (l) {
-                if (i - l === 2) {
-                    rangeWithDots.push(l + 1);
-                } else if (i - l !== 1) {
-                    rangeWithDots.push('...');
-                }
+        rangeWithDots = range.reduce((prev, current, index) => {
+            if (current - prev[index - 1] > delta) {
+                prev.push('...');
             }
-            rangeWithDots.push(i);
-            l = i;
-        }
+            prev.push(current);
+            return prev;
+        }, []);
         return rangeWithDots;
     }
 </script>

From 1685b9a5fd3cfefbabe5dfa1d42084f69ad3eb23 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 15:49:19 +0200
Subject: [PATCH 7/9] Update src/lib/components/pagination.svelte

Co-authored-by: Torsten Dittmann <torsten.dittmann@googlemail.com>
---
 src/lib/components/pagination.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index 8079e22cb0..e685167c34 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -59,7 +59,7 @@
         <span
             on:click={() => handleButtonPage('prev')}
             class:is-disabled={currentPage <= 1}
-            class="button is-text "
+            class="button is-text"
             aria-label="prev page">
             <span class="icon-cheveron-left" aria-hidden="true" />
             <span class="text">Prev</span>

From 574f96bd6c2d947741fc76ac5dcccaaabdcec82d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 17:02:27 +0200
Subject: [PATCH 8/9] test: updated test, added number button click test

---
 tests/unit/components/pagination.test.ts | 65 +++++++++++++++++-------
 1 file changed, 48 insertions(+), 17 deletions(-)

diff --git a/tests/unit/components/pagination.test.ts b/tests/unit/components/pagination.test.ts
index 43fedb4c3f..53b93c74fa 100644
--- a/tests/unit/components/pagination.test.ts
+++ b/tests/unit/components/pagination.test.ts
@@ -4,11 +4,11 @@ import { Pagination } from '../../../src/lib/components';
 
 test('shows controls', () => {
     const { getByLabelText } = render(Pagination, {
-        limit: 0,
+        limit: 100,
         offset: 0,
-        sum: 100
+        sum: 150
     });
-    expect(getByLabelText('previous page')).toBeInTheDocument();
+    expect(getByLabelText('prev page')).toBeInTheDocument();
     expect(getByLabelText('next page')).toBeInTheDocument();
 });
 
@@ -19,8 +19,8 @@ test('pagination - first page', () => {
         sum: 100
     });
 
-    expect(getByLabelText('previous page')).toBeDisabled();
-    expect(getByLabelText('next page')).not.toBeDisabled();
+    expect(getByLabelText('prev page')).toHaveClass('is-disabled');
+    expect(getByLabelText('next page')).not.toHaveClass('is-disabled');
 });
 
 test('pagination - last page', () => {
@@ -30,8 +30,8 @@ test('pagination - last page', () => {
         sum: 30
     });
 
-    expect(getByLabelText('previous page')).not.toBeDisabled();
-    expect(getByLabelText('next page')).toBeDisabled();
+    expect(getByLabelText('prev page')).not.toHaveClass('is-disabled');
+    expect(getByLabelText('next page')).toHaveClass('is-disabled');
 });
 
 test('pagination - forward', async () => {
@@ -41,9 +41,9 @@ test('pagination - forward', async () => {
         sum: 60
     });
 
-    const back = getByLabelText('previous page');
+    const back = getByLabelText('prev page');
     const forth = getByLabelText('next page');
-    expect(back).toBeDisabled();
+    expect(back).toHaveClass('is-disabled');
 
     await fireEvent.click(forth);
     expect(component.offset).toEqual(25);
@@ -52,8 +52,8 @@ test('pagination - forward', async () => {
     expect(component.offset).toEqual(50);
 
     await fireEvent.click(forth);
-    expect(component.offset).toEqual(60);
-    expect(forth).toBeDisabled();
+    expect(component.offset).toEqual(50);
+    expect(forth).toHaveClass('is-disabled');
 });
 
 test('pagination - backwards', async () => {
@@ -63,19 +63,50 @@ test('pagination - backwards', async () => {
         sum: 60
     });
 
-    const back = getByLabelText('previous page');
+    const back = getByLabelText('prev page');
     const forth = getByLabelText('next page');
-    expect(forth).toBeDisabled();
+    expect(forth).toHaveClass('is-disabled');
 
     await fireEvent.click(back);
-    expect(component.offset).toEqual(30);
+    expect(component.offset).toEqual(25);
 
     await fireEvent.click(back);
-    expect(component.offset).toEqual(5);
+    expect(component.offset).toEqual(0);
 
     await fireEvent.click(back);
     expect(component.offset).toEqual(0);
-    expect(back).toBeDisabled();
+    expect(back).toHaveClass('is-disabled');
+});
+
+test('pagination - number button click', async () => {
+    const { getByText, getAllByLabelText, component } = render(Pagination, {
+        limit: 25,
+        offset: 0,
+        sum: 60
+    });
+
+    const buttons = getAllByLabelText('page');
+    const [button1, button2, button3] = buttons;
+
+    const one = getByText('1');
+    const two = getByText('2');
+    const three = getByText('3');
+    expect(button1).toHaveClass('is-disabled');
+
+    await fireEvent.click(two);
+    expect(component.offset).toEqual(25);
+    expect(button1).not.toHaveClass('is-disabled');
+    expect(button2).toHaveClass('is-disabled');
+
+    await fireEvent.click(three);
+    expect(component.offset).toEqual(50);
+    expect(button2).not.toHaveClass('is-disabled');
+    expect(button3).toHaveClass('is-disabled');
+
+    await fireEvent.click(one);
+    expect(component.offset).toEqual(0);
+    expect(button1).toHaveClass('is-disabled');
+    expect(button3).not.toHaveClass('is-disabled');
 });
 
 test('shows no controls', () => {
@@ -85,6 +116,6 @@ test('shows no controls', () => {
         sum: 10
     });
 
-    expect(queryByLabelText('previous page')).not.toBeInTheDocument();
+    expect(queryByLabelText('prev page')).not.toBeInTheDocument();
     expect(queryByLabelText('next page')).not.toBeInTheDocument();
 });

From f712bff340756bb4ca18fdef710babc2b7589928 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 20 May 2022 17:02:55 +0200
Subject: [PATCH 9/9] fix: prev & next are now button not span

---
 src/lib/components/pagination.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index e685167c34..e38adcf1ad 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -56,14 +56,14 @@
 
 {#if totalPages > 1}
     <nav class="pagination">
-        <span
+        <button
             on:click={() => handleButtonPage('prev')}
             class:is-disabled={currentPage <= 1}
             class="button is-text"
             aria-label="prev page">
             <span class="icon-cheveron-left" aria-hidden="true" />
             <span class="text">Prev</span>
-        </span>
+        </button>
         <ol class="pagination-list is-only-desktop">
             {#each pages as page}
                 {#if typeof page === 'number'}
@@ -84,13 +84,13 @@
                 {/if}
             {/each}
         </ol>
-        <span
+        <button
             on:click={() => handleButtonPage('next')}
             class:is-disabled={currentPage === totalPages}
             class="button is-text"
             aria-label="next page">
             <span class="text">Next</span>
             <span class="icon-cheveron-right" aria-hidden="true" />
-        </span>
+        </button>
     </nav>
 {/if}