1 files changed, 59 insertions, 0 deletions
diff --git a/react-frontend/src/components/HubSearch.js b/react-frontend/src/components/HubSearch.js
new file mode 100644
index 0000000..2ae1a32
--- /dev/null
+++ b/react-frontend/src/components/HubSearch.js
@@ -0,0 +1,59 @@
+// React and component imports
+import { useEffect, useState } from "react";
+import InvestorInfo from "./InvestorInfo.js";
+
+// CSS import
+import '../css/UserCheckin.css';
+import Hub from "./HubList.js";
+import Search from "./HubSearch.js";
+
+/**
+ * Component that build the checkin list and displays checkin info.
+ * @returns {import('react').HtmlHTMLAttributes} A div with the hubs 
+ * in a vertical layout.
+ */
+function HubSearch(props) {
+  const [queryString, setQueryString] = useState("");
+  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) => {
+    // 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;
+  }
+
+  /**
+   * Filters the items to be shown, then created the iteams and sets the state with the items.
+   */
+  const filterItems = () => {
+    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>))
+  }
+
+  /**
+   * Hook to update the items on change of the search string.
+   */
+  useEffect(() => filterItems(), [queryString]);
+
+  // TODO: maybe have a quick explanation of what search gives...
+  // TODO: have number of ceos that make it...
+  // TODO: weighted search or sort after search....
+  // TODO: highlight part of string that matched...
+  return (
+    <div className="User-checkin">
+      <div className="Checkins">
+        <h2>Search</h2>
+        <input type="text" onChange={(e) => setQueryString(e.value)}></input>
+        <ul className='Checkin-list'>{displayedItems}</ul>;
+      </div>
+    </div>
+  );
+}
+
+export default HubSearch;
+\ No newline at end of file