pagesize as input

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) {
+	handleChange(inputName, e) {
-		this.setState({ title: e.target.value });
+
+		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 (
 			<div className='brewLookup'>
-				<h2>Brew Lookup</h2>
+				<h2 className='formTitle'>Brew Lookup</h2>
-				<label>Title of the brew</label>
+				<div className="formContents">
-				<input
+					<label>
-					type='text'
+						Title of the brew 
-					value={this.state.title}
+						<input
-					onChange={this.handleChange}
+							type='text'
-					onKeyDown={(e)=>{
+							name='title'
-						if(e.key === 'Enter') {
+							value={this.state.title}
-							this.handleChange(e);
+							onChange={(e) => this.handleChange('title', e)}
-							this.loadPage(1);
+                    		onKeyDown={(e) => {
-						}
+                        		if (e.key === 'Enter') {
-					}}
+                            		this.handleChange('title', e);
-					placeholder='v3 Reference Document'
+                            		this.loadPage(1);
-				/>
+                        		}
-				{/* In the future, we should be able to filter the results by adding tags.
+                    		}}
-            <label>Tags</label><input type='text' value={this.state.query} placeholder='add a tag to filter'/>
+							placeholder='v3 Reference Document'
-            <input type="checkbox" id="v3" /><label>v3 only</label>
+						/>
-            */}
+					</label>
+				
+					<label>
+						Results per page
+						<input
+							type="number"
+							min="6"step="2"max="30"
+							name="pageSize"
+							onChange={(e) => this.handleChange('pageSize', e)}
+						/>
+					</label>
+					{/* In the future, we should be able to filter the results by adding tags.
+            		<label>Tags</label><input type='text' value={this.state.query} placeholder='add a tag to filter'/>
+            		<input type="checkbox" id="v3" /><label>v3 only</label>
+            		*/}
 
-				<button onClick={()=>{ this.handleChange({ target: { value: this.state.title } }); this.loadPage(1); }}>
+					<button
-					<i
+						className='search'
-						className={cx('fas', {
+						onClick={()=>{ 
+							this.handleChange('title', { target: { value: this.state.title } });
+							this.loadPage(1);
+						}}>
+						Search
+						<i
+							className={cx('fas', {
 							'fa-search'          : !this.state.searching,
 							'fa-spin fa-spinner' : this.state.searching,
-						})}
+							})}
-					/>
+						/>
-				</button>
+					</button>
+				</div>
 			</div>
 		);
 	},

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 {
+                        i {
-                        margin-left: 20px;
+                            margin-left: 10px;
+                        }
                     }
                 }
 

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 = {