From 9fc8af65536f5f0fe80b429c63ab3ab555d04a5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Tue, 13 Feb 2024 10:48:19 +0100
Subject: [PATCH] pagination controls  render separately

---
 .../pages/archivePage/archivePage.jsx         | 36 +++++++++++----
 .../pages/archivePage/archivePage.less        | 45 ++++++++++++++-----
 2 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/client/homebrew/pages/archivePage/archivePage.jsx b/client/homebrew/pages/archivePage/archivePage.jsx
index 84a26f84c..a29824202 100644
--- a/client/homebrew/pages/archivePage/archivePage.jsx
+++ b/client/homebrew/pages/archivePage/archivePage.jsx
@@ -75,6 +75,32 @@ const ArchivePage = createClass({
 		window.history.replaceState(null, null, url);
 	},
 
+	renderPaginationControls() {
+		const { title, brewCollection, page, totalPages, error } = this.state;
+		const pages = new Array(totalPages).fill().map((_, index) => (
+			<li key={index} className={`pageNumber ${page === index + 1 ? 'currentPage' : ''}`} onClick={() => this.loadPage(index+1)}>{index + 1}</li>
+		));
+	
+		return (
+		  	<div className="paginationControls">
+				{page > 1 && (
+			  		<button
+						className="previousPage"
+						onClick={() => this.loadPage(page - 1)}
+			  		>
+						&lt;&lt;
+			  		</button>
+				)}
+				<ol className='pages'>{pages}</ol>
+				{page < totalPages && (
+			  		<button className="nextPage" onClick={() => this.loadPage(page + 1)}>
+						&gt;&gt;
+			  		</button>
+				)}
+		  </div>
+		);
+	},
+
 	renderFoundBrews() {
 		const { title, brewCollection, page, totalPages, error } = this.state;
 
@@ -102,15 +128,7 @@ const ArchivePage = createClass({
 				{brewCollection.map((brew, index)=>(
 					<BrewItem brew={brew} key={index} reportError={this.props.reportError} />
 				))}
-				<div className='paginationControls'>
-					{page > 1 && (
-						<button className='previousPage' onClick={()=>this.loadPage(page - 1)}>Previous Page</button>
-					)}
-					<span className='currentPage'>Page {page}</span>
-					{page < totalPages && (
-						<button className='nextPage' onClick={()=>this.loadPage(page + 1)}>Next Page</button>
-					)}
-				</div>
+				{this.renderPagination()}
 			</div>
 		);
 	},
diff --git a/client/homebrew/pages/archivePage/archivePage.less b/client/homebrew/pages/archivePage/archivePage.less
index ec0460958..7e10c2ef3 100644
--- a/client/homebrew/pages/archivePage/archivePage.less
+++ b/client/homebrew/pages/archivePage/archivePage.less
@@ -166,28 +166,49 @@ body {
                             position: absolute;
                             left: 50%;
                             translate: -50%;
-                            width: 500px;
+                            width: auto;
                             display: grid;
+                            place-items: center;
                             grid-template-areas: "previousPage currentPage nextPage";
+                            grid-template-columns: 50px 1fr 50px;
                             
-                            .currentPage {
+                            .pages {
                                 grid-area: currentPage;
                                 height: 100%;
                                 width: 100%;
-                                display: block;
+                                display: flex;
+                                justify-content:space-evenly;
                                 text-align: center;
-                                color: white;
-                                font-family: Open Sans;
-                                font-weight: 900;
                                 padding: 5px 8px;
+
+                                .pageNumber {
+                                    color: white;
+                                    font-family: Open Sans;
+                                    font-weight: 900;
+                                    text-underline-position: under;
+                                    margin-inline:10px;
+                                    cursor: pointer;
+
+                                    &.currentPage {
+                                        color:gold;
+                                        text-decoration:underline;
+                                        pointer-events:none;
+                                    }
+                                }
+                            }
+                            button {
+                                width:max-content;
+                                border-radius:5px;
+
+                                &.previousPage {
+                                    grid-area: previousPage;
+                                }
+
+                                &.nextPage {
+                                    grid-area: nextPage;
+                                }
                             }
                             
-                            button.previousPage {
-                                grid-area: previousPage;
-                            }
-                            button.nextPage {
-                                grid-area: nextPage;
-                            }
                         }
 
                         hr {