"Refactor VaultPage component, update styles, and modify server-side API queries"

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -11,7 +11,6 @@ const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx');
-
 const SplitPane = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
 
 const request = require('../../utils/request-middleware.js');
@@ -65,6 +64,8 @@ const VaultPage = (props) => {
     };
 
     const loadPage = async (page, update, total) => {
+        //Different searches use the update or total props to make only the necessary queries and functions
+
         if (!validateForm()) {
             console.log(
                 'Invalid search, title should be more than 3 characters, or an author specified, and at least one renderer specified.'
@@ -128,26 +129,25 @@ const VaultPage = (props) => {
             }
         };
 
-        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) {
-            setTitle(title);
+            setTitle(titleValue);
-            setAuthor(author);
+            setAuthor(authorValue);
-            setCount(count);
+            setCount(countValue);
-            setV3(v3);
+            setV3(v3Value);
-            setLegacy(legacy);
+            setLegacy(legacyValue);
-
-            performSearch({ title, author, count, v3, legacy });
-        } else {
-            performSearch({ title, author, count, v3, legacy });
         }
         
+        // Perform search with the latest input values, because state is not fast enough
+        performSearch({ titleValue, authorValue, countValue, v3Value, legacyValue });
+
         if (total) {
-            loadTotal({ title, author, v3, legacy });
+            loadTotal({ titleValue, authorValue, v3Value, legacyValue });
         }
     };
 
@@ -175,6 +175,7 @@ const VaultPage = (props) => {
         const { current: authorInput } = authorRef;
 
         const isTitleValid = titleInput.validity.valid && titleInput.value;
+        //because a pattern attr is set in the input, title must be over 2 chars long
         const isAuthorValid = authorInput.validity.valid && authorInput.value;
         const isCheckboxChecked = legacyCheckbox.checked || v3Checkbox.checked;
 
@@ -185,7 +186,6 @@ const VaultPage = (props) => {
 
     const disableSubmitIfFormInvalid = () => {
         const { current: submitButton } = searchButtonRef;
-
         submitButton.disabled = !validateForm();
     };
 
@@ -236,6 +236,9 @@ const VaultPage = (props) => {
                         placeholder="Gazook89"
                     />
                 </label>
+                <small>
+                    Remember, usernames are case sensitive.
+                </small>
                 <label>
                     Results per page
                     <select ref={countRef} name="count" defaultValue={count}>

client/homebrew/pages/vaultPage/vaultPage.less

@@ -117,7 +117,10 @@ body {
 						right    : 10px;
 						bottom   : 0;
 
-						i { margin-left : 10px; }
+						i {
+							margin-left			: 10px;
+							animation-duration  : 1000s;
+						}
 					}
 				}
 			}
@@ -162,7 +165,7 @@ body {
 							width     : max-content;
 							height    : 1em;
 							content   : '';
-							translate : 100% -50%;
+							translate : calc(100% + 5px) -50%;
 							animation : trailingDots 2s ease infinite;
 						}
 					}
@@ -285,13 +288,13 @@ body {
 @keyframes trailingDots {
 
 	0%,
-	32% { content : '.'; }
+	32% { content : ' .'; }
 
 	33%,
-	65% { content : '..'; }
+	65% { content : ' ..'; }
 
 	66%,
-	100% { content : '...'; }
+	100% { content : ' ...'; }
 }
 
 // media query for when the page is smaller than 1079 px in width

server/vault.api.js

@@ -52,12 +52,8 @@ const buildBrewsQuery = (legacy, v3) => {
 const vault = {
     findBrews: async (req, res) => {
         try {
-            console.log(`Query as received in vault api for findBrews:`);
-            console.table(req.query);
-
             const title = req.query.title || '';
             const author = req.query.author || '';
-           
             const page = Math.max(parseInt(req.query.page) || 1, 1);
             const mincount = 10;
             const count = Math.max(parseInt(req.query.count) || 20, mincount);
@@ -76,14 +72,20 @@ const vault = {
                 googleId: 0,
                 text: 0,
                 textBin: 0,
+                version: 0,
+                thumbnail: 0,
             };
+
             const brews = await HomebrewModel.find(combinedQuery, projection)
                 .skip(skip)
                 .limit(count)
                 .maxTimeMS(5000)
                 .exec();
 
-            console.log('query', JSON.stringify(combinedQuery, null, 2));
+            console.log(
+                'Query in findBrews: ',
+                JSON.stringify(combinedQuery, null, 2)
+            );
             return res.json({ brews, page });
         } catch (error) {
             console.error(error);
@@ -92,8 +94,6 @@ const vault = {
     },
 
     findTotal: async (req, res) => {
-        console.log(`Query as received in vault api for totalBrews:`);
-        console.table(req.query);
         try {
             const title = req.query.title || '';
             const author = req.query.author || '';
@@ -106,16 +106,11 @@ const vault = {
                 $and: [brewsQuery, titleConditions, authorConditions],
             };
 
-            console.log(
-                'Combined Query:',
-                JSON.stringify(combinedQuery, null, 2)
-            );
-
             const totalBrews = await HomebrewModel.countDocuments(
                 combinedQuery
             );
             console.log(
-                'when returning, totalbrews is ',
+                'when returning, the total of brews is ',
                 totalBrews,
                 'for the query',
                 JSON.stringify(combinedQuery)