initial commit

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -18,6 +18,9 @@ const request = require('../../utils/request-middleware.js');
 const VaultPage = (props)=>{
 	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
 
+	const [sortState, setSort] = useState(props.query.sort || 'title');
+	const [dirState, setdir] = useState(props.query.dir || 'asc');
+
 	//Response state
 	const [brewCollection, setBrewCollection] = useState(null);
 	const [totalBrews, setTotalBrews]         = useState(null);
@@ -34,7 +37,10 @@ const VaultPage = (props)=>{
 
 	useEffect(()=>{
 		disableSubmitIfFormInvalid();
-		loadPage(pageState, true);
+		const initialSort = props.query.sort || 'title';
+		const initialDir = props.query.dir || 'asc';
+		const initialSorting = `${initialSort}/${initialDir}`;
+		loadPage(pageState, true, initialSorting);
 	}, []);
 
 	const updateStateWithBrews = (brews, page)=>{
@@ -43,7 +49,7 @@ const VaultPage = (props)=>{
 		setSearching(false);
 	};
 
-	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page)=>{
+	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page, sort, dir)=>{
 		const url = new URL(window.location.href);
 		const urlParams = new URLSearchParams(url.search);
 
@@ -53,21 +59,25 @@ const VaultPage = (props)=>{
 		urlParams.set('v3', v3Value);
 		urlParams.set('legacy', legacyValue);
 		urlParams.set('page', page);
+		urlParams.set('sort', sort);
+		urlParams.set('dir', dir);
 
 		url.search = urlParams.toString();
 		window.history.replaceState(null, '', url.toString());
 	};
 
-	const performSearch = async (title, author, count, v3, legacy, page)=>{
+	const performSearch = async (title, author, count, v3, legacy, page, sort, dir)=>{
-		updateUrl(title, author, count, v3, legacy, page);
+		updateUrl(title, author, count, v3, legacy, page, sort, dir);
 
-		const response = await request.get(
+		const response = await request
-			`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}`
+			.get(
-		).catch((error)=>{
+				`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}&sort=${sort}&dir=${dir}`
-			console.log('error at loadPage: ', error);
+			)
-			setError(error);
+			.catch((error)=>{
-			updateStateWithBrews([], 1);
+				console.log('error at loadPage: ', error);
-		});
+				setError(error);
+				updateStateWithBrews([], 1);
+			});
 
 		if(response.ok)
 			updateStateWithBrews(response.body.brews, page);
@@ -88,9 +98,8 @@ const VaultPage = (props)=>{
 			setTotalBrews(response.body.totalBrews);
 	};
 
-	const loadPage = async (page, updateTotal)=>{
+	const loadPage = async (page, updateTotal, sort)=>{
-		if(!validateForm())
+		if(!validateForm()) return;
-			return;
 
 		setSearching(true);
 		setError(null);
@@ -100,8 +109,11 @@ const VaultPage = (props)=>{
 		const count  = countRef.current.value || 10;
 		const v3     = v3Ref.current.checked != false;
 		const legacy = legacyRef.current.checked != false;
+		const sortOption = sort && sort.split('/')[0] || 'title';
+		const dir = sort && sort.split('/')[1] || 'asc';
+		const pageProp = page || 1;
 
-		performSearch(title, author, count, v3, legacy, page);
+		performSearch(title, author, count, v3, legacy, pageProp, sortOption, dir);
 
 		if(updateTotal)
 			loadTotal(title, author, v3, legacy);
@@ -248,6 +260,45 @@ const VaultPage = (props)=>{
 		</div>
 	);
 
+	const renderSortOption = ( optionTitle, optionValue)=>{
+		const oppositeDir = dirState === 'asc' ? 'desc' : 'asc';
+
+		return (
+			<div
+			className={`sort-option ${
+                sortState === optionValue ? `active ${oppositeDir}` : ''
+            }`}
+			>
+				<button onClick={() => {
+					setSort(optionValue);
+					setdir(oppositeDir);
+					loadPage(1, false, `${optionValue}/${oppositeDir}`)
+					}}>
+                {optionTitle}
+            </button>
+            {sortState === optionValue && (
+                <i
+                    className={`sortDir fas ${
+                        dirState === 'asc' ? 'fa-sort-up' : 'fa-sort-down'
+                    }`}
+                ></i>
+            )}
+			</div>
+		);
+	};
+
+	const renderSortBar = ()=>{
+		
+		return (
+			<div className='sort-container'>
+				{renderSortOption('Title', 'title', props.query.dir)}
+				{renderSortOption('Created Date', 'createdAt', props.query.dir)}
+				{renderSortOption('Updated Date', 'updatedAt', props.query.dir)}
+				{renderSortOption('Views', 'views', props.query.dir)}
+			</div>
+		);
+	};
+
 	const renderPaginationControls = ()=>{
 		if(!totalBrews) return null;
 
@@ -274,7 +325,7 @@ const VaultPage = (props)=>{
 					className={`pageNumber ${
 						pageState === startPage + index ? 'currentPage' : ''
 					}`}
-					onClick={()=>loadPage(startPage + index, false)}
+					onClick={()=>loadPage(startPage + index)}
 				>
 					{startPage + index}
 				</a>
@@ -284,7 +335,7 @@ const VaultPage = (props)=>{
 			<div className='paginationControls'>
 				<button
 					className='previousPage'
-					onClick={()=>loadPage(pageState - 1, false)}
+					onClick={()=>loadPage(pageState - 1)}
 					disabled={pageState === startPage}
 				>
 					<i className='fa-solid fa-chevron-left'></i>
@@ -293,7 +344,7 @@ const VaultPage = (props)=>{
 					{startPage > 1 && (
 						<a
 							className='pageNumber firstPage'
-							onClick={()=>loadPage(1, false)}
+							onClick={()=>loadPage()}
 						>
 							1 ...
 						</a>
@@ -302,7 +353,7 @@ const VaultPage = (props)=>{
 					{endPage < totalPages && (
 						<a
 							className='pageNumber lastPage'
-							onClick={()=>loadPage(totalPages, false)}
+							onClick={()=>loadPage(totalPages)}
 						>
 							... {totalPages}
 						</a>
@@ -310,7 +361,7 @@ const VaultPage = (props)=>{
 				</ol>
 				<button
 					className='nextPage'
-					onClick={()=>loadPage(pageState + 1, false)}
+					onClick={()=>loadPage(pageState + 1)}
 					disabled={pageState === totalPages}
 				>
 					<i className='fa-solid fa-chevron-right'></i>
@@ -385,6 +436,7 @@ const VaultPage = (props)=>{
 					<div className='form dataGroup'>{renderForm()}</div>
 
 					<div className='resultsContainer dataGroup'>
+						{renderSortBar()}
 						{renderFoundBrews()}
 					</div>
 				</SplitPane>

client/homebrew/pages/vaultPage/vaultPage.less

@@ -6,8 +6,8 @@
 	*:not(input) { user-select : none; }
 
 	.content {
+		height     : 100%;
 		background : #2C3E50;
-		height: 100%;
 
 		.dataGroup {
 			width      : 100%;
@@ -27,9 +27,9 @@
 
 				code {
 					padding-inline : 5px;
+					font-family    : monospace;
 					background     : lightgrey;
 					border-radius  : 5px;
-					font-family    : monospace;
 				}
 
 				h1, h2, h3, h4 {
@@ -165,6 +165,48 @@
 					color       : white;
 				}
 
+				.sort-container {
+					display               : flex;
+					flex-wrap             : wrap;
+					column-gap            : 15px;
+					justify-content       : center;
+					height                : 30px;
+					color                 : white;
+					background-color      : #555555;
+					border-top            : 1px solid #666666;
+					border-bottom         : 1px solid #666666;
+					
+					.sort-option {
+						display     : flex;
+						align-items : center;
+						padding     : 0 8px;
+				
+						&:hover { background-color : #444444; }
+				
+						&.active {
+							background-color : #333333;
+				
+							button {
+								font-weight : 800;
+								color       : white;
+								
+								& + .sortDir { padding-left : 5px; }
+							}
+						}
+
+						button {
+							padding          : 0;
+							font-size        : 11px;
+							font-weight      : normal;
+							color            : #CCCCCC;
+							text-transform   : uppercase;
+							background-color : transparent;
+					
+							&:hover { background : none; }
+						}
+					}
+				}
+
 				.foundBrews {
 					position         : relative;
 					width            : 100%;
@@ -236,15 +278,15 @@
 						width            : 47%;
 						margin-right     : 40px;
 						color            : black;
-						isolation:isolate;
+						isolation        : isolate;
 						
-						&:after {
+						&::after {
-							position:absolute;
+							position         : absolute;
-							inset:0;
+							inset            : 0;
-							display:block;
+							z-index          : -1;
-							content:'';
+							display          : block;
+							content          : '';
 							background-image : url('/assets/parchmentBackground.jpg');
-							z-index:-1;
 						}
 
 						&:nth-child(even of .brewItem) { margin-right : 0; }
@@ -257,28 +299,24 @@
 							color       : var(--HB_Color_HeaderText);
 						}
 						.info {
+							position    : relative;
+							z-index     : 2;
 							font-family : 'ScalySansRemake';
 							font-size   : 1.2em;
-							position:relative;
-							z-index:2;
 
 							>span {
 								margin-right : 12px;
 								line-height  : 1.5em;
 							}
 						}
-						.links {
+						.links { z-index : 2; }
-							z-index:2;
-						}
 
 						hr {
-							margin: 0px;
+							margin     : 0px;
-							visibility: hidden;
+							visibility : hidden;
 						}
 
-						.thumbnail {
+						.thumbnail { z-index : 1; }
-							z-index:1;
-						}
 					}
 
 					.paginationControls {

server/vault.api.js

@@ -29,12 +29,20 @@ const rendererConditions = (legacy, v3)=>{
 	return {}; // If all renderers selected, renderer field not needed in query for speed
 };
 
+const sortConditions = (sort, dir) => {
+	return {
+		[sort]: dir === 'asc' ? 1 : -1
+	};
+}
+
 const findBrews = async (req, res)=>{
 	const title  = req.query.title || '';
 	const author = req.query.author || '';
 	const page   = Math.max(parseInt(req.query.page)  || 1, 1);
 	const count  = Math.max(parseInt(req.query.count) || 20, 10);
 	const skip   = (page - 1) * count;
+	const sort = req.query.sort || 'title';
+	const dir = req.query.dir || 'asc';
 
 	const combinedQuery = {
 		$and : [
@@ -55,6 +63,7 @@ const findBrews = async (req, res)=>{
 
 	await HomebrewModel.find(combinedQuery, projection)
 		.skip(skip)
+		.sort(sortConditions(sort, dir))
 		.limit(count)
 		.maxTimeMS(5000)
 		.exec()