diff --git a/client/homebrew/pages/archivePage/archivePage.jsx b/client/homebrew/pages/archivePage/archivePage.jsx
index 37923dd5d..9f5068a28 100644
--- a/client/homebrew/pages/archivePage/archivePage.jsx
+++ b/client/homebrew/pages/archivePage/archivePage.jsx
@@ -1,197 +1,203 @@
require('./archivePage.less');
-const React = require('react');
+const React = require('react');
const createClass = require('create-react-class');
-const _ = require('lodash');
-const cx = require('classnames');
+const _ = require('lodash');
+const cx = require('classnames');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
+const Nav = require('naturalcrit/nav/nav.jsx');
+const Navbar = require('../../navbar/navbar.jsx');
const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account = require('../../navbar/account.navitem.jsx');
-const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx');
+const Account = require('../../navbar/account.navitem.jsx');
+const NewBrew = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem = require('../../navbar/help.navitem.jsx');
+const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx');
//const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
const request = require('../../utils/request-middleware.js');
const ArchivePage = createClass({
- displayName : 'ArchivePage',
- getDefaultProps : function () {
- return {};
- },
- getInitialState : function () {
- return {
- //request
- title : this.props.query.title || '',
- //tags : {},
- legacy : `${this.props.query.legacy === 'false' ? false : true }`,
- v3 : `${this.props.query.v3 === 'false' ? false : true }`,
- pageSize : this.props.query.size || 10,
- page : parseInt(this.props.query.page) || 1,
+ displayName: 'ArchivePage',
+ getDefaultProps: function () {
+ return {};
+ },
+ getInitialState: function () {
+ return {
+ //request
+ title: this.props.query.title || '',
+ //tags : {},
+ legacy: `${this.props.query.legacy === 'false' ? false : true}`,
+ v3: `${this.props.query.v3 === 'false' ? false : true}`,
+ pageSize: this.props.query.size || 10,
+ page: parseInt(this.props.query.page) || 1,
- //response
- brewCollection : null,
- totalPages : null,
- totalBrews : null,
+ //response
+ brewCollection: null,
+ totalPages: null,
+ totalBrews: null,
- searching : false,
- error : null,
- };
- },
- componentDidMount : function() {
- if (this.state.title !== '') {
- this.loadPage(this.state.page, false);
- }
-
- },
+ searching: false,
+ error: null,
+ };
+ },
+ componentDidMount: function () {
+ if (this.state.title !== '') {
+ this.loadPage(this.state.page, false);
+ }
+ },
- updateStateWithBrews : function (brews, page, totalPages, totalBrews) {
- this.setState({
- brewCollection : brews || null,
- page : parseInt(page) || 1,
- totalPages : totalPages || 1,
- totalBrews : totalBrews,
- searching : false
- });
- },
+ updateStateWithBrews: function (brews, page, totalPages, totalBrews) {
+ this.setState({
+ brewCollection: brews || null,
+ page: parseInt(page) || 1,
+ totalPages: totalPages || 1,
+ totalBrews: totalBrews,
+ searching: false,
+ });
+ },
- updateStateWithForm : function() {
- const title = document.getElementById( 'title' ).value || "";
- const size = document.getElementById( 'size' ).value || 10;
- const page = 1;
- const v3 = document.getElementById('v3').checked;
- const legacy = document.getElementById('legacy').checked;
+ updateUrl: function (title, page, size, v3, legacy) {
+ const url = new URL(window.location.href);
+ const urlParams = new URLSearchParams(url.search);
- this.setState({
- title: title,
- pageSize: size,
- v3: v3,
- legacy: legacy
- });
- this.updateUrl(title, page, size, v3, legacy);
- },
+ //clean all params
+ urlParams.delete('title');
+ urlParams.delete('page');
+ urlParams.delete('size');
+ urlParams.delete('v3');
+ urlParams.delete('legacy');
+ urlParams.set('title', title);
+ urlParams.set('page', page);
+ urlParams.set('size', size);
+ urlParams.set('v3', v3);
+ urlParams.set('legacy', legacy);
- updateUrl : function(title, page, size, v3, legacy) {
- const url = new URL(window.location.href);
- const urlParams = new URLSearchParams(url.search);
+ url.search = urlParams.toString(); // Convert URLSearchParams to string
+ window.history.replaceState(null, null, url);
+ },
- //clean all params
- urlParams.delete('title');
- urlParams.delete('page');
- urlParams.delete('size');
- urlParams.delete('v3');
- urlParams.delete('legacy');
-
- urlParams.set('title', title);
- urlParams.set('page', page);
- urlParams.set('size', size);
- urlParams.set('v3', v3);
- urlParams.set('legacy', legacy);
-
+ loadPage: async function (page, update) {
+ //load form data directly
+ const title = document.getElementById('title').value || '';
+ const size = document.getElementById('size').value || 10;
+ const v3 = document.getElementById('v3').checked;
+ const legacy = document.getElementById('legacy').checked;
- url.search = urlParams.toString(); // Convert URLSearchParams to string
- window.history.replaceState(null, null, url);
- },
+ // Update state with form data for later, only when first page
+ if (update === true) {
+ this.setState({
+ title: title,
+ pageSize: size,
+ v3: v3,
+ legacy: legacy,
+ });
+ this.updateUrl(title, page, size, v3, legacy);
+ }
- loadPage : async function(page, update) {
- if(update === true) {
- this.updateStateWithForm();
- };
- if (title !== '') {
- try {
- this.setState({ searching: true, error: null });
-
- const title = encodeURIComponent(this.state.title);
- const size = parseInt(this.state.pageSize);
- const {legacy, v3} = this.state;
- 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, response.body.totalPages, response.body.totalBrews);
- }
- });
- } catch (error) {
- this.setState({ error: `${error.response.status}` })
- this.updateStateWithBrews([], 1, 1, 0);
- }
- console.log(!this.state.brewCollection || brewCollection.length === 0);
- if(!this.state.brewCollection) {
- this.setState({ error: '404'});
- }
- }
-
- },
+ if (title !== '') {
+ try {
+ this.setState({ searching: true, error: null });
- renderNavItems : function () {
- return (
-
-
- Archive: Search for brews
-
-
-
-
- );
- },
+ 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,
+ response.body.totalPages,
+ response.body.totalBrews
+ );
+ }
+ });
+ } catch (error) {
+ this.setState({ error: `${error.response.status}` });
+ this.updateStateWithBrews([], 1, 1, 0);
+ }
+ console.log('a',
+ !this.state.brewCollection || brewCollection.length === 0
+ );
+ if (!this.state.brewCollection) {
+ this.setState({ error: '404' });
+ }
+ }
- renderForm : function () {
- return (
-
+ );
+ },
- renderPaginationControls() {
- const title = encodeURIComponent(this.state.title);
- const size = parseInt(this.state.pageSize);
- const {page, totalPages, legacy, v3} = this.state;
- const pages = new Array(totalPages).fill().map((_, index) => (
- {index + 1}
- ));
-
- if(totalPages === null) {return;}
-
- return (
-
- {page > 1 && (
-
this.loadPage(page - 1, false)}
- >
- <<
-
- )}
-
{pages}
- {page < totalPages && (
-
this.loadPage(page + 1, false)}>
- >>
-
- )}
-
+ {index + 1}
+
+ ));
- renderFoundBrews() {
- console.table(this.state);
- const { title, brewCollection, page, totalPages, error, searching } = this.state;
-
- if(searching) {
- return (
-
-
Searching
-
- );
- };
+ if (totalPages === null) {
+ return;
+ }
+ return (
+
+ {page > 1 && (
+
this.loadPage(page - 1, false)}
+ >
+ <<
+
+ )}
+
{pages}
+ {page < totalPages && (
+
this.loadPage(page + 1, false)}
+ >
+ >>
+
+ )}
+
Whenever you want, just start typing... );}
+ if (searching) {
+ return (
+
+
Searching
+
+ );
+ }
- if (error) {
- console.log('render Error: ', error);
- let errorMessage;
- switch (error.errorCode) {
- case '404':
- errorMessage = "404 - We didn't find any brew";
- break;
- case '503':
- errorMessage = ' 503 - Your search is not specific enough. Too many brews meet this criteria for us to display them.';
- break;
- case '500':
- errorMessage = "500 - We don't know what happened."
- default:
- errorMessage = 'An unexpected error occurred';
- }
-
- return (
-
-
Error: {errorMessage}
-
- );
- };
+ if (title === '') {
+ return (
+
+
Whenever you want, just start typing...
+
+ );
+ }
- if (!brewCollection || brewCollection.length === 0) {
- return (
-
-
No brews found
-
- );
- };
-
- return (
-
- Brews found: {this.state.totalBrews}
- {brewCollection.map((brew, index)=>(
-
- );
- },
+ if (error) {
+ console.log('render Error: ', error);
+ let errorMessage;
+ switch (error.errorCode) {
+ case '404':
+ errorMessage = "404 - We didn't find any brew";
+ break;
+ case '503':
+ errorMessage =
+ ' 503 - Your search is not specific enough. Too many brews meet this criteria for us to display them.';
+ break;
+ case '500':
+ errorMessage = "500 - We don't know what happened.";
+ default:
+ errorMessage = 'An unexpected error occurred';
+ }
- render : function () {
- return (
-
-
-
- {this.renderNavItems()}
+ return (
+
+
Error: {errorMessage}
+
+ );
+ }
-
-
-
Welcome to the Archive
-
-
-
{this.renderForm()}
-
-
-
Your results, my lordship
-
- {this.renderFoundBrews()}
-
-
-
-
+
No brews found
+
+ );
+ }
+
+ return (
+
+
+ Brews found: {this.state.totalBrews}
+
+ {brewCollection.map((brew, index) => (
+
+ );
+ },
+
+ render: function () {
+ return (
+
+
+
+ {this.renderNavItems()}
+
+
+
+
Welcome to the Archive
+
+
+
+ {this.renderForm()}
+
+
+
+
Your results, my lordship
+
+ {this.renderFoundBrews()}
+
+
+
+