Multiple state changes and efficiency fixes.

1 files changed, 12 insertions, 7 deletions

diff --git a/react-frontend/src/components/HubSearch.js b/react-frontend/src/components/HubSearch.js
index 2ae1a32..827ea6d 100644
--- a/react-frontend/src/components/HubSearch.js
+++ b/react-frontend/src/components/HubSearch.js
@@ -13,27 +13,32 @@ import Search from "./HubSearch.js";
  * in a vertical layout.
  */
 function HubSearch(props) {
-  const [queryString, setQueryString] = useState("");
+  const [queryString, setQueryString] = useState("", (s) => s.toLowerCase());
   const [displayedItems, setDisplayedItems] = useState([]);
 
   /**
    * Method that determines whehter the Hub should be showed.
    * @returns {Boolean} True if to be shown, false if not.
    */
-  const toInclude = (holder) => {
+  const toInclude = holder => {
     // TODO: add number search or differentiate between it
     // TODO: add sus score range....
-    const matchingId = queryString.toLowerCase().includes(holder?.id ?? "");
-    const matchingName = queryString.toLowerCase().includes(holder?.name ?? "");
-    return matchingId || matchingName;
+    if (!holder) {
+      return false;
+    };
+
+    // const matchingId = holder.id.toString().includes(queryString.toLowerCase());
+    const matchingName = holder.name.toLowerCase().includes(queryString);
+    return matchingName;
   }
 
   /**
    * Filters the items to be shown, then created the iteams and sets the state with the items.
    */
   const filterItems = () => {
+    console.log(queryString);
     const criteria = props.data.filter(holder => toInclude(holder));
-    setDisplayedItems(criteria.map(hub => <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub>))
+    setDisplayedItems(criteria.map(hub => <p>{hub.name}</p>))
   }
 
   /**
@@ -49,7 +54,7 @@ function HubSearch(props) {
     <div className="User-checkin">
       <div className="Checkins">
         <h2>Search</h2>
-        <input type="text" onChange={(e) => setQueryString(e.value)}></input>
+        <input type="text" onChange={(e) => setQueryString(e.target.value)}></input>
         <ul className='Checkin-list'>{displayedItems}</ul>;
       </div>
     </div>