Quick search feature and some restructuring.

5 files changed, 92 insertions, 23 deletions

diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js
index c9a5156..fe47457 100644
--- a/react-frontend/src/components/HubList.js
+++ b/react-frontend/src/components/HubList.js
@@ -13,8 +13,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.
@@ -30,15 +28,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]);
@@ -49,15 +38,7 @@ function HubList(props) {
     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>
-  );
+  return <ul className='Checkin-list'>{hubItems}</ul>;
 }
 
 export default HubList;
\ No newline at end of file
diff --git a/react-frontend/src/components/HubWidget.js b/react-frontend/src/components/HubWidget.js
new file mode 100644
index 0000000..e3c03cd
--- /dev/null
+++ b/react-frontend/src/components/HubWidget.js
@@ -0,0 +1,29 @@
+// 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} selectedId={props.selected} dates={props.dates}></InvestorInfo>
+    </div>
+  );
+}
+
+export default HubWidget;
\ No newline at end of file
diff --git a/react-frontend/src/components/InvestorInfo.js b/react-frontend/src/components/InvestorInfo.js
index d368984..88d0dc0 100644
--- a/react-frontend/src/components/InvestorInfo.js
+++ b/react-frontend/src/components/InvestorInfo.js
@@ -57,7 +57,7 @@ function InvestorInfo(props) {
   useEffect(() => getInfo(), [props.name, props.isSelected, props.personId])
 
   return (
-    <div className="Chosen-user" hidden={props.isSelected}>
+    <div className="Chosen-user" hidden={false}>
       hi
     </div>
   );
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>