f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 07:42:39 +00:00
Code Wiki Activity

Update archive page to use pagination with page numbers and ellipses

Browse Source 
* Change the way pagination is handled on the archive page
* Display page links for 10 pages max
This commit is contained in:
Víctor Losada Hernández
2024-05-14 10:44:16 +02:00
parent 4b10686336
commit 021ac68400
2 changed files with 70 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
client/homebrew/pages/archivePage/archivePage.jsx
View File

@@ -100,16 +100,18 @@ const ArchivePage = createClass({
try { try {
this.setState({ searching: true, error: null }); this.setState({ searching: true, error: null });
await request.get( await request
`/api/archive?title=${title}&page=${page}&size=${size}&v3=${v3}&legacy=${legacy}` .get(
).then((response) => { `/api/archive?title=${title}&page=${page}&size=${size}&v3=${v3}&legacy=${legacy}`
if (response.ok) { )
this.updateStateWithBrews( .then((response) => {
response.body.brews, if (response.ok) {
page this.updateStateWithBrews(
); response.body.brews,
} page
}); );
}
});
} catch (error) { } catch (error) {
console.log('error at loadPage: ', error); console.log('error at loadPage: ', error);
this.setState({ error: `${error.response.status}` }); this.setState({ error: `${error.response.status}` });
@@ -123,19 +125,21 @@ const ArchivePage = createClass({
loadTotal: async function () { loadTotal: async function () {
console.log('running loadTotal'); console.log('running loadTotal');
const {title, v3, legacy} = this.state; const { title, v3, legacy } = this.state;
if (title !== '') { if (title !== '') {
try { try {
await request await request
.get( .get(
`/api/archive/total?title=${title}&v3=${v3}&legacy=${legacy}` `/api/archive/total?title=${title}&v3=${v3}&legacy=${legacy}`
).then((response) => { )
if (response.ok) { .then((response) => {
this.setState({totalBrews : response.body.totalBrews}); if (response.ok) {
} this.setState({
}); totalBrews: response.body.totalBrews,
});
}
});
} catch (error) { } catch (error) {
console.log('error at loadTotal: ', error); console.log('error at loadTotal: ', error);
this.setState({ error: `${error.response.status}` }); this.setState({ error: `${error.response.status}` });
@@ -148,7 +152,9 @@ const ArchivePage = createClass({
return ( return (
<Navbar> <Navbar>
<Nav.section> <Nav.section>
<Nav.item className="brewTitle">Archive: Search for brews</Nav.item> <Nav.item className="brewTitle">
Archive: Search for brews
</Nav.item>
</Nav.section> </Nav.section>
<Nav.section> <Nav.section>
<NewBrew /> <NewBrew />
@@ -246,28 +252,36 @@ const ArchivePage = createClass({
if (this.state.totalBrews) { if (this.state.totalBrews) {
const title = encodeURIComponent(this.state.title); const title = encodeURIComponent(this.state.title);
const size = parseInt(this.state.pageSize); const size = parseInt(this.state.pageSize);
const { page, totalBrews} = this.state; const { page, totalBrews } = this.state;
const totalPages = Math.ceil(totalBrews / size); const totalPages = Math.ceil(totalBrews / size);
const pages = new Array(totalPages).fill().map((_, index) => ( let startPage, endPage;
<a if (page <= 6) {
key={index} startPage = 1;
className={`pageNumber ${ endPage = Math.min(totalPages, 10);
page == index + 1 ? 'currentPage' : '' } else if (page + 4 >= totalPages) {
}`} startPage = Math.max(1, totalPages - 9);
href={`/archive?title=${title}&page=${ endPage = totalPages;
index + 1 } else {
}&size=${size}&v3=${v3}&legacy=${legacy}`} startPage = page - 5;
> endPage = page + 4;
{index + 1}
</a>
));
if (totalPages === null) {
return;
} }
const pagesAroundCurrent = new Array(endPage - startPage + 1)
.fill()
.map((_, index) => (
<a
key={startPage + index}
className={`pageNumber ${
page === startPage + index ? 'currentPage' : ''
}`}
onClick={() => this.loadPage(startPage + index, false)}
>
{startPage + index}
</a>
));
return ( return (
<div className="paginationControls"> <div className="paginationControls">
{page > 1 && ( {page > 1 && (
@@ -278,7 +292,13 @@ const ArchivePage = createClass({
&lt;&lt; &lt;&lt;
</button> </button>
)} )}
<ol className="pages">{pages}</ol> <ol className="pages">
{startPage > 1 && <a className="firstPage pageNumber">1 ...</a>}
{pagesAroundCurrent}
{endPage < totalPages && (
<a className="lastPage pageNumber">... {totalPages}</a>
)}
</ol>
{page < totalPages && ( {page < totalPages && (
<button <button
className="nextPage" className="nextPage"
@@ -289,18 +309,12 @@ const ArchivePage = createClass({
)} )}
</div> </div>
); );
} else { return;} } else {
return null;
}
}, },
renderFoundBrews() { renderFoundBrews() {
console.log('State when rendering:');
const stateWithoutBrewCollection = { ...this.state };
delete stateWithoutBrewCollection.brewCollection;
console.table(stateWithoutBrewCollection);
console.table(this.state.brewCollection);
const { title, brewCollection, page, totalPages, error, searching } = const { title, brewCollection, page, totalPages, error, searching } =
this.state; this.state;

7
client/homebrew/pages/archivePage/archivePage.less
View File

@@ -207,6 +207,13 @@ body {
text-decoration:underline; text-decoration:underline;
pointer-events:none; pointer-events:none;
} }
&.firstPage {
margin-right:-5px;
}
&.lastPage {
margin-left:-5px;
}
} }
} }
button { button {