diff --git a/client/homebrew/pages/archivePage/archivePage.jsx b/client/homebrew/pages/archivePage/archivePage.jsx
index a644ff449..bf6446f3c 100644
--- a/client/homebrew/pages/archivePage/archivePage.jsx
+++ b/client/homebrew/pages/archivePage/archivePage.jsx
@@ -24,85 +24,95 @@ const ArchivePage = createClass({
return {
title : this.props.query.title || '',
brewCollection : null,
+ page : 1,
+ totalPages : 1,
searching : false,
error : null,
- limit : '',
};
},
componentDidMount : function() {
- this.lookup();
+ this.loadPage(1);
},
-
-
handleChange(e) {
this.setState({ title: e.target.value });
},
- lookup() {
- this.setState({ searching: true, error: null });
- request
- .get(`/archive/${this.state.title}`)
- .then((res) => this.setState({ brewCollection: res.body.brews }, this.setState({ limit: res.body.message}, this.setState({ error: null}))))
- .catch((err) => this.setState({ error: err }))
- .finally(() => this.setState({ searching: false }));
+
+ updateStateWithBrews : (brews, page, totalPages) => {
+ this.setState({
+ brewCollection: brews,
+ page: page,
+ totalPages: totalPages,
+ searching: false
+ });
+ },
+ loadPage: async function(pageNumber) {
+ try {
+ this.updateUrl();
+ this.setState({ searching: true, error: null });
+ const title = encodeURIComponent(this.state.title);
+ const response = await fetch(`/archive?title=${title}&page=${pageNumber}`);
+
+
+ if (response.ok) {
+ const res = await response.json();
+ this.updateStateWithBrews(res.brews, pageNumber, res.totalPages);
+ }
+
+ } catch (error) {
+ console.log("LoadPage error: " + error);
+ }
},
updateUrl: function() {
const url = new URL(window.location.href);
const urlParams = new URLSearchParams(url.search);
- // Clear existing parameters
- urlParams.delete('sort');
- urlParams.delete('dir');
- urlParams.delete('filter');
-
- // Set the pathname to '/archive/?query'
+
+ // Set the title and page parameters
urlParams.set('title', this.state.title);
-
- url.search = urlParams;
+ urlParams.set('page', this.state.page);
+
+ url.search = urlParams.toString(); // Convert URLSearchParams to string
window.history.replaceState(null, null, url);
-},
+ },
+
renderFoundBrews() {
- const brews = this.state.brewCollection;
- console.log('brews: ',brews);
+ const { title, brewCollection, page, totalPages, error } = this.state;
- if (this.state.title == '') {
- return(
-
-
Whenever you want, just start typing...
-
- );
- }
+ if (title === '') {return (Whenever you want, just start typing...
);}
- if (this.state.error !== null) {
- return(
+ if (error !== null) { return (
-
-
I'm sorry, your request didn't work
-
-
Your search is not enough specific, too many brews meet this criteria for us to forward them.
+
I'm sorry, your request didn't work
+
Your search is not specific enough. Too many brews meet this criteria for us to display them.
+
+ );}
+
+ if (!brewCollection || brewCollection.length === 0) { return (
+
+
We haven't found brews meeting your request.
+
+ );}
+
+ return (
+
+
{`Brews Found: ${brewCollection.length}`}
+
+ {brewCollection.map((brew, index) => (
+
+ ))}
+
+ {page > 1 && (
+
+ )}
+ Page {page}
+ {page < totalPages && (
+
+ )}
- );
- }
-
- if (!brews || brews.length === 0) {
- return(
-
-
We haven't found brews meeting your request.
-
-
- );
- }
- this.updateUrl();
- return
- {brews.length} Brews Found
- {this.state.limit}
- {brews.map((brew, index) => (
-
- ))}
-
-
-
+ );
},
+
renderForm: function () {
return (
@@ -115,7 +125,7 @@ const ArchivePage = createClass({
onKeyDown={(e) => {
if (e.key === 'Enter') {
this.handleChange(e);
- this.lookup();
+ this.loadPage(1);
}
}}
placeholder='v3 Reference Document'
@@ -125,7 +135,7 @@ const ArchivePage = createClass({
*/}
-