Merge pull request #3723 from naturalcrit/sort-in-vault

Add sorting options to Vault Page

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -1,3 +1,5 @@
+/*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
+/*eslint max-params:["warn", { max: 10 }], */
 require('./vaultPage.less');
 
 const React = require('react');
@@ -18,13 +20,15 @@ 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);
 	const [searching, setSearching]           = useState(false);
 	const [error, setError]                   = useState(null);
 
-
 	const titleRef        = useRef(null);
 	const authorRef       = useRef(null);
 	const countRef        = useRef(null);
@@ -34,7 +38,7 @@ const VaultPage = (props)=>{
 
 	useEffect(()=>{
 		disableSubmitIfFormInvalid();
-		loadPage(pageState, true);
+		loadPage(pageState, true, props.query.sort, props.query.dir);
 	}, []);
 
 	const updateStateWithBrews = (brews, page)=>{
@@ -43,7 +47,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 +57,23 @@ 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)=>{
-		updateUrl(title, author, count, v3, legacy, page);
+	const performSearch = async (title, author, count, v3, legacy, page, sort, dir)=>{
+		updateUrl(title, author, count, v3, legacy, page, sort, dir);
 
-		const response = await request.get(
-			`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}`
-		).catch((error)=>{
-			console.log('error at loadPage: ', error);
-			setError(error);
-			updateStateWithBrews([], 1);
-		});
+		const response = await request
+			.get(`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}&sort=${sort}&dir=${dir}`)
+			.catch((error)=>{
+				console.log('error at loadPage: ', error);
+				setError(error);
+				updateStateWithBrews([], 1);
+			});
 
 		if(response.ok)
 			updateStateWithBrews(response.body.brews, page);
@@ -76,9 +82,8 @@ const VaultPage = (props)=>{
 	const loadTotal = async (title, author, v3, legacy)=>{
 		setTotalBrews(null);
 
-		const response = await request.get(
-			`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`
-		).catch((error)=>{
+		const response = await request.get(`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`)
+		.catch((error)=>{
 			console.log('error at loadTotal: ', error);
 			setError(error);
 			updateStateWithBrews([], 1);
@@ -88,9 +93,8 @@ const VaultPage = (props)=>{
 			setTotalBrews(response.body.totalBrews);
 	};
 
-	const loadPage = async (page, updateTotal)=>{
-		if(!validateForm())
-			return;
+	const loadPage = async (page, updateTotal, sort, dir)=>{
+		if(!validateForm()) return;
 
 		setSearching(true);
 		setError(null);
@@ -100,8 +104,14 @@ const VaultPage = (props)=>{
 		const count  = countRef.current.value || 10;
 		const v3     = v3Ref.current.checked != false;
 		const legacy = legacyRef.current.checked != false;
+		const sortOption = sort || 'title';
+		const dirOption = dir || 'asc';
+		const pageProp = page || 1;
 
-		performSearch(title, author, count, v3, legacy, page);
+		setSort(sortOption);
+		setdir(dirOption);
+
+		performSearch(title, author, count, v3, legacy, pageProp, sortOption, dirOption);
 
 		if(updateTotal)
 			loadTotal(title, author, v3, legacy);
@@ -248,6 +258,33 @@ const VaultPage = (props)=>{
 		</div>
 	);
 
+	const renderSortOption = (optionTitle, optionValue)=>{
+		const oppositeDir = dirState === 'asc' ? 'desc' : 'asc';
+
+		return (
+			<div className={`sort-option ${sortState === optionValue ? `active` : ''}`}>
+				<button onClick={()=>loadPage(1, false, optionValue, oppositeDir)}>
+					{optionTitle}
+				</button>
+				{sortState === optionValue && (
+					<i className={`sortDir fas ${dirState === 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`} />
+				)}
+			</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;
 
@@ -271,10 +308,8 @@ const VaultPage = (props)=>{
 			.map((_, index)=>(
 				<a
 					key={startPage + index}
-					className={`pageNumber ${
-						pageState === startPage + index ? 'currentPage' : ''
-					}`}
-					onClick={()=>loadPage(startPage + index, false)}
+					className={`pageNumber ${pageState === startPage + index ? 'currentPage' : ''}`}
+					onClick={()=>loadPage(startPage + index, false, sortState, dirState)}
 				>
 					{startPage + index}
 				</a>
@@ -284,7 +319,7 @@ const VaultPage = (props)=>{
 			<div className='paginationControls'>
 				<button
 					className='previousPage'
-					onClick={()=>loadPage(pageState - 1, false)}
+					onClick={()=>loadPage(pageState - 1, false, sortState, dirState)}
 					disabled={pageState === startPage}
 				>
 					<i className='fa-solid fa-chevron-left'></i>
@@ -293,7 +328,7 @@ const VaultPage = (props)=>{
 					{startPage > 1 && (
 						<a
 							className='pageNumber firstPage'
-							onClick={()=>loadPage(1, false)}
+							onClick={()=>loadPage(1, false, sortState, dirState)}
 						>
 							1 ...
 						</a>
@@ -302,7 +337,7 @@ const VaultPage = (props)=>{
 					{endPage < totalPages && (
 						<a
 							className='pageNumber lastPage'
-							onClick={()=>loadPage(totalPages, false)}
+							onClick={()=>loadPage(totalPages, false, sortState, dirState)}
 						>
 							... {totalPages}
 						</a>
@@ -310,7 +345,7 @@ const VaultPage = (props)=>{
 				</ol>
 				<button
 					className='nextPage'
-					onClick={()=>loadPage(pageState + 1, false)}
+					onClick={()=>loadPage(pageState + 1, false, sortState, dirState)}
 					disabled={pageState === totalPages}
 				>
 					<i className='fa-solid fa-chevron-right'></i>
@@ -385,6 +420,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 {
-							position:absolute;
-							inset:0;
-							display:block;
-							content:'';
+						&::after {
+							position         : absolute;
+							inset            : 0;
+							z-index          : -2;
+							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 {
-							z-index:2;
-						}
+						.links { z-index : 2; }
 
 						hr {
-							margin: 0px;
-							visibility: hidden;
+							margin     : 0px;
+							visibility : hidden;
 						}
 
-						.thumbnail {
-							z-index:1;
-						}
+						.thumbnail { z-index : -1; }
 					}
 
 					.paginationControls {

server/vault.api.js

@@ -29,12 +29,18 @@ 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 : [
@@ -54,6 +60,7 @@ const findBrews = async (req, res)=>{
 	};
 
 	await HomebrewModel.find(combinedQuery, projection)
+		.sort(sortConditions(sort, dir))
 		.skip(skip)
 		.limit(count)
 		.maxTimeMS(5000)