f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-10 07:02:39 +00:00
Code Wiki Activity

"Refactor VaultPage component: updated validateInput to validateForm, changed input validation logic, and added refs for search button and checkboxes."

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-07-27 10:41:10 +02:00
parent af5bbdc677
commit 5b96ef4406
1 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,9 +31,10 @@ const VaultPage = (props) => {
const countRef = useRef(null); const countRef = useRef(null);
const v3Ref = useRef(null); const v3Ref = useRef(null);
const legacyRef = useRef(null); const legacyRef = useRef(null);
const searchButtonRef = useRef(null);
useEffect(() => { useEffect(() => {
validateInput(); validateForm();
if (title) { if (title) {
loadPage(page, false, true); loadPage(page, false, true);
} }
@@ -63,7 +64,7 @@ const VaultPage = (props) => {
const performSearch = async ({ title, count, v3, legacy }) => { const performSearch = async ({ title, count, v3, legacy }) => {
updateUrl(title, page, count, v3, legacy); updateUrl(title, page, count, v3, legacy);
if (title !== '') { if (title && (v3 || legacy)) {
try { try {
const response = await request.get( const response = await request.get(
`/api/vault?title=${title}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}` `/api/vault?title=${title}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}`
@@ -115,8 +116,8 @@ const VaultPage = (props) => {
const title = titleRef.current.value || ''; const title = titleRef.current.value || '';
const count = countRef.current.value || 10; const count = countRef.current.value || 10;
const v3 = v3Ref.current.checked; const v3 = v3Ref.current.checked != false;
const legacy = legacyRef.current.checked; const legacy = legacyRef.current.checked != false;
if (update) { if (update) {
setTitle(title); setTitle(title);
@@ -150,20 +151,22 @@ const VaultPage = (props) => {
</Navbar> </Navbar>
); );
const validateInput = () => { const validateForm = () => {
const submitButton = searchButtonRef.current;
const textInput = titleRef.current; const textInput = titleRef.current;
const submitButton = document.getElementById('searchButton'); const legacyCheckbox = legacyRef.current;
if (textInput.validity.valid && textInput.value) { const v3Checkbox = v3Ref.current;
submitButton.disabled = false;
} else { const isTextValid = textInput.validity.valid && textInput.value;
submitButton.disabled = true; const isCheckboxChecked = legacyCheckbox.checked || v3Checkbox.checked;
}
submitButton.disabled = !(isTextValid && isCheckboxChecked);
}; };
const renderForm = () => ( const renderForm = () => (
<div className="brewLookup"> <div className="brewLookup">
<h2 className="formTitle">Brew Lookup</h2> <h2 className="formTitle">Brew Lookup</h2>
<form className="formContents"> <div className="formContents">
<label> <label>
Title of the brew Title of the brew
<input <input
@@ -171,7 +174,7 @@ const VaultPage = (props) => {
type="text" type="text"
name="title" name="title"
defaultValue={title} defaultValue={title}
onKeyUp={validateInput} onKeyUp={validateForm}
pattern=".{3,}" pattern=".{3,}"
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -188,7 +191,7 @@ const VaultPage = (props) => {
<code>"word"</code> to specify an exact string. <code>"word"</code> to specify an exact string.
</small> </small>
<label> <label>
Results per page Results per page
<select ref={countRef} name="count" defaultValue={count}> <select ref={countRef} name="count" defaultValue={count}>
<option value="10">10</option> <option value="10">10</option>
<option value="20">20</option> <option value="20">20</option>
@@ -199,26 +202,29 @@ const VaultPage = (props) => {
<label> <label>
<input <input
className='renderer' className="renderer"
ref={v3Ref} ref={v3Ref}
type="checkbox" type="checkbox"
defaultChecked={v3} defaultChecked={v3}
onChange={validateForm}
/> />
Search for v3 brews Search for v3 brews
</label> </label>
<label> <label>
<input <input
className='renderer' className="renderer"
ref={legacyRef} ref={legacyRef}
type="checkbox" type="checkbox"
defaultChecked={legacy} defaultChecked={legacy}
onChange={validateForm}
/> />
Search for legacy brews Search for legacy brews
</label> </label>
<button <button
id="searchButton" id="searchButton"
ref={searchButtonRef}
onClick={() => { onClick={() => {
loadPage(1, true, true); loadPage(1, true, true);
}} }}
@@ -231,7 +237,7 @@ const VaultPage = (props) => {
})} })}
/> />
</button> </button>
</form> </div>
<small> <small>
Remember, you can only search brews with this tool if they are Remember, you can only search brews with this tool if they are
published published
@@ -265,7 +271,7 @@ const VaultPage = (props) => {
className={`pageNumber ${ className={`pageNumber ${
page === startPage + index ? 'currentPage' : '' page === startPage + index ? 'currentPage' : ''
}`} }`}
onClick={() => loadPage(startPage + index, false)} onClick={() => loadPage(startPage + index, false, false)}
> >
{startPage + index} {startPage + index}
</a> </a>
@@ -275,7 +281,7 @@ const VaultPage = (props) => {
<div className="paginationControls"> <div className="paginationControls">
<button <button
className="previousPage" className="previousPage"
onClick={() => loadPage(page - 1, false)} onClick={() => loadPage(page - 1, false, false)}
disabled={page === startPage} disabled={page === startPage}
> >
<i className="fa-solid fa-chevron-left"></i> <i className="fa-solid fa-chevron-left"></i>
@@ -284,7 +290,7 @@ const VaultPage = (props) => {
{startPage > 1 && ( {startPage > 1 && (
<a <a
className="pageNumber firstPage" className="pageNumber firstPage"
onClick={() => loadPage(1, false)} onClick={() => loadPage(1, false, false)}
> >
1 ... 1 ...
</a> </a>
@@ -293,7 +299,7 @@ const VaultPage = (props) => {
{endPage < totalPages && ( {endPage < totalPages && (
<a <a
className="pageNumber lastPage" className="pageNumber lastPage"
onClick={() => loadPage(totalPages, false)} onClick={() => loadPage(totalPages, false, false)}
> >
... {totalPages} ... {totalPages}
</a> </a>
@@ -301,7 +307,7 @@ const VaultPage = (props) => {
</ol> </ol>
<button <button
className="nextPage" className="nextPage"
onClick={() => loadPage(page + 1, false)} onClick={() => loadPage(page + 1, false, false)}
disabled={page === totalPages} disabled={page === totalPages}
> >
<i className="fa-solid fa-chevron-right"></i> <i className="fa-solid fa-chevron-right"></i>
@@ -385,13 +391,13 @@ const VaultPage = (props) => {
<link href="/themes/V3/5ePHB/style.css" rel="stylesheet" /> <link href="/themes/V3/5ePHB/style.css" rel="stylesheet" />
{renderNavItems()} {renderNavItems()}
<div className="content"> <div className="content">
<SplitPane hideMoveArrows> <SplitPane hideMoveArrows>
<div className="form dataGroup">{renderForm()}</div> <div className="form dataGroup">{renderForm()}</div>
<div className="resultsContainer dataGroup"> <div className="resultsContainer dataGroup">
{renderFoundBrews()} {renderFoundBrews()}
</div> </div>
</SplitPane> </SplitPane>
</div> </div>
</div> </div>
); );