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

change renderPagination order of operations and fix pagination not loading properly

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-05-21 11:57:48 +02:00
parent 21244fba58
commit f9d19c75b2
1 changed files with 91 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,7 +99,9 @@ const ArchivePage = createClass({
if (title !== '') { if (title !== '') {
try { try {
this.setState({ searching: true, error: null }); this.setState({ searching: true, error: null });
const response = await request.get(`/api/archive?title=${title}&page=${page}&size=${size}&v3=${v3}&legacy=${legacy}`); const response = await request.get(
`/api/archive?title=${title}&page=${page}&size=${size}&v3=${v3}&legacy=${legacy}`
);
if (response.ok) { if (response.ok) {
this.updateStateWithBrews(response.body.brews, page); this.updateStateWithBrews(response.body.brews, page);
} }
@@ -119,6 +121,9 @@ const ArchivePage = createClass({
const { title, v3, legacy } = this.state; const { title, v3, legacy } = this.state;
if (title !== '') { if (title !== '') {
this.setState({
totalBrews: null,
});
try { try {
await request await request
.get( .get(
@@ -178,7 +183,10 @@ const ArchivePage = createClass({
placeholder="v3 Reference Document" placeholder="v3 Reference Document"
/> />
</label> </label>
<small>Tip! you can use <code>-</code> to negate words, and <code>"word"</code> to specify an exact string.</small> <small>
Tip! you can use <code>-</code> to negate words, and{' '}
<code>"word"</code> to specify an exact string.
</small>
<label> <label>
Results per page Results per page
<input <input
@@ -235,79 +243,92 @@ const ArchivePage = createClass({
/> />
</button> </button>
</div> </div>
<small>Remember, you can only search brews with this tool if they are published</small> <small>
Remember, you can only search brews with this tool if they
are published
</small>
</div> </div>
); );
}, },
renderPaginationControls() { renderPaginationControls: function () {
if (this.state.totalBrews) { if (!this.state.totalBrews) {
const size = parseInt(this.state.pageSize);
const { page, totalBrews } = this.state;
const totalPages = Math.ceil(totalBrews / size);
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 && (
<button
className="previousPage"
onClick={() => this.loadPage(page - 1, false)}
>
&lt;&lt;
</button>
)}
<ol className="pages">
{startPage > 1 && <a className="firstPage pageNumber" onClick={() => this.loadPage(1, false)}>1 ...</a>}
{pagesAroundCurrent}
{endPage < totalPages && (
<a className="lastPage pageNumber" onClick={() => this.loadPage(totalPages, false)}>... {totalPages}</a>
)}
</ol>
{page < totalPages && (
<button
className="nextPage"
onClick={() => this.loadPage(page + 1, false)}
>
&gt;&gt;
</button>
)}
</div>
);
} else {
return null; return null;
} }
const size = parseInt(this.state.pageSize);
const { page, totalBrews } = this.state;
const totalPages = Math.ceil(totalBrews / size);
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 && (
<button
className="previousPage"
onClick={() => this.loadPage(page - 1, false)}
>
&lt;&lt;
</button>
)}
<ol className="pages">
{startPage > 1 && (
<a
className="firstPage pageNumber"
onClick={() => this.loadPage(1, false)}
>
1 ...
</a>
)}
{pagesAroundCurrent}
{endPage < totalPages && (
<a
className="lastPage pageNumber"
onClick={() => this.loadPage(totalPages, false)}
>
... {totalPages}
</a>
)}
</ol>
{page < totalPages && (
<button
className="nextPage"
onClick={() => this.loadPage(page + 1, false)}
>
&gt;&gt;
</button>
)}
</div>
);
}, },
renderFoundBrews() { renderFoundBrews() {
const { title, brewCollection, error, searching } = const { title, brewCollection, error, searching } = this.state;
this.state;
if (searching) { if (searching) {
return ( return (
@@ -333,10 +354,12 @@ const ArchivePage = createClass({
errorMessage = "404 - We didn't find any brew"; errorMessage = "404 - We didn't find any brew";
break; break;
case '503': case '503':
errorMessage = "503 - Service Unavailable, try again later, sorry."; errorMessage =
'503 - Service Unavailable, try again later, sorry.';
break; break;
case '500': case '500':
errorMessage = "500 - We don't know what happened, go ahead and contact the mods or report as a mistake."; errorMessage =
"500 - We don't know what happened, go ahead and contact the mods or report as a mistake.";
break; break;
default: default:
errorMessage = 'An unexpected error occurred'; errorMessage = 'An unexpected error occurred';