1 files changed, 45 insertions, 44 deletions

diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js
index c9a5156..383d570 100644
--- a/react-frontend/src/components/HubList.js
+++ b/react-frontend/src/components/HubList.js
@@ -1,63 +1,64 @@
 // React and component imports
 import { useEffect, useState } from "react";
 import Hub from "./Hub.js";
-import InvestorInfo from "./InvestorInfo.js";
+import uuid from 'react-uuid';
 
 // CSS import
-import '../css/UserCheckin.css';
+import "../css/UserCheckin.css";
 
 /**
  * Component that build the checkin list and displays checkin info.
- * @returns {import('react').HtmlHTMLAttributes} A div with the hubs 
+ * @returns {import('react').HtmlHTMLAttributes} A div with the hubs
  * in a vertical layout.
  */
 function HubList(props) {
-  const [hubItems, setHubItems] = useState([]);
-  const [isSelected, setIsSelected] = useState(false);
-  const [name, setName] = 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);
+  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 getName = () => {
-    props.data.forEach(hub => {
-      if (hub.id === props.selected) {
-        setName(hub.name);
-      }
-    })
-    setName('');
+  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)));
   }
 
-  
-  // React hook that updates when the hubs are recalculated
-  useEffect(() => updateHubItems(), [props.data]);
-
-  //React hook to show data for an investor
-  useEffect(() => {
-    setIsSelected(true)
-    getName();
-  }, [props.selected]);
-
-  return (
-    <div className="User-checkin">
-        <div className="Checkins">
-            <h2>Suspicion Ranks</h2>
-            <ul className='Checkin-list'>{hubItems}</ul>
-        </div>
-        <InvestorInfo personId={props.selected} isSelected={isSelected} name={name} dates={props.dates}></InvestorInfo>
-    </div>
-  );
+  /**
+   * 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;
\ No newline at end of file
+export default HubList;