f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-19 09:52:44 +00:00
Code Wiki Activity

initial commit

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-09-10 08:28:34 +02:00
parent 22678b15af
commit ea1d0714b4
3 changed files with 138 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
client/homebrew/pages/vaultPage/vaultPage.jsx
View File

@@ -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)=>{
</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>