diff --git a/client/homebrew/pages/archivePage/archivePage.jsx b/client/homebrew/pages/archivePage/archivePage.jsx index f82488af3..07496f244 100644 --- a/client/homebrew/pages/archivePage/archivePage.jsx +++ b/client/homebrew/pages/archivePage/archivePage.jsx @@ -25,6 +25,7 @@ const ArchivePage = createClass({ title : this.props.query.title || '', brewCollection : null, page : 1, + pageSize : 10, totalPages : 1, totalBrews : 0, searching : false, @@ -34,8 +35,9 @@ const ArchivePage = createClass({ componentDidMount : function() { }, - handleChange(e) { - this.setState({ title: e.target.value }); + handleChange(inputName, e) { + + this.setState({ [inputName]: e.target.value }); }, updateStateWithBrews : function (brews, page, totalPages, totalBrews) { @@ -53,7 +55,8 @@ const ArchivePage = createClass({ try { this.setState({ searching: true, error: null }); const title = encodeURIComponent(this.state.title); - await request.get(`/api/archive?title=${title}&page=${page}`) + const size = parseInt(this.state.pageSize); + await request.get(`/api/archive?title=${title}&page=${page}&size=${size}`) .then((response)=>{ if(response.ok) { this.updateStateWithBrews(response.body.brews, page, response.body.totalPages, response.body.totalBrews); @@ -140,33 +143,54 @@ const ArchivePage = createClass({ renderForm : function () { return (
-

Brew Lookup

- - { - if(e.key === 'Enter') { - this.handleChange(e); - this.loadPage(1); - } - }} - placeholder='v3 Reference Document' - /> - {/* In the future, we should be able to filter the results by adding tags. - - - */} +

Brew Lookup

+
+ + + + {/* In the future, we should be able to filter the results by adding tags. + + + */} - + })} + /> + +
); }, diff --git a/client/homebrew/pages/archivePage/archivePage.less b/client/homebrew/pages/archivePage/archivePage.less index 0f51d3a4a..cfe085662 100644 --- a/client/homebrew/pages/archivePage/archivePage.less +++ b/client/homebrew/pages/archivePage/archivePage.less @@ -48,20 +48,35 @@ body { background: white; &.form .brewLookup { + position: relative; padding: 50px; - h2 { + .formTitle { + color:black; font-size: 30px; border-bottom: 2px solid; - margin-block: 20px; + margin: 20px 0; + text-align: center; } + .formContents { + display: flex; + flex-direction: column; + } label { - margin-right: 10px; + margin: 10px 0; } + input { + margin: 0 10px; + } + .search { + position:absolute; + right:10px; + bottom:20px; - input+button { - margin-left: 20px; + i { + margin-left: 10px; + } } } diff --git a/server/archive.api.js b/server/archive.api.js index 2e2ecb711..dcc45a977 100644 --- a/server/archive.api.js +++ b/server/archive.api.js @@ -8,9 +8,10 @@ const archive = { findBrews : async (req, res, next)=>{ try { const title = req.query.title || ''; - const page = parseInt(req.query.page) || 1; + const page = Math.max(parseInt(req.query.page) || 1, 1); console.log('trying page ', page); - const pageSize = 10; // Set a default page size + const minPageSize = 6; + const pageSize = Math.max(parseInt(req.query.size) || 10, minPageSize); const skip = (page - 1) * pageSize; const titleQuery = {