f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-29 13:22:40 +00:00
Code Wiki Activity

renaming to make more clear

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-09-03 15:54:53 +02:00
parent 1517c00132
commit 00a83ec16e
1 changed files with 46 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,18 +16,21 @@ const ErrorIndex = require('../errorPage/errors/errorIndex.js');
const request = require('../../utils/request-middleware.js'); const request = require('../../utils/request-middleware.js');
const VaultPage = (props) => { const VaultPage = (props) => {
const [title, setTitle] = useState(props.query.title || ''); //Form state
//state author const [titleState, setTitle] = useState(props.query.title || '');
const [author, setAuthor] = useState(props.query.author || ''); const [authorState, setAuthor] = useState(props.query.author || '');
const [legacy, setLegacy] = useState(props.query.legacy !== 'false'); const [legacyState, setLegacy] = useState(props.query.legacy !== 'false');
const [v3, setV3] = useState(props.query.v3 !== 'false'); const [v3State, setV3] = useState(props.query.v3 !== 'false');
const [count, setCount] = useState(props.query.count || 20); const [countState, setCount] = useState(props.query.count || 20);
const [page, setPage] = useState(parseInt(props.query.page) || 1); const [pageState, setPage] = useState(parseInt(props.query.page) || 1);
//Response state
const [brewCollection, setBrewCollection] = useState(null); const [brewCollection, setBrewCollection] = useState(null);
const [totalBrews, setTotalBrews] = useState(null); const [totalBrews, setTotalBrews] = useState(null);
const [searching, setSearching] = useState(false); const [searching, setSearching] = useState(false);
const [error, setError] = useState(null); const [error, setError] = useState(null);
const titleRef = useRef(null); const titleRef = useRef(null);
const authorRef = useRef(null); const authorRef = useRef(null);
const countRef = useRef(null); const countRef = useRef(null);
@@ -37,7 +40,7 @@ const VaultPage = (props) => {
useEffect(() => { useEffect(() => {
disableSubmitIfFormInvalid(); disableSubmitIfFormInvalid();
loadPage(page, false, true); loadPage(pageState, false, true);
}, []); }, []);
const updateStateWithBrews = (brews, page) => { const updateStateWithBrews = (brews, page) => {
@@ -63,12 +66,12 @@ const VaultPage = (props) => {
window.history.replaceState(null, null, url); window.history.replaceState(null, null, url);
}; };
const performSearch = async ({ title, author, count, v3, legacy, page }) => { const performSearch = async ({ titleValue, authorValue, countValue, v3Value, legacyValue, page }) => {
updateUrl(title, author, count, v3, legacy, page); updateUrl(titleValue, authorValue, countValue, v3Value, legacyValue, page);
console.log(title, author, count, v3, legacy); console.log(title, author, count, v3, legacy);
if ((title || author) && (v3 || legacy)) { if ((titleValue || authorValue) && (v3Value || legacyValue)) {
const response = await request.get( const response = await request.get(
`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}` `/api/vault?title=${titleValue}&author=${authorValue}&v3=${v3Value}&legacy=${legacyValue}&count=${countValue}&page=${page}`
).catch((error)=>{ ).catch((error)=>{
console.log('error at loadPage: ', error); console.log('error at loadPage: ', error);
setError(`${error.response setError(`${error.response
@@ -83,11 +86,11 @@ const VaultPage = (props) => {
} }
}; };
const loadTotal = async ({ title, v3, legacy }) => { const loadTotal = async ({ titleValue, authorValue, v3Value, legacyValue }) => {
setTotalBrews(null); setTotalBrews(null);
if ((title || author) && (v3 || legacy)) { if ((titleValue || authorValue) && (v3Value || legacyValue)) {
const response = await request.get( const response = await request.get(
`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}` `/api/vault/total?title=${titleValue}&author=${authorValue}&v3=${v3Value}&legacy=${legacyValue}`
).catch((error)=>{ ).catch((error)=>{
console.log('error at loadTotal: ', error); console.log('error at loadTotal: ', error);
setError(`${error.response setError(`${error.response
@@ -103,34 +106,32 @@ const VaultPage = (props) => {
}; };
const loadPage = async (page, update, total) => { const loadPage = async (page, update, total) => {
//Different searches use the update or total props to make only the necessary queries and functions
if (!validateForm()) { if (!validateForm()) {
return; return;
} }
setSearching(true); setSearching(true);
setError(null); setError(null);
const title = titleRef.current.value || ''; const titleValue = titleRef.current.value || '';
const author = authorRef.current.value || ''; const authorValue = authorRef.current.value || '';
const count = countRef.current.value || 10; const countValue = countRef.current.value || 10;
const v3 = v3Ref.current.checked != false; const v3Value = v3Ref.current.checked != false;
const legacy = legacyRef.current.checked != false; const legacyValue = legacyRef.current.checked != false;
if (update) { if (update) {
setTitle(title); setTitle(titleValue);
setAuthor(author); setAuthor(authorValue);
setCount(count); setCount(countValue);
setV3(v3); setV3(v3Value);
setLegacy(legacy); setLegacy(legacyValue);
setPage(page); setPage(page);
} }
// Perform search with the latest input values, because state is not fast enough // Perform search with the latest input values, because state is not fast enough
performSearch({ title, author, count, v3, legacy, page }); performSearch({ titleValue, authorValue, countValue, v3Value, legacyValue, page });
if (total) { if (total) {
loadTotal({ title, author, v3, legacy }); loadTotal({ titleValue, authorValue, v3Value, legacyValue });
} }
}; };
@@ -176,7 +177,7 @@ const VaultPage = (props) => {
ref={titleRef} ref={titleRef}
type="text" type="text"
name="title" name="title"
defaultValue={title} defaultValue={titleState}
onKeyUp={disableSubmitIfFormInvalid} onKeyUp={disableSubmitIfFormInvalid}
pattern=".{3,}" pattern=".{3,}"
title="At least 3 characters" title="At least 3 characters"
@@ -195,19 +196,19 @@ const VaultPage = (props) => {
type="text" type="text"
name="author" name="author"
pattern=".{1,}" pattern=".{1,}"
defaultValue={author} defaultValue={authorState}
onKeyUp={disableSubmitIfFormInvalid} onKeyUp={disableSubmitIfFormInvalid}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && !submitButtonRef.current.disabled) if (e.key === 'Enter' && !submitButtonRef.current.disabled)
loadPage(1, true, true); loadPage(1, true, true);
}} }}
placeholder="Gazook89" placeholder="Username"
/> />
</label> </label>
<label> <label>
Results per page Results per page
<select ref={countRef} name="count" defaultValue={count}> <select ref={countRef} name="count" defaultValue={countState}>
<option value="10">10</option> <option value="10">10</option>
<option value="20">20</option> <option value="20">20</option>
<option value="40">40</option> <option value="40">40</option>
@@ -220,7 +221,7 @@ const VaultPage = (props) => {
className="renderer" className="renderer"
ref={v3Ref} ref={v3Ref}
type="checkbox" type="checkbox"
defaultChecked={v3} defaultChecked={v3State}
onChange={disableSubmitIfFormInvalid} onChange={disableSubmitIfFormInvalid}
/> />
Search for v3 brews Search for v3 brews
@@ -231,7 +232,7 @@ const VaultPage = (props) => {
className="renderer" className="renderer"
ref={legacyRef} ref={legacyRef}
type="checkbox" type="checkbox"
defaultChecked={legacy} defaultChecked={legacyState}
onChange={disableSubmitIfFormInvalid} onChange={disableSubmitIfFormInvalid}
/> />
Search for legacy brews Search for legacy brews
@@ -281,19 +282,19 @@ const VaultPage = (props) => {
const renderPaginationControls = () => { const renderPaginationControls = () => {
if (!totalBrews) return null; if (!totalBrews) return null;
const countInt = parseInt(count); const countInt = parseInt(countState);
const totalPages = Math.ceil(totalBrews / countInt); const totalPages = Math.ceil(totalBrews / countInt);
let startPage, endPage; let startPage, endPage;
if (page <= 6) { if (pageState <= 6) {
startPage = 1; startPage = 1;
endPage = Math.min(totalPages, 10); endPage = Math.min(totalPages, 10);
} else if (page + 4 >= totalPages) { } else if (pageState + 4 >= totalPages) {
startPage = Math.max(1, totalPages - 9); startPage = Math.max(1, totalPages - 9);
endPage = totalPages; endPage = totalPages;
} else { } else {
startPage = page - 5; startPage = pageState - 5;
endPage = page + 4; endPage = pageState + 4;
} }
const pagesAroundCurrent = new Array(endPage - startPage + 1) const pagesAroundCurrent = new Array(endPage - startPage + 1)
@@ -302,7 +303,7 @@ const VaultPage = (props) => {
<a <a
key={startPage + index} key={startPage + index}
className={`pageNumber ${ className={`pageNumber ${
page === startPage + index ? 'currentPage' : '' pageState === startPage + index ? 'currentPage' : ''
}`} }`}
onClick={() => loadPage(startPage + index, false, false)} onClick={() => loadPage(startPage + index, false, false)}
> >
@@ -314,8 +315,8 @@ const VaultPage = (props) => {
<div className="paginationControls"> <div className="paginationControls">
<button <button
className="previousPage" className="previousPage"
onClick={() => loadPage(page - 1, false, false)} onClick={() => loadPage(pageState - 1, false, false)}
disabled={page === startPage} disabled={pageState === startPage}
> >
<i className="fa-solid fa-chevron-left"></i> <i className="fa-solid fa-chevron-left"></i>
</button> </button>
@@ -340,8 +341,8 @@ const VaultPage = (props) => {
</ol> </ol>
<button <button
className="nextPage" className="nextPage"
onClick={() => loadPage(page + 1, false, false)} onClick={() => loadPage(pageState + 1, false, false)}
disabled={page === totalPages} disabled={pageState === totalPages}
> >
<i className="fa-solid fa-chevron-right"></i> <i className="fa-solid fa-chevron-right"></i>
</button> </button>