From ea1d0714b435c848c61f50a82c12f3eb78ac36b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Tue, 10 Sep 2024 08:28:34 +0200 Subject: [PATCH 1/9] initial commit --- client/homebrew/pages/vaultPage/vaultPage.jsx | 92 +++++++++++++++---- .../homebrew/pages/vaultPage/vaultPage.less | 76 +++++++++++---- server/vault.api.js | 9 ++ 3 files changed, 138 insertions(+), 39 deletions(-) diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx index a550ec578..2eb109c39 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.jsx +++ b/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)=>{ - 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); @@ -88,9 +98,8 @@ const VaultPage = (props)=>{ setTotalBrews(response.body.totalBrews); }; - const loadPage = async (page, updateTotal)=>{ - if(!validateForm()) - return; + const loadPage = async (page, updateTotal, sort)=>{ + if(!validateForm()) 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)=>{ ); + const renderSortOption = ( optionTitle, optionValue)=>{ + const oppositeDir = dirState === 'asc' ? 'desc' : 'asc'; + + return ( +
+ + {sortState === optionValue && ( + + )} +
+ ); + }; + + const renderSortBar = ()=>{ + + return ( +
+ {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)} +
+ ); + }; + 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} @@ -284,7 +335,7 @@ const VaultPage = (props)=>{
{sortState === optionValue && ( - + )}
); From 4fd358771ac93d6c1845393c6ed071a8b8b9a066 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 20 Sep 2024 20:25:33 +0200 Subject: [PATCH 5/9] fix class by suggestion --- client/homebrew/pages/vaultPage/vaultPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx index 409103167..d8e557286 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.jsx +++ b/client/homebrew/pages/vaultPage/vaultPage.jsx @@ -266,7 +266,7 @@ const VaultPage = (props)=>{ return (
{sortState === optionValue && ( @@ -319,7 +317,7 @@ const VaultPage = (props)=>{ className={`pageNumber ${ pageState === startPage + index ? 'currentPage' : '' }`} - onClick={()=>loadPage(startPage + index)} + onClick={()=>loadPage(startPage + index, false, sortState, dirState)} > {startPage + index} @@ -329,7 +327,7 @@ const VaultPage = (props)=>{
); - const renderSortOption = ( optionTitle, optionValue)=>{ + const renderSortOption = (optionTitle, optionValue)=>{ const oppositeDir = dirState === 'asc' ? 'desc' : 'asc'; return ( -
- - {sortState === optionValue && ( - - )} +
+ + {sortState === optionValue && ( + + )}
); }; const renderSortBar = ()=>{ - + return (
{renderSortOption('Title', 'title', props.query.dir)} @@ -314,9 +308,7 @@ const VaultPage = (props)=>{ .map((_, index)=>( loadPage(startPage + index, false, sortState, dirState)} > {startPage + index} @@ -373,7 +365,7 @@ const VaultPage = (props)=>{ if(error) { const errorText = ErrorIndex()[error.HBErrorCode.toString()] || ''; - + return (

Error: {errorText}

From 4353c010327bfc62a3ebfae039994bd899b25c51 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 20 Sep 2024 16:01:29 -0400 Subject: [PATCH 8/9] Update server/vault.api.js --- server/vault.api.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/server/vault.api.js b/server/vault.api.js index f3e0d74ac..88115af2d 100644 --- a/server/vault.api.js +++ b/server/vault.api.js @@ -30,9 +30,7 @@ const rendererConditions = (legacy, v3)=>{ }; const sortConditions = (sort, dir) => { - return { - [sort]: dir === 'asc' ? 1 : -1 - }; + return { [sort]: dir === 'asc' ? 1 : -1 }; } const findBrews = async (req, res)=>{ From 971be6375eab4c124f10bc8380f1f86b0fb29e2f Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 20 Sep 2024 16:02:09 -0400 Subject: [PATCH 9/9] lint --- server/vault.api.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/server/vault.api.js b/server/vault.api.js index 88115af2d..8aa382f26 100644 --- a/server/vault.api.js +++ b/server/vault.api.js @@ -31,7 +31,7 @@ const rendererConditions = (legacy, v3)=>{ const sortConditions = (sort, dir) => { return { [sort]: dir === 'asc' ? 1 : -1 }; -} +}; const findBrews = async (req, res)=>{ const title = req.query.title || '';