f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-27 05:02:43 +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 {
this.setState({ searching: true, error: null });
await request.get(
`/api/archive?title=${title}&page=${page}&size=${size}&v3=${v3}&legacy=${legacy}`
).then((response) => {
if (response.ok) {
this.updateStateWithBrews(
response.body.brews,
page
);
}
});
await request
.get(
`/api/archive?title=${title}&page=${page}&size=${size}&v3=${v3}&legacy=${legacy}`
)
.then((response) => {
if (response.ok) {
this.updateStateWithBrews(
response.body.brews,
page
);
}
});
} catch (error) {
console.log('error at loadPage: ', error);
this.setState({ error: `${error.response.status}` });
@@ -123,19 +125,21 @@ const ArchivePage = createClass({
loadTotal: async function () {
console.log('running loadTotal');
const {title, v3, legacy} = this.state;
const { title, v3, legacy } = this.state;
if (title !== '') {
try {
await request
.get(
`/api/archive/total?title=${title}&v3=${v3}&legacy=${legacy}`
).then((response) => {
if (response.ok) {
this.setState({totalBrews : response.body.totalBrews});
}
});
.get(
`/api/archive/total?title=${title}&v3=${v3}&legacy=${legacy}`
)
.then((response) => {
if (response.ok) {
this.setState({
totalBrews: response.body.totalBrews,
});
}
});
} catch (error) {
console.log('error at loadTotal: ', error);
this.setState({ error: `${error.response.status}` });
@@ -148,7 +152,9 @@ const ArchivePage = createClass({
return (
<Navbar>
<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>
<NewBrew />
@@ -246,28 +252,36 @@ const ArchivePage = createClass({
if (this.state.totalBrews) {
const title = encodeURIComponent(this.state.title);
const size = parseInt(this.state.pageSize);
const { page, totalBrews} = this.state;
const { page, totalBrews } = this.state;
const totalPages = Math.ceil(totalBrews / size);
const pages = new Array(totalPages).fill().map((_, index) => (
<a
key={index}
className={`pageNumber ${
page == index + 1 ? 'currentPage' : ''
}`}
href={`/archive?title=${title}&page=${
index + 1
}&size=${size}&v3=${v3}&legacy=${legacy}`}
>
{index + 1}
</a>
));
if (totalPages === null) {
return;
let startPage, endPage;
if (page <= 6) {
startPage = 1;
endPage = Math.min(totalPages, 10);
} else if (page + 4 >= totalPages) {
startPage = Math.max(1, totalPages - 9);
endPage = totalPages;
} else {
startPage = page - 5;
endPage = page + 4;
}
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 (
<div className="paginationControls">
{page > 1 && (
@@ -278,7 +292,13 @@ const ArchivePage = createClass({
&lt;&lt;
</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 && (
<button
className="nextPage"
@@ -289,18 +309,12 @@ const ArchivePage = createClass({
)}
</div>
);
} else { return;}
} else {
return null;
}
},
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 } =
this.state;

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

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