5 files changed, 107 insertions, 41 deletions
diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js
index a639edd..982f6d4 100644
--- a/react-frontend/src/App.js
+++ b/react-frontend/src/App.js
@@ -9,18 +9,17 @@ import mainlogo from './images/mainlogo.png';
 import './css/Landing.css';
 
 function App() {
-    const [startApp, setStartApp] = useState(false);
-
-    const startModal = () => {
-        document.getElementById("main-modal").style.display = 'block';
-        setStartApp(false);
-      }
-      const exitModal = () => {
-        document.getElementById("main-modal").style.display = 'none';
-        setStartApp(true);
-      }
-
-
+  const [startApp, setStartApp] = useState(false);
+
+  const startModal = () => {
+    document.getElementById("main-modal").style.display = 'block';
+    setStartApp(false);
+  }
+  const exitModal = () => {
+    document.getElementById("main-modal").style.display = 'none';
+    setStartApp(true);
+  }
+  
   return (
     <>
    
diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js
index 8aeb013..6d0b3e1 100644
--- a/react-frontend/src/components/HubList.js
+++ b/react-frontend/src/components/HubList.js
@@ -1,7 +1,6 @@
 // React and component imports
 import { useEffect, useState } from "react";
 import Hub from "./Hub.js";
-import InvestorInfo from "./InvestorInfo.js";
 
 // CSS import
 import "../css/UserCheckin.css";
@@ -13,8 +12,6 @@ import "../css/UserCheckin.css";
  */
 function HubList(props) {
   const [hubItems, setHubItems] = useState([]);
-  const [isSelected, setIsSelected] = useState(false);
-  const [name, setName] = useState("");
 
   /**
    * Loads new the checkins into the current cache/map of hubs.
@@ -37,16 +34,6 @@ function HubList(props) {
 
     setHubItems(hubs);
   };
-
-  const getName = () => {
-    props.data.forEach((hub) => {
-      if (hub.id === props.selected) {
-        setName(hub.name);
-      }
-    });
-    setName("");
-  };
-
   // React hook that updates when the hubs are recalculated
   useEffect(() => updateHubItems(), [props.data]);
 
@@ -57,20 +44,7 @@ function HubList(props) {
     console.log("DEVLOG");
   }, [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>
-  );
+  return <ul className='Checkin-list'>{hubItems}</ul>;
 }
 
 export default HubList;
diff --git a/react-frontend/src/components/HubWidget.js b/react-frontend/src/components/HubWidget.js
new file mode 100644
index 0000000..a4560fe
--- /dev/null
+++ b/react-frontend/src/components/HubWidget.js
@@ -0,0 +1,34 @@
+// React and component imports
+import { useEffect, useState } from "react";
+import Hub from "./Hub.js";
+import InvestorInfo from "./InvestorInfo.js";
+
+// CSS import
+import '../css/UserCheckin.css';
+import HubList from "./HubList.js";
+import Search from "./Search.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 HudWidget(props) {
+  return (
+    <div className="User-checkin">
+      <div className="Checkins">
+        <h2>Suspicion Ranks</h2>
+        <HubList setHasLoaded={props.setHasLoaded} data={props.data} setSelected={props.setSelected} selected={props.selected} dates={props.dates}></HubList>
+      </div>
+      <Search></Search>
+      <InvestorInfo
+        personId={props.selected}
+        isSelected={isSelected}
+        name={name}
+        dates={props.dates}
+      ></InvestorInfo>
+    </div>
+  );
+}
+
+export default HubWidget;
+\ No newline at end of file
diff --git a/react-frontend/src/components/Search.js b/react-frontend/src/components/Search.js
new file mode 100644
index 0000000..0698b01
--- /dev/null
+++ b/react-frontend/src/components/Search.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 "./Search.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 Search(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 Search;
+\ No newline at end of file
diff --git a/react-frontend/src/components/WatchDogs.js b/react-frontend/src/components/WatchDogs.js
index d631ea9..6192dee 100644
--- a/react-frontend/src/components/WatchDogs.js
+++ b/react-frontend/src/components/WatchDogs.js
@@ -2,7 +2,7 @@
 import React, {useEffect, useState} from 'react';
 import TimeSelector from './TimeSelector.js';
 import Visualization from './Visualization.js';
-import HubList from './HubList.js';
+import HubWidget from './HubWidget.js';
 import Loading from './Loading.js';
 import Modal from './Modal.js';
 import logo from './images/logo.png';
@@ -77,7 +77,7 @@ function WatchDogs() {
           <div className="Canvas-filler Canvas-filler-1"></div>
           <div className="Canvas-filler Canvas-filler-2"></div>
           <div className="Canvas-filler Canvas-filler-3"></div>
-          <HubList setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubList>
+          <HubWidget setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubWidget>
           <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>
           <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization>
         </div>