1 files changed, 45 insertions, 24 deletions
diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js
index 8e00d0f..383d570 100644
--- a/react-frontend/src/components/HubList.js
+++ b/react-frontend/src/components/HubList.js
@@ -1,6 +1,7 @@
 // React and component imports
 import { useEffect, useState } from "react";
 import Hub from "./Hub.js";
+import uuid from 'react-uuid';
 
 // CSS import
 import "../css/UserCheckin.css";
@@ -11,33 +12,53 @@ import "../css/UserCheckin.css";
  * in a vertical layout.
  */
 function HubList(props) {
-  const [hubItems, setHubItems] = useState([]);
+  const [displayedItems, setDisplayedItems] = useState([]);
 
   /**
-   * Loads new the checkins into the current cache/map of hubs.
+   * Method that determines whehter the Hub should be showed.
+   * @returns {Boolean} True if to be shown, false if not.
    */
-  const updateHubItems = () => {
-    // sort and create the elemnts
-    let hubs = [];
-    //const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore);
-    props.data.forEach(hub =>
-      hubs.push(
-        <Hub
-          key={hub.id}
-          id={hub.id}
-          name={hub.name}
-          value={hub.suspicionScore}
-          setSelected={props.setSelected}
-        ></Hub>
-      )
-    );
-
-    setHubItems(hubs);
-  };
-  // React hook that updates when the hubs are recalculated
-  useEffect(() => updateHubItems(), [props.data]);
-
-  return <ul className='Checkin-list'>{hubItems}</ul>;
+  const toInclude = holder => {
+    // TODO: add number search or differentiate between it
+    // TODO: add sus score range....
+    if (!holder) {
+      return false;
+    };
+
+    // const matchingId = holder.id.toString().includes(queryString.toLowerCase());
+    //console.log(props.queryString.toLowerCase(), props.data.length);
+    const matchingName = holder.name.toLowerCase().includes(props.queryString.toLowerCase());
+    return matchingName;
+  }
+
+  const toHubElement = hub => 
+    <Hub
+      id={hub.id}
+      name={hub.name}
+      value={hub.suspicionScore}
+      setSelectedId={props.setSelectedId}
+      searching={props.searching}
+    ></Hub>;
+
+  /**
+   * Filters the items to be shown, then created the iteams and sets the state with the items.
+   */
+  const filterItems = () => {
+    if (!props.queryString) {
+      // don't need to show all unless searching
+      return setDisplayedItems(props.data.slice(0,600).map(hub => toHubElement(hub)))
+    }
+
+    const criteria = props.data.filter(holder => toInclude(holder));
+    setDisplayedItems(criteria.map(hub => toHubElement(hub)));
+  }
+
+  /**
+   * Hook to update the items on change of the search string or update of data.
+   */
+  useEffect(() => filterItems(), [props.queryString, props.data, props.searching]);
+
+  return <ul className='Checkin-list'>{displayedItems}</ul>;
 }
 
 export default HubList;