From 59a5f641afa50670fed694da3d6d9e05f7adf744 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 28 Jul 2024 10:45:56 +0200 Subject: [PATCH] search by author --- client/homebrew/pages/vaultPage/vaultPage.jsx | 98 ++++++++++++---- .../homebrew/pages/vaultPage/vaultPage.less | 12 +- server/vault.api.js | 105 +++++++++--------- 3 files changed, 139 insertions(+), 76 deletions(-) diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx index a5c9a5937..0ccd1144b 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 [title, setTitle] = useState(props.query.title || ''); + //state author and owner + const [author, setAuthor] = useState(props.query.author || ''); + const [owner, setOwner] = useState(props.query.owner !== 'false'); const [legacy, setLegacy] = useState(props.query.legacy !== 'false'); const [v3, setV3] = useState(props.query.v3 !== 'false'); const [count, setCount] = useState(props.query.count || 20); @@ -28,6 +31,8 @@ const VaultPage = (props) => { const [error, setError] = useState(null); const titleRef = useRef(null); + const authorRef = useRef(null); + const ownerRef = useRef(null); const countRef = useRef(null); const v3Ref = useRef(null); const legacyRef = useRef(null); @@ -46,13 +51,19 @@ const VaultPage = (props) => { setSearching(false); }; - const updateUrl = (title, page, count, v3, legacy) => { + const updateUrl = (title, author, owner, count, v3, legacy, page) => { const url = new URL(window.location.href); const urlParams = new URLSearchParams(); - Object.entries({ title, v3, legacy, count, page }).forEach( - ([key, value]) => urlParams.set(key, value) - ); + Object.entries({ + title, + author, + owner, + count, + v3, + legacy, + page, + }).forEach(([key, value]) => urlParams.set(key, value)); url.search = urlParams.toString(); window.history.replaceState(null, null, url); @@ -62,14 +73,22 @@ const VaultPage = (props) => { setSearching(true); setError(null); - const performSearch = async ({ title, count, v3, legacy }) => { - updateUrl(title, page, count, v3, legacy); - if (title && (v3 || legacy)) { + const performSearch = async ({ + title, + author, + owner, + count, + v3, + legacy, + }) => { + updateUrl(title, author, owner, count, v3, legacy, page); + if ((title || author) && (v3 || legacy)) { try { const response = await request.get( - `/api/vault?title=${title}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}` + `/api/vault?title=${title}&author=${author}&owner=${owner}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}` ); if (response.ok) { + console.log(response.body.brews); updateStateWithBrews(response.body.brews, page); } else { throw new Error(`Error: ${response.status}`); @@ -93,10 +112,10 @@ const VaultPage = (props) => { const loadTotal = async ({ title, v3, legacy }) => { setTotalBrews(null); setError(null); - if (title) { + if ((title || author) && (v3 || legacy)) { try { const response = await request.get( - `/api/vault/total?title=${title}&v3=${v3}&legacy=${legacy}` + `/api/vault/total?title=${title}&author=${author}&owner=${owner}&v3=${v3}&legacy=${legacy}` ); if (response.ok) { @@ -115,23 +134,26 @@ const VaultPage = (props) => { }; const title = titleRef.current.value || ''; + const author = authorRef.current.value || ''; + const owner = ownerRef.current.checked != false; const count = countRef.current.value || 10; const v3 = v3Ref.current.checked != false; const legacy = legacyRef.current.checked != false; + console.log(author); if (update) { setTitle(title); setCount(count); setV3(v3); setLegacy(legacy); - performSearch({ title, count, v3, legacy }); + performSearch({ title, author, owner, count, v3, legacy }); } else { - performSearch({ title, count, v3, legacy }); + performSearch({ title, author, owner, count, v3, legacy }); } if (total) { - loadTotal({ title, v3, legacy }); + loadTotal({ title, author, owner, v3, legacy }); } }; @@ -152,15 +174,19 @@ const VaultPage = (props) => { ); const validateForm = () => { - const submitButton = searchButtonRef.current; - const textInput = titleRef.current; - const legacyCheckbox = legacyRef.current; - const v3Checkbox = v3Ref.current; + //form validity: title or author must be written, and at least one renderer set + const { current: submitButton } = searchButtonRef; + const { current: titleInput } = titleRef; + const { current: legacyCheckbox } = legacyRef; + const { current: v3Checkbox } = v3Ref; + const { current: authorInput } = authorRef; - const isTextValid = textInput.validity.valid && textInput.value; + const isTitleValid = titleInput.validity.valid && titleInput.value; + const isAuthorValid = authorInput.validity.valid && authorInput.value; const isCheckboxChecked = legacyCheckbox.checked || v3Checkbox.checked; - submitButton.disabled = !(isTextValid && isCheckboxChecked); + submitButton.disabled = + !(isTitleValid || isAuthorValid) || !isCheckboxChecked; }; const renderForm = () => ( @@ -176,6 +202,7 @@ const VaultPage = (props) => { defaultValue={title} onKeyUp={validateForm} pattern=".{3,}" + title="At least 3 characters" onKeyDown={(e) => { if (e.key === 'Enter') { if (!searchButtonRef.current.disabled) { @@ -190,6 +217,35 @@ const VaultPage = (props) => { Tip! you can use - to negate words, and{' '} "word" to specify an exact string. + +